Related post with thumbnails
Related Posts Widget with Thumbnails. Pada kesempatan ini seocips.com akan membagikan cara membuat related post dengan gambar di blog khusus Blogspot. Apa itu related post atau yang di maksud related post? related post adalah artikel terkait atau artikel yang berhubungan dengan postingan yang sedang di baca. Related post ini biasanya di letakan di bawah postingan agar supaya ketika pengunjung blog selesai membaca artikel di postingan itu maka dia bisa melihat artikel lain yang berhubungan.

Di Blogspot related post ini muncul misalnya di artikel yang membahas atau di beri label misalnya "Tutorial" maka yang akan muncul adalah postingan-postingan dengan label "Tutorial", Oleh karena itu jika hendak memasukan kategori atau label pada postingan sebaiknya betul-betul diperhatikan apakah postingan tersebut mempunyai relevansi dengan postingan lainnya atau tidak.

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 atau di demonya dibawah.

Beberapa waktu yang lalu seocips.com pernah membagikan template dan memakai related post seperti ini ( sayang blognya udah kehpus ) dan ada beberapa sahabat blog yang ingin related postnya dibagikan tapi karena berhalangan seocips.com baru dapat membagikannya sekarang. Ok berikut adalah cara membuat dan memasangnya di blog .

Related Post Dengan Gambar Di Blog

1. Di Blognya sobat
2. Masuk ke edit template atau pilih template kemudian pilih HTML
3. Cari kode ]]></b:skin> dan letakan kode dibawah ini di atas ]]></b:skin> ( catatan : jika tidak ada kode ]]></b:skin> cari kode </style > asalkan kode </style > tidak di tutup tag kondisional yang menampilkan kode selain di postingan. Ok jika bingun cari saja kode ]]></b:skin> )
#related-posts { float:center; width:100%; margin:0; padding-top:10px; }
#related-posts .judul { background:none; color:#333; font:16px Oswald; display:none;}
#related-posts .seocips_img { padding:0; margin:7px; width:180px !important; height:auto; position:relative; overflow:auto;border:4px double #ddd; }
#related-posts .seocips_img { height:130px; }
#related-posts .seocips_img:hover { opacity:.7; filter:alpha(opacity=70); -moz-opacity:.7; -khtml-opacity:.7; }
Catatan: untuk kode berwarna biru di atas adalah ukuran lebar dan tinggi related post ini, silahkan anda edit dan sesuaikan dengan lebar template blog anda, tapi ingat jangan lupa atur juga ukuran lebar judulnya pada langkah ke 5 dibawah ini.
4. Selanjutnya letakan kode ini diatas kode  </head>  ( jika sudah ada kode yang sama, atau hampir sama maka kode dibawah ini tidak perlu dipasang )
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
5. Masih di atas kode </head> , letakan juga kode dibawah ini diatas kode </head>.
<script type='text/javascript'>
//<![CDATA[
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]='http://1.bp.blogspot.com/-QjSndGbF0No/T-Nt3HgKsDI/AAAAAAAAG9o/cN6_Oy306rc/s1600/no-video.gif'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";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('<div class="judul">'+relatedpoststitle+'</div>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin: 5px;border:2px solid #ddd; float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="seocips_img" src="'+thumburl[r]+'" title="'+relatedTitles[r]+'" alt="'+relatedTitles[r]+'"/><br/><div style="width:190px;padding:0 0;color:#666;height:45px;text-align:center;margin:5px; font:bold 12px Arial; line-height:23px;">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++} ; eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3.7(\'</q><a p="o://n.m.e" 9="i-b: c; d-r:f; g: #h;">8 j k</a>\');3.7(\'</l>\');6.2(0,6.1);5.2(0,5.1);4.2(0,4.1)',28,28,'|length|splice|document|relatedTitles|thumburl|relatedUrls|write|Get|style||size|8px|text|com|center|color|616469|font|This|Widget|div|seocips|www|http|href|br|align'.split('|'),0,{}))}
//]]>
</script>
Kode berwarna biru diatas adalah lebar tulisan/judul post di related post anda, silahkan di ubah lebar dan tingginya untuk menyesuaikan dengan template blog anda. Tambahan : jika anda ingin meringkas kode di atas silahkan di upload ke hosting tempat penyimpanan kode anda ( baca : cara menyimpan di Google Drive atau cara menyimpan file di Google Site  )
6. Cari 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'> ( pilih salah satu ) dan letakan kode dibawah ini di atasnya.
<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=999&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle=&quot;Related Posts :&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
  </div>
<div class='clear'/>
</b:if>
7. Simpan template anda dan lihat hasilnya. ( Tambahan: jika related postnya tidak keluar coba setting seperti contoh gambar dibawah ini )
Setting Related Post Dengan Gambar Di Blog
Saya menambahkan seperti gambar di atas karena beberapa ( hanya beberapa ) related post yang sudah beredar saat ini dan yang sudah pernah dibagikan tidak muncul karena settingan ini.

Untuk demonya silahkan masuk ke salah satu artikel di template demo dibawah ini.


Oh iya jika sobat tertarik dengan related post dengan gambar yang lain coba sobat lihat artikel cara membuat artikel terkai efek slide atau cara membuat artikel terkait dengan gambar part 1 dan related post efek slide out di blog. Ok sekian cara membuat related post dengan gambar, semoga saja anda berhasil membuatnya dan semoga bermanfaat. Terimakasih.
5 Komentar untuk "Cara Membuat Related Post Keren Dengan Gambar Di Blog"

thanks sob, artikelnya sangat membantu
jangan lupa kunbal ya

Seperti breadcrumb yang diposting diblog seocips. yang ini juga langsung diterapkan diblog sederhanaku biar tampak cool. hehe

Thanks buat tutorialnya gan.. Izin mengamalkan...

gan punya saya gak adak post footer tapi comment footer?