Membuat Recent Post dengan Thumbnail di Blog

Membuat Recent Post dengan Thumbnail di Blog

Rio Ilham Hadi

27 August 2015

Recent Post dengan Thumbnail - Setelah sekian lama tidak update tutorial, kali ini saya akan berbagi Tips Cara Membuat Recent Post dengan Thumbnail, selain dengan Thumbnail, Recent Post ini juga dilengkapi dengan Post Info seperti Tanggal Postingan, Komentar, dan Read More, dan sedikit efek pada Thumbnail yang pertama.

Update : Sebelumnya Recent Post ini mengalami error (tidak muncul) itu karena saya lupa menaruh beberapa javascript recent postnya (#kocak dahh... :v) dan sekarang sudah FIX 100% Work.

Widget Recent Post ini hanya sedikit saya modifikasi dari Recent Post pada Template Evo Magz.
Oh iya Recent Post ini muncul berdasarkan Label tertentu yang sudah kita setting lewat Script nanti.

Demo

Jika sobat tertarik untuk membuat Recent Post dengan Thumbnail berikut cara penerapannya :

Pertama Buka Blogger > Template > Edit HTML > Lalu tambahkan kode CSS di bawah ini tepat di atas ]]></b:skin> atau </style>

/* Recent Post Widget */
ul.rp_thumbs{margin:0}ul.rp_thumbs li{font-size:12px;min-height:68px;margin:0 0 8px;padding:0 0 8px;border-bottom:1px dotted #f0f0f0}ul.rp_thumbs .rp_thumb{position:relative;background:#fbfbfb;margin:3px 0 10px;width:100%;height:0;padding-bottom:46%;overflow:hidden}ul.rp_thumbs .rp_thumb img{height:auto;width:100%;transition:transform 1.6s;transform:scale(1.0)}ul.rp_thumbs .rp_thumb:hover img{transform:scale(1.10)}ul.rp_thumbs2{font-size:13px}ul.rp_thumbs2 li{padding:0;min-height:66px;font-size:11px;margin:0 0 8px;padding:0 0 8px;border-bottom:1px dotted #f0f0f0}ul.rp_thumbs2 .rp_thumb2{background:#fbfbfb;float:left;margin:3px 8px 0 0;height:60px;width:60px}ul.rp_thumbs2 li:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}ul.rp_thumbs2 .rp_thumb2 img{height:60px;width:60px}.sidebar ul.rp_thumbs li:before,.sidebar ul.rp_thumbs2 li:before,#bottombar ul.rp_thumbs li:before,#bottombar ul.rp_thumbs2 li:before{display:none}span.rp_title{font:normal normal 18px Roboto Condensed,Helvetica,Arial,sans-serif;display:block;margin:0 0 5px;line-height:1.4em}span.rp_title2{font-size:14px}span.rp_summary{display:block;margin:6px 0 0}span.rp_meta{background:transparent;display:block;font-size:11px;font-weight:700;color:#8D8D8D;text-transform:uppercase}span.rp_meta a{color:#8D8D8D!important;display:inline-block}span.rp_meta_date,span.rp_meta_comment,span.rp_meta_more{display:inline-block;margin-right:8px}span.rp_meta_date:before{content:"\f073";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-right:4px}span.rp_meta_comment:before{content:"\f086";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-right:4px}span.rp_meta_more:before{content:"\f0a9";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-right:4px}ul.rp_thumbs2 li a:hover,ul.rp_thumbs li a:hover{color:#0072C6}

Langkah Selanjutnya tambahkan kode Javascript di bawah ini tepat di atas kode </head>

<script src='http://yourjavascript.com/34215101653/label-thumbnail.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(t){for(var e=0;e<numposts;e++){var r,n=t.feed.entry[e],m=n.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<n.link.length;i++){if("replies"==n.link[i].rel&&"text/html"==n.link[i].type)var l=n.link[i].title,o=n.link[i].href;if("alternate"==n.link[i].rel){r=n.link[i].href;break}}var u;try{u=n.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p=n.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);document.write('<ul class="rp_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+r+'"><div class="rp_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="rp_title"><a href="'+r+'" target ="_top">'+m+"</a></span>");var g="";if(document.write('<span class="rp_meta">'),1==showpostdate&&(g=g+'<span class="rp_meta_date">'+f+"/"+_+"/"+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),showcomment='<span class="rp_meta_comment"><a href="'+o+'">'+l+"</a></span>",g+=showcomment),1==displaymore&&(g=g+'<span class="rp_meta_more"><a href="'+r+'" class="url" target ="_top">Read More...</a></span>'),document.write(g),document.write("</span>"),document.write('<span class="rp_summary">'),"content"in n)var v=n.content.$t;else if("summary"in n)var v=n.summary.$t;else var v="";var k=/<\S[^>]*>/g;if(v=v.replace(k,""),1==showpostsummary)if(v.length<numchars)document.write(""),document.write(v),document.write("");else{document.write(""),v=v.substring(0,numchars);var y=v.lastIndexOf(" ");v=v.substring(0,y),document.write(v+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>")}document.write('<ul class="rp_thumbs2">');for(var e=1;e<numposts2;e++){var r,n=t.feed.entry[e],m=n.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<n.link.length;i++){if("replies"==n.link[i].rel&&"text/html"==n.link[i].type)var l=n.link[i].title,o=n.link[i].href;if("alternate"==n.link[i].rel){r=n.link[i].href;break}}var $;try{$=n.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),$=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=n.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+r+'"><div class="rp_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+$+'"/></div></a>'),document.write("<li>"),document.write('<span class="rp_title rp_title2"><a href="'+r+'" target ="_top">'+m+"</a></span>");var g="";document.write('<span class="rp_meta rp_meta2">'),1==showpostdate2&&(g=g+'<span class="rp_meta_date rp_meta_date2">'+f+"/"+_+"/"+w+"</span>"),1==showcommentnum2&&("1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),showcomment='<span class="rp_meta_comment rp_meta_comment2"><a href="'+o+'">'+l+"</a></span>",g+=showcomment),1==displaymore2&&(g=g+'<span class="rp_meta_more rp_meta_more2"><a href="'+r+'" class="url" target ="_top">Read More...</a></span>'),document.write(g),document.write("</span>"),document.write("</li>")}document.write("</ul>")}
//Recent Comments
var numComments=numComments||5,characters=characters||40;function recent_comments(tb){var commentsHtml;commentsHtml='<ul id="recent_comments">';for(var i=0;i<numComments;i++){var commentlink,authorName;if(i==tb.feed.entry.length)break;commentsHtml+="<li>";var entry=tb.feed.entry[i];for(var l=0;l<entry.link.length;l++){if(entry.link[l].rel=='alternate'){commentlink=entry.link[l].href}}for(var a=0;a<entry.author.length;a++){authorName=entry.author[a].name.$t}commentsHtml+="<strong><a href=\""+commentlink+"\" title=\""+authorName+"\">"+authorName+"</a></strong>";var commHTML=entry.content.$t;var commBody=commHTML.replace(/(<([^>]+)>)/ig,"");if(commBody!=""&&commBody.length>characters){commBody=commBody.substring(0,characters);commBody+=" &hellip;"}else{commBody=commBody}commentsHtml+=" - ";commentsHtml+="<span>"+commBody+"</span>";commentsHtml+="</li>"}commentsHtml+='</ul>';document.write(commentsHtml)}
//]]>
//Recent Comments Settings
var numComments  = 5;
var characters  = 60;
</script>
<script type='text/javascript'>
var numposts = 1;
var numposts2 = 4;
var showpostthumbnails = true;
var showpostthumbnails2 = true;
var displaymore = true;
var displaymore2 = false;
var showcommentnum = true;
var showcommentnum2 = true;
var showpostdate = true;
var showpostdate2 = true;
var showpostsummary = true;
var numchars = 100;
var thumb_width = 300;
var thumb_height = 140;
var thumb_width2 = 60;
var thumb_height2 = 60;
var no_thumb = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_QnhnNmjfjvqlSrDR-2XpD1OnuEPmqkBGXpdvvIK8Ris4EcJHh2-E4cGZKll_YFLVPs3JAh2oatnPXMYZaz1N0epELxBdWFxek2KNmP8UuaVLnyMnkmqN0xoAxZLbB6uT0vjBKjvGTXjv/w300-c-h140/no-image.png'
var no_thumb2 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyBwhOeDmq_jpmjYV8zqygaBQXrbXOUw73IhTGxe5JLK6QyKqwmh2iHPdlCoEY6bE86Hnmz99wIEhqQnpJ86mNBYiVbopxhv3XIqz9qzu4aJvPDOARVVdvrgBILDwdMTYY_X9DHPe8Hssb/s60-c/no-image.png'
</script>

Simpan Template. (belum selesai ya...)

Nah untuk memunculkan Widget, Pilih Tata Letak > Tambahkan Widget > Pilih HTML/Javascript lalu masukan kode di bawah ini.

<script>
   document.write('<div class="recent-post-title"><h2><a href="/search/label/Kisah?max-results=10">Label 1</a></h2></div>');
   document.write("<script src=\"/feeds/posts/default/-/Kisah?orderby=updated&alt=json-in-script&callback=labelthumbs\"><\/script>");
   </script>

Ganti Kisah dengan Label yang di Pilih...

Nah baru Simpan.

Selesai.. 

Semoga Tutorial "Membuat Recent Post dengan Thumbnail" ini bermanfaat.

Share This