Salam Inspirasi buat semua pembaca devozan, kali ini saya akan menuliskan tentang cara untuk Membuat Related Post Versi Thumbnail/Gambar, namun sebelumnya saya akan menyampaikan manfaat dari related post pada blog anda. Pada dasarnya related post adalah salah satu widget yang sangat berguna untuk mempermudah pengunjung blog kita dalam menemukan berita terkait yang sangat berhubungan dengan artikel sebelumnya, bahkan sering kali kita perhatikan didalam google search ketika kita mengetik untuk mencari sesuatu, maka seringkali google memberikan saran hasil pencarian atas artikel yang berkaitan dengan apa yang kita cari di google.
Maka berdasarkan fakta tersebut, dapatlah disimpulkan manfaat dari memasang atau membuat related post untuk membantu pengunjung blog kita untuk menemukan artikel lain yang berhubungan dengan artikel yang sedang dibaca atau dikunjungi. Dan menurut keyakinan saya, maka saya percaya para mastah juga setuju dengan tulisan saya diatas karena google pun melakukan hal yang sama yaitu menggunakan related post, dan ini adlah salah satu tehnik seo yang sering dilakukan para master blogger.
Nah biar tidak penasaran, berikut ini adalah contoh related post versi thumbnail :
Kalo ada yang berminat untuk membuat related post versi thumbnai, silahkan ikuti langkah-langkahnya.
1. Masuk menuju Blogger => Template
2. Pilih edit HTML, cari kode ]]></b:skin> jika sudah ketemu letakkan kode dibawah ini diatas kode ]]></b:skin>
.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;}
3. Selanjutnya cari kode dibawah ini
<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'/>
</div>
4. Jika sudah ketemu, lanjutkan dengan copy kode dibawah ini, kemudian letakkan dibawah kode post footer seperti diatas.
<div id='related-posts'>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3>Related Posts</h3>';rn='<h3> 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/AVvXsEi8qJ6W13qJ9eI1fKsPBpKeUS8ajwywtUqlB9G-h5jr70Y8p2LZKp2V4vJfWESOajmtcI3ndwzUjXeUrmP0YYEkbIyu9vLWJyN1zjZX5xK8pyurH579OosZWfyv4Gd-ORa5EWVwI40cWP7j/'};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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</b:if>
</div>
<div class='clear'/>
5. Klik Simpan untuk menyimpan, refresh blog dan sekarang blog kamu sudah terpasang related post versi thumbnail atau sering juga dikenal denga istilah Artikel Terkait. Semoga bermanfaat
