Cara Menciptakan Recent Post Thumbnail Dan Snippet

Baca Juga

Recent Pos yaitu widget yang menampilkan artikel terbaru pada sebuah Blogger. Tapi yang akan dipostingkan kali ini yaitu menciptakan Recent Post Thumbnail. Recent Post dapat dibilang seolah-olah sekali dengan Popular Post. Widget recent post ini tidak hanya menampilkan judul saja tetapi juga Thumbnail (Gambar) dan Snippet (Ringkasan) isi postingan tersebut. Untuk menampilkan widget Recent Post, latest posts, atau posting terbaru di sidebar blog, kita dapat memakai widget bawaan blogger, yaitu Feed.

Caranya : Add a Gadget > Pilih Feed > Kemudian masukan alamat blog anda. > Continue dan Seterusnya. Namun kalau terjadi kesalahan, anda dapat memakai dengan cara ini.

Screenshoot :

Cara Pertama :

1. Buka Blogger > Kemudian Login.
2. Dashboard > Tata Letak.

3. Tambahkan Add a Gadget > Pilih HTML Java Script.
4. Copy & Paste aba-aba berikut ini, dan pastekan pada kolom HTML Java Script itu.

<style> img.recent_thumb {padding:1px;width:72px;height:72px;border:0; float:left;margin:0 10px 5px 1px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 72px;margin: 5px 10px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {min-height: 80px;background:none;padding:5px 0;background:none;}.recent_posts_with_thumbs a {text-decoration:none;font-weight:700;font-size: 12px;}.recent_posts_with_thumbs strong {font-size:10px;}i {font-style: normal;font-weight: 400;font-size: 11px;} </style> <script> function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_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='http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif'; } 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('<img class="recent_thumb" src="'+thumburl+'"/>'); document.write('<b><a href="'+posturl+'" sasaran ="_top">'+posttitle+'</a></b><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('<i>');          document.write(postcontent);           document.write('</i>');}       else {           document.write('<i>');          postcontent = postcontent.substring(0, numchars);          var quoteEnd = postcontent.lastIndexOf(" ");          postcontent = postcontent.substring(0,quoteEnd);          document.write(postcontent + '...');           document.write('</i>');} }  var towrite='';var flag=0; document.write('<br><strong>');  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+'" sasaran ="_top">'+commenttext+'</a>'; towrite=towrite+commenttext; flag=1; ; }  if(displaymore==true) { if (flag==1) towrite=towrite+' | '; towrite=towrite+'<a href="'+posturl+'" class="url" sasaran ="_top">Read more&#187;&#187;</a>'; flag=1; ; } document.write(towrite); document.write('</strong></li>'); if(displayseparator==false) if (i!=(numposts-1)) document.write('<hr color="#d9f1fa" size=0.5>'); }document.write('</ul>');  } </script> <script> var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 90; </script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"> </script><div class="clear"/></div>

Keterangan :

var numposts = 5;var : Menampilkan berapa postingan yang ingin ditampilkan.

5.Terakhir, Simpan.

Sekian Tips Blogger kali ini, Semoga Bermanfaat! Terima kasih telah berkunjung. Jangan lupa Berlangganan Artikel kami. ^.^