Cara Membuat Recent Post Sesuai Label di Blog

Recent post Thumnail Berdasarkan Label bisa membuat blog terorganisir dengan baik, sehingga membuat pengunjung dapat dengan mudah menemukan topik yang mereka cari. Seperti pada ulasan sebelumnya 5 Recent Post Keren Blogger, widget tersebut menampilkan semua postingan terbaru.

Pada Recent post kali ini hanya menampilkan postingan terbaru berdasarkan kategori, sehingga kita bisa menampilkan postingan terbaru untuk setiap kategori dan juga menampilkan gambar untuk setiap kategori.

Nah, untuk Anda yang berkeinginan memasang widget Recent Post berdasarkan Label, bisa mengikuti langkah-langkahnya di bawah ini :

Cara Memasang Recent Post

1. Log-in ke akun Blogger
2. Dari dasbor, pilih Template >> klik tombol HTML
3. Langkah selanjutnya, dengan menggunakan CTRL+F cari kode ]]></b:skin> lalu copy kode dibawah ini dan pastekan diatasnya :

/* Recent posts by label
--------------------------------- */
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail height */
width:65px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

#label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul#label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}

#label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}

#label_with_thumbs a { text-transform: uppercase;font-family: 'Oswald', sans-serif;  min-height: 10px; margin: 5px 0px 5px 0px; font-size:12px;}
#label_with_thumbs strong {padding-left:0px; }

4. Selanjutnya Anda cari kode </head> dan copy script di bawah ini dan pastekan sebelumnya

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul id="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzR2jI9-kRsBZpgks5GbelKN3iXblyPs0KJaDfIwGIQJwEAYfll4UTuyqo5JwkPU5DM-YlImnkpbyTbZRmNefbQfQUc-t2odJ8lwUA9phFis0U-bqhVaIvGL05YdTXKaPR3gLlLF4WunE/s1600/picture_not_available.png';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

5. Untuk menciptakan resolusi gambar yang lebih baik, tambahkan script di bawah ini di atas </body>

<script type='text/javascript'>                
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = 65px;
thumbnails[i].height = 65px;
}
}
changeThumbSize("label_with_thumbs",210);            
</script>

6. Sekarang simpan template.

Kode yang kita tambahkan tadi adalah CSS fungsinya untuk memper cantik tampilan widget dan script untuk membuat widget berkeja secara maksimal. Untuk langkah selanjutnya menambahkan kode pada sidebar, berikut langkah-langkahnya :

7. Pada dasbor Blog, pilih Layout/Tata letak, lalu klik pada tambah gadget

8. Maka akan muncul jendela pop up, pilih widget HTML/Javascript dan pastekan kode di bawah ini pada kolom yang tersedia.

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Nama-label?published&alt=json-in-script&callback=labelthumbs"></script>

Catatan : Pada kode yang saya beri warna merah Nama-Label, ganti dengan label ingin Anda tampilkan pada sidebar.

Pada widget ini hanya menampilan postingan baru per-label, jika Anda ingin menampilkan postingan dengan label lain silangkan ulangi cara pada nomor delapan saja. Cukup sekian dari saya, dan terima kasih.

Bagikan Artikel ini