Cara Membuat Recent Post Thumbnail Dari 1 (satu) Label

Sahabat blogger yang masih ingin belajar tentunya,, kali ini kita akan membahas mengenai Cara Membuat Recent Post Thumbnail Dari 1 (satu) Label dimana ini akan sangat bermanfaat sekali karena disini kita bisa menyeleksi artikel dari label mana saja yang akan kita tampilkan dalam halaman blog dengan menampilkan per label atau per satu label yang akan kita munculkan dan jika kita ingin artikel dari 1 label tersebut muncul semua dan atau kita ingin memunculkan artikel dalam label lain/kita ingin memunculkan 1 label penuh lainnya maka kita hanya cukup untuk membuat gadget labelnya saja dan tanpa memasukan script ke dalam templatenya lagi ketika memang template kita belum di ganti setelah kodenya di masukan, baiklah mungkin dengan ini Anda bingung dan kayanya memang kurang jelas, baiklah mari kita langsung saja menuju langkah-lankahnya yaitu sebagai berikut ;

1. Login Ke Blogger
2. Klik Rancangan
3. Klik Edit HTML
4. Centang check box Expand Widgets Template
5. untuk jaga-jaga bilamana terjadi kegagalan klik  Download Template Lengkap
6. Carilah kode  ]]></b:skin>  dengan tekan F3/Ctrl+F dan ketikan kodenya
7. Setelah ketemu, masukan script dibawah ini persis di atas kode ]]></b:skin>

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.Cari dan temukan kode </head>
7. Copy paste kode di bawah ini sebelum kode </head>


<script type='text/javascript'>

//<![CDATA[

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;}

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/AVvXsEjjAR3BNeBIxvBsXXiQCHQROSElKSW2I-PD6OC9OL4Lq1u5wPy8L4f1kQNGNE2lqTPvzw1011nBHV9LlBEe17S8RJaLn9bV5-jmgaULruqP9KeDI4CTqigg2vxivbMm-dQbK2msUapelaEg/';}

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)

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>

8. Simpan template dan ini belum selesai mari ikuti selanjutnya
9. Masih di menu Rancangan >>
10. Klik Elemen Laman 
11. Klik Tambah Gadget 
12 tambahkan HMTL/javaScript denga cara klik tanda +
13. Masukkan kode di bawah ini,

<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="alamatblog/feeds/posts/default/-/Nama_Label?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

14. Ganti alamatblog dengan alamat blog anda seperti http://catatananakindonesia.blogspot.com

15. Ganti Nama_Label dengan nama label yang ingin di tampilkan, Untuk kategori/label yang berspasi seperti Catatan blogger, Peribahasa Cinta dan sebagainya, ganti lah spasi dengan kode %20. Contoh penulisannya yaitu ;

 contoh : peulisan yang benar

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

atau jika labelnya menggunakan spasi maka penulisannnya

<script type="text/javascript" src="http://masihinginbelajar.blogspot.com/feeds/posts/default/-/Blogger%20Baru?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

16. Berikan judul yang sesuai terserah Anda

17. Klik Simpan dan lihat perubahannya