Membuat Related Post dengan Thumb dan Comment di Blogger

Kali ini saya ingin berbagi sedikit tips dan trik membuat related post dengan thumbnail (gambar) dan komentar di blogger atau blogspot. Langkah-langkahnya seperti ini :
  1. Login ke blogger kamu, lalu masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan (jangan lupa centang Expand Widget Template).
  2. Temukan kode ini: ]]></b:skin> kemudian salin kode di bawah ini dan letakkan di atasnya.
    /* Related Post */
    #related-posts{float:left;height:160px;margin:5px 0; outline: 1px solid #fff;border: 1px solid #ddd;background: #f9fafb; border-radius:3px; -o-border-radius:3px; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px;}
    #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:559px;padding-left:5px;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
  3. Temukan kode ini: <data:post.body/> (jika menemukan dua kode yang sama atau lebih, pilih saja yang pertama) kemudian salin kode di bawah ini dan letakkan di dibawahnya.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <script type='text/javascript'>var ry=&#39;<h3>Kaos Sejenis:</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=5;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
    </div>
    <div style='clear both'/>
    </b:if>
  4. Klik Preview, jika tidak ada error maka klik Simpan.
  5. Selesai
Hasilnya seperti ini :
Membuat Related Post dengan Thumb dan Comment

Pada langkah 2, anda dapat merubah width:559px sesuai dengan lebar template kamu, dan anda juga dapat menghilangkan kode ini border-radius:3px; -o-border-radius:3px; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; jika anda tidak ingin ada bordernya.
Pada langkah 3, anda juga dapat merubah kata Kaos Sejenis: , sesuai dengan kata yang anda inginkan, serta merubah maxresults=5; , sesuai dengan jumlah/bilangan yang anda ingin tampilkan sebagai related post.

Semoga bermanfaat.

No comments for "Membuat Related Post dengan Thumb dan Comment di Blogger"