Cara Menampilkan Posting Terbaru Dengan Gambar Snippet Thumbnail Berdasarkan Nama Label Blog

Buat anda yang berkunjung saat ini saya mengucapkan selamat datang. Jika saat ini sedang mencari tips untuk menampilkan artikel terbaru bergambar anda sudah landing pada halaman posting yang tepat. Ini semua sebagai salah satu upaya memanjakan pengunjung khususnya pengikut yang telah memberi kepercayaan buat Ronamasa.Com.

Gambar: Tampilan Posting Terbaru
dengan Snippet Thumbnail

Dengan menggunakan tips yang disharing Blogger dapat menampilkan artikel terbaru seperti yang terlihat pada halaman media online internet website blog menggunakan read more (baca selanjutnya) menerapkan gambar dikenalkan dengan istilah snippet thumbnail. Hasil kerja kode dibahas ini akan menampilkan gambar serta paragraf pertama dari artikel/posting terbaru dipublikasikan. Tampilannya seperti terlihat pada widget/gadget Entri popular blog

Jika ingin melihat lebih jelas tampilan artikel terbaru dapat melihat pada halaman Home (Beranda) Ronamasa.Com

Saya tidak menjelaskan lebih jauh berkaitan dengan cara membuat nama label artikel karena saya pikir anda yang sedang membaca posting ini sudah memahaminya.

Dan sebelum dijelaskan step membuat artikel terbaru bergambar saya ingin mengucapkan terima kasih kepada Blogger yang telah menyiapkan artikel yang menurut saya pribadi menarik yaitu tips dibagikan pada anda saat ini. Dia adalah seorang Blogger asal India, Sartaj Husein (trickstoday.com). Thank you very much for good tutorial. So now I can sharing with other blogger all the world. Once again thanks

Cara menampilkan posting/artikel terbaru dengan gambar Snippet Thumbnail berdasarkan nama Label artikel Blog dapat dilakukan dengan langkah sebagai berikut:

1. Sign in di blog
2. Klick Template
3. Backup/Download Template jika diperlukan untuk mengamankan kode template media blog anda. Dowload ini dimaksudkan untuk menghindari kode penyusup penghancur tampilan Blog
4. Klick Edit HTML
5. Cari kode ]]></b:skin>
6. copy lalu paste kode pertam pada diatas kode skin ]]></b:skin>
7. Cari kode </head>
8. Copy lalu paste kode kedua pada diatas kode </head>
9. Klick simpan Template untuk menyimpan perubahan

Setelah melakukan dijelaskan diatas langkah selanjutnya adalah menambah gadget HTML/JavaScript untuk menempatkan kode. Cara mendapatkan gadget HTML/JavaScript dapat membaca artikel berikut ini

Kode untuk ditempatkan di atas kode ]]></b:skin>/*** Recent Post ***/ 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:#fce5cd; } .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 {}

Kode untuk ditempatkan di atas kode diatas </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/AVvXsEiWiS5gbLheukgCXIZ0jSBDAAem4tIJTw_MqJD-m7f97veSC7ocY-NPWeViZCGwKDBR3Gs4b4CbDh0Sdmf-CUtY115YY06xXe_wqWYOEF8_uwJce1EkMYRgNGcsn6xoyXppv1xf1x6tpDEc/';} 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('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b> ');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(' ');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>

Kode untuk ditempatkan pada gadget HTML/Javasript <script type='text/javascript'>var numposts = 4;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="/feeds/posts/default/-/NAMA LABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Keterangan:
var numposts = 4; adalah jumlah posting yang ingin ditampilkan
NAMA LABEl yang ditulis dengan huruf besar adalah nama label ditetapkan pada halaman posting/artikel

Jika melakukan langkah-langkah dijelaskan diatas dengan benar akan mendapatkan hasil yang sempurna. Sementara jika ingin menampilkan nomor urut otomatis nama label posting dapat membaca artikel ini.