Tutorial Cara Membuat Related Post

10.33.00 Bang Eka 0 Comments

Tutorial kali ini saya ingin membahas cara membuat Related Post atau Artikel terkait di blog anda. Biasanya ketika anda mengunjungi suatu web/blog biasanya diakhir artikel sering melihat post artikel yang lainnya. Gunanya agar pengunjung betah di membaca artikel yang sobat tulis.

Bagaimana caranya? Cek this...

1. Buka akun blogger anda.
2. Klik Template > Edit HTML
3. Temukan kode ]]></b:skin> dan Copy kode dibawah ini

/* Tutorial Related Posts Eka Go Blog--- */
    .related-post .post-thumbnail {
    z-index: 1;
    position: relative;
    width: 98px;
    height: 98px;
    margin: 0;
    display: block;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 2px 2px 5px #444;
    -moz-box-shadow: inset 2px 2px 5px #444;
    box-shadow: inset 2px 2px 5px #555;
    }
    .related-post {
    float: left;
    position: relative;
    width: 98px;
    height: 98px;
    margin: 0 10px 10px 0;
    background: #F6F6F6;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }
    .related-post .related-post-title {
    display: none;
    float: left;
    background: #000;
    color: #fff;
    text-shadow: none;
    font-weight: bold;
    padding: 10px;
    position: absolute;
    top: -20px;
    left: 40px;
    z-index: 2;
    width: 200px;
    -webkit-box-shadow: 0 0 2px #444;
    -moz-box-shadow: 0 0 2px #444;
    box-shadow: 0 0 2px #444;
    }
    .related-post:hover .related-post-title {display: block;}

4. Tempelkan diatasnya
5. Cari kode <div class='post-footer'>
6. Salin kode dibawah ini dan tempelkan tepat diatas <div class='post-footer'>

<div id='related-posts'>
    <b:if cond='data:blog.pageType == "item"'>
    <script type='text/javascript'>//<![CDATA[
    var ry='<h3>Related Posts</h3>';rn='<h3>   No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
    var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=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;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZqYkUFUBvLDaubWruwzvJ6v6WuTcmIghdg-34PAYD9cbpxJ-pCGG9p0pnB_dXTrDGm1Kaa7Ck2hEDSZg_tXATmrehzQKtHcTbODTae-9KQYbdtyOksNhaf1aKgbJlu22NmPtIWLSX-9K/'};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]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=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){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.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+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';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=5;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
    </b:if>
    </div>
    <div class='clear'/>

pada bagian maxresults isi terserah anda, maxresults artinya jumlah artikel terkait yang akan ditampilkan.

7. Simpan Template anda.

Selesai sudah tutorial cara membuat related post kali ini. silahkan dishare jika anda mendapatkan manfaat dari artikel ini. Terima kasih sudah berkunjung.

Iklan IDR30K