Cara Membuat Related Post Dengan Gambar dan Jumlah Komentar
Cara Membuat Related Post Dengan Thumbnail Dan Komentar Untuk Blog, dan juga judul. Sebelumnya saya pernah membahas cara membuat related post dengan thumbnail selain Linkwithin. Nah sekarang related post atau artikel terkaitnya di modifikasi, selain judul dan gambar, kita tambahkan dengan jumlah komentar.
Cara Membuat
1. Login ke blog kamu.
2. Pilih Rancangan > Edit HTML > Centang Expand Widget Template > Cari kode ]]></b:skin>
3. Letakan kode di bawah ini tepat di atas kode ]]></b:skin>
Cara Membuat
1. Login ke blog kamu.
2. Pilih Rancangan > Edit HTML > Centang Expand Widget Template > Cari kode ]]></b:skin>
3. Letakan kode di bawah ini tepat 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
#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
4. Selanjutnya, cari kode <data:post.body/> dan letakan kode di bawah ini tepat di bawah kode yang di cetak tebal (jika menemukan dua kode atau tiga, pilih saja yang kedua).
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<script type='text/javascript'>var ry='<h3>Baca Juga:</h3>';rn='<h3>No Related Posts </h3>';rcomment='Comment';rdisable='Comments off';commentYN='yes';</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='"/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>
<div id='related-posts'>
<script type='text/javascript'>var ry='<h3>Baca Juga:</h3>';rn='<h3>No Related Posts </h3>';rcomment='Comment';rdisable='Comments off';commentYN='yes';</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='"/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>
Ganti kode yang berwarna biru angka 6 jumlah artikel terkait yang ingin ditampilkan.
Simpan dan lihat hasilnya.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment