Latest Version

Cara Membuat Related Post dengan Gambar dan Thumbnails di Blog Blogger

Dengan memasang widget ini kita dapat menuntun pengunjung blog kita menuju postingan yang lain yang tentunya berkaitan dengan postingan yang sedang dilihat. Artikel terkait atau related post menampilkan pintasan dari beberapa posting yang masih memiliki konten berhubungan dengan artikel yang dikunjungi oleh pembaca.

Menurut logikanya diharapkan dengan memasang artikel terkait ini dapat meningkatkan pageview halaman karena letaknya berada dibawah posting Setelah mengetahui beberapa hal diatas jadi saya setuju dengan para master seo bahwa memasang related post atau artikel terkait adalah salah satu tehnik seo yang disarankan, karena google pun menggunakan hal yang sama.

Cara membuat related Post di Blog ( V1 )

1. Masuk ke Blogger >> Template
2. Pilih EDIT HTML
3. Temukan kode ]]></b:skin> dan letakan kode dibawah tepat di atasnya.

.related-post .post-thumbnail {z-index: 1;position: relative;width: 98px;height: 98px;margin: 0;display: block; border-right: 1px solid #fff;border-bottom: 1px solid #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 2px 2px 5px #444; -moz-box-shadow: inset 2px 2px 5px #444; box-shadow: inset 2px 2px 5px #555; }
.related-post { float: left; position: relative; width: 98px; height: 98px; margin: 0 10px 10px 0; background: #F6F6F6; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.related-post .related-post-title { display: none; float: left; background: #000; color: #fff; text-shadow: none; font-weight: bold; padding: 10px; position: absolute; top: -20px; left: 40px; z-index: 2; width: 200px; -webkit box-shadow: 0 0 2px #444; -moz-box-shadow: 0 0 2px #444; box-shadow: 0 0 2px #444; }
.related-post:hover .related-post-title {display: block;}

4. Selanjutnya cari atau temukan kode yang mirip dengan salah satu kode dibawah ini ( cari kode yang pertama dan jika tidak ada cari kode-kode selanjutnya ).

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>

5. Jika anda sudah menemukan salah satu kode yang mirip dengan kode diatas, copy kode dibawah ini dan letakan dibawah kode di atas ( di bawah salah satu kode pada langkah ke 4 ), kemudian simpan / save Template anda.

<div id='related-posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3>Related Posts</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
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/AVvXsEhVaY8HjH_6iNjKQkbMhspTOh6ePkEym38ekmPkq9hiBWMgHz32CuZFaGvP8iQhbFsa33zD41CKpz2ROOTrcLCFHsTQFP2QSV9jNDM1LbnKV3_jOs0pMnKr6NDh827__rInnVv8tMNoRAzr/'};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+='<div class="clear"/></div><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+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></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=5;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</b:if>
</div>
<div class='clear'/>

Keterangan:

• Warna Orange Bisa anda sesuaikan dengan ukuran template anda
• warna Merah adalah jumlah artikel yang akan di tampilkan.