Membuat Artikel Terkait (related post) di blog

     Artikel terkait yang kita terapkan pada blog dapat membuat blog kita sering di kutak katik oleh orang-orang sehingga blog kita akan menjadi top blog di google, untuk itu jika sobat ingin menambah kemampuan blog sobat dalam menelusuri jendela google, sobat bisa menerapkan sebuah Related post atau Artikel terkait dengan demikian selain mempercantik tampilan blog sobat bisa juga beguna bagi para pembaca untuk melanjutkan bacaan nya pada blog sobat. Untuk menerapkan Artikel terkait ini bukanlah hal yang sulit asalkan sobat mengikuti step-step yang akan saya jabarkan berikut ini

     Ikuti langkah-langkah berikut ini untuk membuat Artike terkait di bawah postingan

1. Masuk ke Blogger sobat dan pilih Template
2. Lalu pilih EDIT HTML dan harap di tunggu sampai Kode HTML terbuka
3. setelah itu sobat harus menemukan kode ]]></b:skin> dan letakan kode berikut ini tepat di atasnya.

/* Related Posts --- */
    .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. Setelah bagian atas selesai sobat lanjutkan dengan mencari kode yang mirip atau hampir menyerupai kode berikut, jika kodenya ada banyak maka pilih yang pertamanya saja

<div class='post-footer'>
        <div class='post-footer-line post-footer-line-1'/>
          <div class='post-footer-line post-footer-line-2'/>
          <div class='post-footer-line post-footer-line-3'/>
        </div>
      </div>

5. Jika sobat sudah menemukan kode yang mirip dengan kode diatas, copy kode dibawah tepat dibawah kode di atas.

<div id='related-posts'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>//<![CDATA[
    var ry='<h3>Related Posts</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;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/AVvXsEhNCoftjZDNzuFrqcfqndDkNhzXatnDAWFngWMXcToL0LO0fblZ8N-wbSWrTekkrNtxwquWrIof_qAorhCGu2iZZ-f4mffwD3QUmxmOX5l7RxrtysRNzZho_LRTjr4sDoVc0r_uLtD-RTYW/'};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='&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>
    </b:if>
    </div>
    <div class='clear'/>

Keterangan dari kode di atas:

• Pada warna Orange yang sobat liat di scrip pertma dapat sobat ganti dengan ukuran template sobat, dan
• Warna Merah merah pada scrip di atas dapat sobat ganti dengan jumlah artikel yang mau sobat munculkan di blog sobat

6. Silakan simpan template sobat lalu liat hasilnya