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 Blogger2. Klik Rancangan3. Klik Edit HTML4. Centang check box Expand Widgets Template5. untuk jaga-jaga bilamana terjadi kegagalan klik Download Template Lengkap6. Carilah kode ]]></b:skin> dengan tekan F3/Ctrl+F dan ketikan kodenya7. 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/AVvXsEjvcU-ktcNgEh_DLeOr3qqp4Y6RtrMRGZr0Dxhwp9CzmyAV4qb1awhGmJBsUOexvHx4jqRxZHUKdZzsD-lYSVhbk_bspKm6KhTqyPXTVwgmiZSR820ikUPbYUMFLRQtzZ0LdanfPrIg5Bhl/';}
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 selanjutnya9. 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
Terimakasih anda telah membaca artikel tentang membuat thumbnail dri label. Jika ingin menduplikasi artikel ini diharapkan anda untuk mencantumkan link https://ulum1.blogspot.com/2014/05/membuat-thumbnail-dri-label.html. Terimakasih atas perhatiannya.
