GO Blog

Di sini, saya akan memperkenalkan dua jenis tampilan related post thumbnail yaitu related post dengan gaya vertikal dan horisontal. related post ini berbeda dengan lainnya, ketka dalam satu label yang tidak memiliki posting lebih dari satu, maka akan secara otomatis akan menampilkan pesan tidak ada artikel terkait, juga memiliki kegunaan yang penting untuk blog anda, selain sebagai navigasi yang menuntun pengunjung untuk membaca artikel serupa juga menurut pakar blogger adalah salah satu penunjang untuk seo. langsung saja bagaimana membuatnya...

1. Tampilan Related Post secara vertikal.

Langkah 1: Tambahkan kode berikut sebelum kode tag ]]></b:skin> dalam template Anda.

#related-posts{float:left}
#related-posts ul{margin:0;padding:0;list-style-type:none}
#related-posts ul li{padding:10px 0}
#related-posts ul li:hover img{width:42px;height:42px;padding:0}
#related-posts img{float:left;border:1px solid #BBB;margin-right:10px;width:36px;height:36px;background:#FFF;padding:3px}
#related-posts h3{margin:0;font-size:16px}

Langkah 2: Tambahkan kode dibawah ini setelah kode tag <div class='post-footer'> dalam template Anda.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear:both'/>
<div id='related-posts'>
<script type='text/javascript'>var ry='<h2>Artikel Terkait</h2>';rn='<h2>Tidak ada Posting terkait</h2>';rcomment='komentar';rdisable='Comments Off';commentYN='yes';</script>
<script type='text/javascript'>
//<![CDATA[
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtPIlMlp7enDj7mMUotVby_FesoFS41K-jwpmdmp11Fmk60Nr_8T045XQ02CjyE-AFQs8GmdWcQT4a6Vl6wjRjVPQCw5c_Ibld6yhSbtRj3vUeYnR1r9DmsM1pvXZJBNm9kBwHs3ijS0qN/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><img alt="'+titles[c]+'" src="'+thumb[c]+'"/><div><h3><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a></h3><span>'+timeR[c].substring(8,10)+'/'+timeR[c].substring(5,7)+'/'+timeR[c].substring(0,4)+comments[c]+'</span></div></li><div style="clear:both"></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]>
</script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>
<div style='clear:both'/>
</b:if>

2. Tampilan Related Post horizontal.

Langkah 1: Tambahkan kode berikut sebelum kode tag ]]></b:skin> dalam template Anda.

#related-posts{float:left}
#related-posts ul{margin:5px 0;width:524px;padding:0;list-style-type:none}
#related-posts ul li{position:relative;float:left;border:0 none;margin-right:11px;width:76px}
#related-posts ul li:hover{z-index:98}
#related-posts ul li:hover img{border:3px solid #BBB}
#related-posts ul li:hover div{position:absolute;top:40px;left:10px;margin-left:0;width:200px}
#related-posts ul li img{border:3px solid #DDD;width:70px;height:70px;background:#FFF}
#related-posts ul li div{position:absolute;z-index:99;margin-left:-999em}
#related-posts ul li .title{border:1px solid #CCC;background:#FFF;padding:5px 10px}

Langkah 2: Tambahkan kode berikut setelah <div class='post-footer'> dalam template Anda.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear:both'/>
<div id='related-posts'>
<script type='text/javascript'>var ry='<h2>Artikel Terkait</h2>';rn='<h2>Tidak ada Posting terkait</h2>';rcomment='komentar';rdisable='Comments Off';commentYN='yes';</script>
<script type='text/javascript'>
//<![CDATA[
var nothumb='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtPIlMlp7enDj7mMUotVby_FesoFS41K-jwpmdmp11Fmk60Nr_8T045XQ02CjyE-AFQs8GmdWcQT4a6Vl6wjRjVPQCw5c_Ibld6yhSbtRj3vUeYnR1r9DmsM1pvXZJBNm9kBwHs3ijS0qN/';dw='';titles=new Array();titlesNum=0;urls=new Array();time=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><h3><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a></h3><span>'+time[c].substring(8,10)+'/'+time[c].substring(5,7)+'/'+time[c].substring(0,4)+comments[c]+'</span></div></li>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]>
</script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>
<div style='clear:both'/>
</b:if>

maxresults adalah perintah berapa posting terkait yang ditampilkan, saya set 6. Nomor default komentar akan ditampilkan, jika Anda tidak ingin ganti kode warna merah, setiap label akan memuat 25 posting terkait terakhir default ini tidak akan terasa berat di blog anda ketika dimuat.

Tentang CSS silahkan sobat kreasi sendiri, seperti apa tampilan yang di inginnkan. meskipun script ini berjalan oleh Javascript, tapi masih ada kode tag alt untuk gambar, judul dan tag H3 yang di pasangi rel = nofollow untuk menghubungkan atribut tag. Saya masih menemukan bahwa Google masih menampilkan informasi yang ditulis oleh Javascript dalam hasil pencarian.

Semoga berguna, selamat mencoba...