Membuat Related Post (Tulisan Terkait) dengan Gambar Thumbnail & Judul

Baca Juga

Cara Membuat Related Post (Tulisan Terkait) dengan Gambar Thumbnail & Judul

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:

Cara membuat related post yang satu ini Cepat, Mudah, Gak Pake Ribet! CB sudah pasangkan di salah satu blog klien CB, yaitu Sepakbola Magz. Silakan lihat demonya di salah satu posting sana.

Anda juga bisa langsung menggunakan kode aslinya. Sumbernya di DTE. Ada banyak pilihan di sana, mulai related post simple (judul doang) hingga plus gambar thumbnail.

Kode related post di bawah ini sudah CB edit, modif, dan dijamin berhasil dipasangkan karena sering CB gunakan dalam desain template, termasuk sejumlah template yang ada di Galeri Template CB.

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/AVvXsEhLrsO-g4XLe7CX3C6QCVgSSKE8vC5_WpGQXTR44VVjIfkmtm2QjvWiN7Cs-_udpVRxCSImXtfe90xyLxHMUbbaq71Ym0VgQSW28gip11O8TFz2WEbidWaM6w8uzShDNH6LUp4tgRz4u64p/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/AVvXsEhLrsO-g4XLe7CX3C6QCVgSSKE8vC5_WpGQXTR44VVjIfkmtm2QjvWiN7Cs-_udpVRxCSImXtfe90xyLxHMUbbaq71Ym0VgQSW28gip11O8TFz2WEbidWaM6w8uzShDNH6LUp4tgRz4u64p/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/AVvXsEhWpe2qlqiG-1jqCiSqQ4OFPp6nwMfGpKVxGJJ0ZxenQHepzo9AMIxVwyYCS1Qe0Uju4gDVTgBBia4WyaFFLPahH9yp-U485U_ufZxdNlrYT-yUNHZtfPTdwQh8pVEHkzHLwjZhugKJzXfz/s1600/best+blogger+tips.png'/></a> </b:if> </b:if> <!-- Related Posts with Thumbnails Code End-->

3. Save Template!

Jika ingin Related Post Simple, Judulnya doang, gunakan kode yang ada di sini: Cara Membuat Related Post Simple.

Demikian Cara Membuat Related Post (Tulisan Terkait) dengan Gambar Thumbnail & Judul di Bawah Postingan Blog secara cepat, mudah, hanya dalam tiga langkah. Good Luck! (www.contohblog.com).*