Created related Post for BloggerCara Membuat Related Post dengan Gambar/Thumbnails di Blog Blogger. Berikut ini Seocips.com akan membagikan tentang bagaimana cara membuat related post dengan gambar thumbnails di Blog Blogger atau yang lebih kita kenal dengan Artikel terkait. Membuat ini sangat bermanfaat untuk para pengunjung blog anda, karena akan memudahkan pengunjung untuk membaca artikel-artikel yang masih mempunyai topik yang sama. Bahkan jika anda perhatikan ketika anda menggunakan google search di bagian bawah ada beberapa saran pencarian yang masih berhubungan  dengan artikel atau sesuatu yang sedang anda cari.

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 )

Cara membuat artikel terkait untuk blogger 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]='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'};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.

Membuat Related Post ( V2 )

Related post with thumbnails V2
Related post ini juga sudah saya tambahkan alt, title dan deskripsi otomatis sesuai postingannya, sehingga tidak perlu takut gambar-gambar di related post ini akan mengurangi nilai SEO template blog sobat. Selain tampilannya menarik related post ini seo friendly. Bagaimana tampilan related post ini? mungki sobat dapat melihat gambar diatas. Dan untuk cara membuatnya baca DISINI.

Sekarang template anda sudah memiliki artikel terkait atau related post untuk memudahkan pengunjung menjelajahi blog anda.
35 Komentar untuk "Cara Membuat Related Post dengan Gambar/Thumbnails di Blog Blogger"

makasih gan atas sharingnya.... success for you

trima kasih gan...
izin pakek buat blog saya.
www.rachmanhijra.blogspot.com

mas minta related post yang mirip blog kamu?
Sportscon8@gmail.com

gan kalo bikin related post kaya punya agan tu gimana caranya, ?

tolong gan jawab di blog saya,
http://muba-sky.blogspot.com/

Nanti doposting itu kalu ada kesempatan gan, kalau gak kelupaan lagi soalnya sibuk dunia offline

Permisi kak , kok saya sudah mencoba nya dan berhasil tapi bacaanya : ( No related post available ) , itu kenapa ya ? , tolong bantu saya , nih blog saya http://regyna34.blogspot.com
terima kasih

Mungkin sobat tidak menaruh label di postingan sobat.

Cara menaruh label ny dimna gan.. ;-( ;-(

Silahkan di sedot apa saja yang ingin disedot dari blog ini b-(

Oh itu waktu saya cek di artikel sobat Amela ternyata artikelnya tidak dikasih Label, itu tuh.. label waktu nulis postingan

terimakasih mas,, sudah berhasil saya terapkan

bikin kotak komentar tampilannya seperti punya agan gmna ya?? ada tutornya ga??
sederhana tapi nampak wah bgt,

Terima kasih gan, saya akan coba semampunya.

izin sedot & pake code-nya Pak Boss ,,, trims smoga sukses (o)

Thanks gan,.. Saya pake' boleh ya?

Ada cara yg lebih simple gan? Di saya erro euy :(

thankz gan,,
mantabbsss banget
mampir ya ke htttp://jalzabbie.blogspot.com

ngga work sama blog ku gan....

Saya sudah coba dan berhasil gan, mungkin tinggal peletakannya yang kerilu.

seep tutorialnya, saya pakai tahapannya, tapi kode script coppy dari template blog saya yg satunya saja :)

Mantab mas.. Berhasil diterapkan di blog saya http://tipseo-web.blogspot.com/
Terima Kasih banget ya Mas.. :)

Mau nanya, kalau mau kasih jarak antara tulisan "Related Posts" dengan thumbnail gambar nya, edit nya di bagian mana ya mas ?
Soal nya tulisan Related post nya terlalu rapat dengan gambar.
Sekali lagi, Terima kasih tutorial nya. :D

itu nanti di bawah thumb ada muncul judul artikelnya apa hanya gambar saja gan ?

Related post yang mana, fersi 1 atau 2?

Fersi 1 muncul ketika di hover, fersi 2 judul dibawah gambar.

Gan, biar related posnya ke tengah gimana ya?