Sabtu, 16 Juni 2012

Cara Membuat Related Post Dengan Gambar Dan Komentar Untuk Blog


By on 22.15

Blazer Blog, Tutorial Blog - 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>
#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
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 == &quot;item&quot;'>
<div id='related-posts'>
<script type='text/javascript'>var ry=&#39;<h3>Baca Juga:</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>
Ganti kode yang berwarna biru jumlah artikel terkait yang ingin ditampilkan.
Simpan dan lihat hasilnya.
(RaviSaive)

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

24 komentar:

  1. wah keren ni gan, ijin copy scriptnya ya gan, ingin saya share lagi. o ya gan ada yang kurang nampaknya pada kode penutup css yaitu " } "

    BalasHapus
  2. hahah iyah tanda } bisa ngaru tuh

    BalasHapus
  3. Salam kenal persahabatan, terima kasih banyak, tips anda ini telah aku praktekkan, keep sharing

    BalasHapus
  4. Keren Artikel nya gan.
    Sambil Blogwalking jg nih gan.
    Thanks ya

    BalasHapus
  5. Makasi gan atas pembelajarannya ya!
    Kunjungi juga blog ane untuk dapatkan software full version uptodate dan lengkap!
    Hanya di FREE DOWNLOAD CENTER

    BalasHapus
  6. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  7. bos kenapa di blog saya tidak ada kode ada yang tau gak?

    BalasHapus
  8. Bang saya kok gak bisa ya coba ini , datapost body ada 4 :(

    BalasHapus
  9. Thanks sudah berbagi ilmunya, sukses selalu....

    BalasHapus
  10. widget blog memang keren keren ya bang. jadi pengen utak atik blog terus nih..

    BalasHapus
  11. Sudah dipraktekan dan bisa bekerja.. Jazakalloh

    BalasHapus
  12. something wrong alias ada yang salah gan. aku sudah ikutin petunjuk sampean sampe titik komanya. tapi kok kagak ada tampilan yang muncul untuk related post di bawah artikel yang aku postingin ya. what's the problems. tolong di deteksi gan bila perlu survey ke blogku. di www.renungankuplesrenunganmu.blogspot.com maklum Mr Gaptek just begin to be bloger. alias masih awam banget soal blog ginian, makanya all article from your blog, aku kebit-kebit buat nambah wawasan. tapi jika abang punya waktu untuk ngasi petunjuk langsung, wah matur nuun banget deh.

    BalasHapus
  13. Udah dicoba gan, makasi
    silakan kunjungi fmizar.blogspot.com :)

    BalasHapus
  14. Mas, gimana cara ngubah ukuran tulisannya ??
    http://cybergreys.blogspot.com/

    BalasHapus
  15. Oke gan..tapi pengaruh nih sama loading blog..

    BalasHapus
  16. This blog information is so excellent,
    jobs

    BalasHapus