Cara Membuat Recent Post Berdasarkan Label dan Thumbnail

Seperti beberapa Contoh Recent Post Berdasarkan Label dan Thumbnail pada Blog Saya ini. Maka dari itu Saya akan berbagi pada Anda bagaimana cara membuat nya. Tutorial ini Saya dapatkan dari Blog SEO DAW - XP . Di mana Widget ini akan otomatis menampilkan update posting kita hanya pada label / kategori yang telah Anda tentukan.

Kalo Anda berminat dan ingin untuk mencoba nya, silahkan ikuti Langkah-langkah Tutorial di Bawah ini:

1. Seperti biasa, login ke akun blogger Anda,

2. Pergi ke tab rancangan >> edit html

3. EXPAND TEMPLATE WIDGET

4. cari kode ]]></b:skin>..

(Gunakan ctrl F di keyboard untuk mempermudah pencarian)

5. Copy paste kode di bawah ini sebelum kode No.4

img.label_thumb{float:left; padding:5px; border:1px solid #8f8f8f; background:#D2D0D0; margin-right:10px; height:55px; width:55px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left; width:100%; min-height:70px; margin:0px 10px 2px 0px; adding:0}
ul.label_with_thumbs li{padding:8px 0; min-height:65px; margin-bottom:10px}
.label_with_thumbs a{}
.label_with_thumbs strong{}

6. Scroll ke bawah dan temukan kode </head>
7. Copy atau Klik Select All dan paste kan kode di bawah ini sebelum kode No.6

<script type='text/javascript'><br />//<![CDATA[<br />function labelthumbs(json){document.write('<ul class="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;}<br />if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)<br />{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/AVvXsEjvrmGk5WV2EdWl3CmvTLp-CCWRJB3s7PI-QMOKd1MU6VZjFTtxTTTLsXokL8TkhUPiZxap5HwsHSOpB7MOtNSN-OrmpjvJzCkNBbdop-6nNYPzbGEc8rarUwZZk2oj7AfV8dhNu4leNi7R/';}<br />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]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)<br />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;}<br />else<br />if("summary"in entry){var postcontent=entry.summary.$t;}<br />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('');}<br />else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}<br />var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}<br />if(showcommentnum==true)<br />{if(flag==1){towrite=towrite+' | ';}<br />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;;}<br />if(displaymore==true)<br />{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}<br />document.write(towrite);document.write('</li>');if(displayseparator==true)<br />if(i!=(numposts-1))<br />document.write('');}document.write('</ul>');}<br />//]]><br /></script>

8. SAVE template.sampai disini belum selesai.

9. Masih di menu DESIGN >> PAGE ELEMENTS >> ADD GADGET >> HMTL/javaScript

10. Masukkan kode di bawah ini kedalam contents

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script type="text/javascript" src="http://NAMA BLOG ANDA.blogspot.com/feeds/posts/default/-/NAMA LABEL ANDA?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

11. Untuk kategori/label yang berspasi seperti Tutorial Blog, ganti lah spasi dengan kode %20. Contoh penulisan lengkap nya:

http://ahmad-roni.blogspot.com/feeds/posts/default/-/Tutorial%20Blog

12. Jika sudah selesai masukkan kodenya, jangan lupa sobat blogger masukkin judul/title widgetnya.

13. Klik Save / Simpan.

14. Selesai! Semoga bermanfaat…

Jika ada yang kurang dimengerti, silahkan tanyakan dengan tinggalkan komentar.