Cara Membuat Related Post Gambar Thumbnail & Judul blog ala RiyantoSeo

BERIKUT ini CB share kode dan cara membuat Related Post, Posting Terkait, atau Artikel Terkait, berupa Gambar Thumbnail dan Judul di bawah atau di akhir tiap posting blog.

Bahasa Inggrisnya mah Cool Related Posts with Thumbnail Image. Penampakannya seperti ini:


Lumayan Fast Loading, meski pake gambar, karena kode javascriptnya langsung dipasang di template, tidak ngelink keluar.

Fungsi Related Posts

Sebelum ke action, kita bahas sebentar fungsi Related Post atau kalu dalam situs berita istilahnya "Berita Terkait" atau "Artikel Lainnya".

Fungsi utama Widget Related Posts adalah memberikan pilihan bagi pembaca untuk melanjutkan baca-baca posting blog kita, sehingga menaikkan Pageviews dan popularitas blog.

Fungsi lainnya adalah sebagai Navigasi Internal atau Link Internal yang dianjurkan Google, guna memudahkan pengunjung mengeksplorasi konten blog kita.

Related Post ini menampilkan posting yang ada dalam satu Tag atau Label. Jadi, pastikan posting Anda diberi label. Jika tidak ada label, maka kemungkinan muncul error. (Baca: Cara Mengatasi Error Related Post Undefined).

Cara Membuat Related Post Gambar Thumbnail & Judul

Hapus dulu semua kode Related Post yang ada di template Anda. Kalo belum ada, tinggal lakukan langkah mudah berikut ini:

1. Copy + Paste kode berikut ini DI ATAS kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts{float:left;width:auto;border-bottom:3px solid #48d;border-top:2px solid #ddd;margin-top:2px} #related-posts a{border-right:none} #related-posts a:hover{background: #f2f2f2;} #related-posts h2{margin-top: 10px;background:none;font:16px Oswald;padding:3px;color:#555; text-transform:uppercase;} #related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:128px;height:80px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;} #related-title {color:#222;text-align:left;padding:5px;font-size:13px Arial;line-height:15px;height:75px;width:128px;} #related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style><script type='text/javascript'>//<![CDATA[imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnUmTOCJkbp67k7ToaBdPTXGt3EZOtXg6jZzfpVWM2c5v1D_KbsG4n5sqIIa5OuQzjFhUffTPJ1lylKmdj2A2H1uPuMHvSu0_okLHM6MwQjCe13UWoPKu9bJRj8pDubPeYFXV_RVBq39wF/s1600/no-thumbnail.png";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=30;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}  function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.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[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnUmTOCJkbp67k7ToaBdPTXGt3EZOtXg6jZzfpVWM2c5v1D_KbsG4n5sqIIa5OuQzjFhUffTPJ1lylKmdj2A2H1uPuMHvSu0_okLHM6MwQjCe13UWoPKu9bJRj8pDubPeYFXV_RVBq39wF/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>55)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,55)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<30&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}//]]></script><!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

2. Copy & Paste Kode HTML & XML JavaScript berikut ini DI ATAS kode <div class='post-footer'> atau <div class='post-footer-line post-footer-line-2'> atau <div class='post-footer-line post-footer-line-3'> atau di mana saja asalkan di dalam kode <b:includable id='post' var='post'/> and <b:includable id='mobile-post' var='post'/>

<!-- Related Posts with Thumbnails Code Start--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=4&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=4; var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div class='clear'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://contohblognih.blogspot.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilO9xKZX3dyQCZFwOcOD0oD_UcbU2EhTakCbvbXqgggLer1uSnMEtVEaVA4-Tl-7LgGOI5kDswUX89FmcTUUTMx8gRpC1UKjLok6VCOr0T72r0XhUVtVtQQ-QmFAiOWqqYWT0tt1_klrDE/s1600/best+blogger+tips.png'/></a> </b:if> </b:if> <!-- Related Posts with Thumbnails Code End-->

3. Save Template!

Dan Liat Haslinya :)