Cara Membuat Artikel Terkait Dengan Image

Cara Membuat Artikel Terkait Dengan Image | Cara Membuat Artikel Terkait Dengan Gambar,Judul Dan Jumlah Komentar merupakan salahsatu cara agar blog kita Seo tentunya.Dengan beragamnya cara membuat related posts ini saya tentunya menggunakan ini selain menaruik juga menjadikan blog kita seo.

1. Log in ke Dashboard--> Template- -> Edit HTML

2. Klik on "Expand Widget Templates"

3. Search "Ctrl+F" and find ]]></b:skin>. Pastekan kode dibawah ini sebelum nya:

/* Related Post Widget */

#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
}

Untuk mengatur agar sesuai dengan besarnya template anda bisa merubah ukuran lebar sesuai templat.

4. Sekarang cari kode   <data:post.body/> Dan pastekan kode dibawah ini setelah kode tersebut :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<script type='text/javascript'>var ry=&#39;<h3>Other Tutorials For You To See:</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>

Selanjutnya klik Save.Selesai deh.

Sumber :   http://artistutorial.blogspot.com/