Related Post Thumbnail Part 1

Posted on | January 15, 2013 | 1 Comment

Home » Related Post Widget » Related Post Thumbnail Part 1

Bagaimana caranya menambahkan related post di Blogger?

Tahukah anda bahwa widget related post dapat membantu anda untuk membuat pengunjung bisa lebih lama di blog.Mengapa begitu? Karena ketika pengunjung anda selesai membaca artikel,mereka akan di berikan tautan artikel terkait yang telah mereka baca.

Intruksi:

Log in blogger.com.
Dari Dashboard menuju ke Template>Edit HTML.
Pastikan download template anda terlebih dahulu.
Beri tanda tick pada box Expand widget template.
Tekan CRTL + F,Cari dan temukan tag ]]></b:skin>
Tambahkan CCS Script sebelum tag ]]></b:skin>

CCS SCRIPT

/* 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
}

Pengaturan:

Untuk mengatur tinggi widget ubah nilai dari height:160px
Untuk mengatur lebar widget ubah nilai dari width:613px
Temukan kode <data:post.body/>
Pastekan Tag Script setelah <data:post.body/>
Atau temukan kode
<div class='post-footer-line post-footer-line-1'/> atau
<div class='post-footer-line post-footer-line-2'/> atau
<div class='post-footer-line post-footer-line-3'/>
Tambahkan HTML SCRIPT di atas
<div class='post-footer-line post-footer-line-1'/> atau
<div class='post-footer-line post-footer-line-2'/> atau
<div class='post-footer-line post-footer-line-3'/>
Atau temukan <div class='post-footer'>
Tambahkan HTML SCRIPT di bawah <div class='post-footer'>

HTML SCRIPT

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<script type='text/javascript'>var ry='<h3>
Related Post:</h3>
';rn='<h3>
No Related Posts </h3>
';rcomment='Comment';rdisable='Comments off';commentYN='yes';</script>
<script type='text/javascript'>
//<![CDATA[
var nothumb='http://i1353.photobucket.com/albums/q664/Yudhik_Laros/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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>
<div style='clear both'/>
</b:if>

Untuk mengatur jumlah artikel yang akan di tampilkan dalam widget related post,ubah nilai dari tag var maxresults=6;

Terima kasih Anda telah membaca artikel Related Post Thumbnail Part 1, Mencuri konten adalah melanggar hak cipta,baca PRIVACY POLICY,Jika anda memiliki saran dan kritik silakan tinggalkan komentar atau Kontak Kami.

Category: Related Post Widget

Comments

One Response to “ Related Post Thumbnail Part 1”

lulus utami
March 9, 2013 at 10:40 PM

Mantab mas tutorialnya.

Related Post Thumbnail Part 1

Bagaimana caranya menambahkan related post di Blogger?

Related Post

Comments

Categories

Search This Blog

Popular Post

Recent Post