Membuat artikel terkait keren dengan gambar dibawah

Seperti judul di atas saya Portal Anak Iter's akan menjelaskan Membuat Artikel Terkait Keren Dibawah Posting Blog Mengunakan Gambar dan Membuat artikel terkait itu sangat penting bagi blog. ini berguna untuk memudakan pengunjung dan pengunjung akan betah di blog kita untuk mencari artikel menarik lainnya. dan tidak perlu panjang lebar langsung saja sobat ikuti langka langka berikut ini :

Langka Langka Membuatnya :

• Masuk akun Blogger  Sobat
• Masuk ke Menu Template dan lalu centang Expand Template Widget 
• Lalu cari kode ]]></b:skin> ( Gunakan Ctrl + f untuk pencarian cepat )
• Copy kode di bawah ini dan paste di atas kode  ]]></b:skin>

#related-posts{float:left;height:160px;margin-bottom:10px; outline: 1px solid #fff;border: 1px solid #ddd;background: #f9fafb;}#related-posts h3{font-family: Francois One;font-size:20px;font-weight:400;color: #222222;margin-bottom: 0.5em;margin-top: 0.5em;margin-left: 0.5em;padding-top: 0em;}#related-posts ul{margin:5px;width:613px;padding-left:17px;list-style:none;display:block;}#related-posts ul li{list-style:none;position:relative;float:left;border:0 none;margin-right:11px;padding:2px;width:86px;}#related-posts ul li:hover{z-index:100}#related-posts ul li:hover img{border:3px solid #BBB}#related-posts ul li:hover div{font-size:7px;text-transform:capitalize;position:absolute;top:20px;left:-15px;margin-left:0;width:130px}#related-posts ul li img{border:3px solid #DDD;width:80px;height:80px;background:#FFF;display:block;}#related-posts ul li div{position:absolute;z-index:99;margin-left:-999em}#related-posts ul li .title{text-align:center;border:1px dotted #CCC;background:#fff;padding:5px 10px}

 

• Setelah itu cari kode <data:post.body/>

Keterangan Kode :
Pada kode ini beberpa template mungkin kode diatas ada 3-4, jadi sobat yang harus menentukan <data:post.body/> keberapa yang hanya menampilkan widget di postingan saja tapi alangka baiknya sobat download dulu template sobat agar aman. ( Kalau saya yang ke 2 karna kode <data:post.body/> ada 3 di blog saya )

• Setelah itu copy kode di bawah ini dan paste di bawah kode <data:post.body/> yang sobat pilih

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<script type='text/javascript'>var ry=&#39;<h3>Artikel Terkait :</h3>&#39;;rn=&#39;<h3>No Related Posts </h3>&#39;;rcomment=&#39;Comment&#39;;rdisable=&#39;Comments off&#39;;commentYN=&#39;yes&#39;;</script>
<script type='text/javascript'>
//<![CDATA[
var nothumb='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png';dw='';titles=new Array();titlesNum=0;urls=new Array();time=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;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};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]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=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){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.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(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><a href="'+urls[c]+'" rel="nofollow"><h2>'+titles[c]+'</h2></a><span>'+time[c].substring(8,10)+'/'+time[c].substring(5,7)+'/'+time[c].substring(0,4)+comments[c]+'</span></div></li>';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=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div style='clear both'/>
</b:if>

   
Keterangan :

1. Kode yang berwarna merah sobat bisa ganti sesuai keinginan sobat contonya bisa dinganti dengan tulisan Artikel Lainnya
2. Kode yang berwarna biru adalah jumlah posting yang di tampilkan

 

• Setelah itu sobat simpan dan lihat hasilnya

Sekian dulu dari saya semoga artikel ini bermanfaat bagi sobat semuah