Cara Buat Artikel Terkait Thumbnail Secara Horizontal

Salah satu hal untuk memaksimalkan sebuah blog adalah dengan adanya post artikel terkait di bawah setiap postingan. Lalu gimana cara buatnya? Kalo artike terkaitnya ga hanya judul aja gimana? kamsutnya dengan menampilkan gambar gitu?

Mungkin yang dimaksut adalah seperti ini ya :

Baiklah,mungkin bisa dicoba dengan cara seperti ini :

1. Cari kode </b:skin>

Kalo udah ketemu, copy dan paste kode berikut tepat diatasnya :

/* Artikel Terkait Dengan Gambar Start

-------------------------------------------- */

#artikel-yg-nyambung {font-weight:bold; font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; font-size:12px;}

#artikel-yg-nyambung h3{border-bottom: 3px dotted #DBDBDB; font-family: Arial; font-size: 20px; color: #232D74; padding-bottom: 0px; text-transform: uppercase; font-weight: normal; text-align: center; height: 25px; margin-bottom: 10px; margin-top: 10px;}

#artikel-yg-nyambung ul {width:570px; margin-bottom: 20px; padding:0px; list-style:none; display:inline;}

#artikel-yg-nyambung li{float:left; display:inline; list-style:none; height:150px; margin:0 0px 10px 8px; width:133px;}

#artikel-yg-nyambung ul li a{margin:0; line-height:18px;}

#artikel-yg-nyambung img{padding:0; margin:0; width:133px; height:90px; border:1px solid #eaeaea;}

#artikel-yg-nyambung img:hover{opacity:0.7;}

 2. Selanjutnya, cari kode <div class='post-footer'>

Kemudian copy dan paste kode berikut dibawahnya. jika ada 2 maka bisa dicoba di bawah kode yang kedua.

<!-- Artikel Terkait Dengan Gambar Start -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='artikel-yg-nyambung'>

<script type='text/javascript'>//<![CDATA[

var ry='<h3 class="artikelterkait"><span>Artikel Terkait</span></h3>';rn='<h3 class="artikelterkait"><span>Jelajah Artikel Lainnya</span></h3>';rcomment='comments';rdisable='disable comments';commentYN='yes';

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://1.bp.blogspot.com/-pmznJmXBJ7M/UfWrTRltmLI/AAAAAAAAFg8/8VCw4AcPMyc/s1600/no+image.jpg'};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><div class="pthumb"><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+ thumb[c].replace("/s72-c/","/s150/")+'"/></a></div><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a><div class="clear"></div></li></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('artikel-yg-nyambung').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&amp;max-results=19&quot;' type='text/javascript'/>

</b:loop>

<script type='text/javascript'>var maxresults=8;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>

</div>

<div class='clear'/>

</b:if>

<!-- Artikel Terkait Dengan Gambar End -->

3. Simpan template dan lihat hasilnya...

Tradaaaaa...

loading...