Cara Membuat Related Post Bergambar di Bawah Postingan Blog

Assalamu'allaikum Wr. Wb.

Hai sobat Nolima, kali ini saya akan memposting sebuah artikel tutorial yakni Cara Membuat Related Post Bergambar di Bawah Postingan Blog. Mungkin ada sebagian blogger yang menginginkan widget ini karena bisa mempromosikan artikel mereka yang lainnya dengan tag yang sama tanpa pengunjung harus membuka older post  ataupun label/tag karena itu bisa dikatakan 'ribet'.


Dan ada juga template blog tersebut memang tidak memilikinya dan pemilik blog tersebut menginginkan widget Related Post yang ada di bawah postingannya. Sebagai contoh template saya ini yang dari bawaannya sudah ada Related Postnya jadi tidak usah ribet-ribet menambahkannya. Hehehe :D

BACA JUGA: Download Hobbies Template Keren, SEO Friendly & Ads Ready.

Maka dari itu saya mencoba untuk memberitahu agan-agan blogger yang mungkin menginginkan widget Related Post atau hanya sekedar sebagai referensi saja tentang Cara Membuat Related Post Bergambar di Bawah Postingan Blog. Simak dan ikuti tutorial di bawah ini agar terpasang dengan baik tanpa ada masalah :)

1. Login akun googlemu kemudian buka blogger.com

2. Masuk ke menu Template - Lalu Klik Edit HTML

3. Carilah kode ]]></b:skin> (gunakan CTRL + F untuk mempermudah pencarian)

4. Apabila sudah ketemu, copylah kode di bawah ini lalu tempatkan DI ATAS kode ]]></b:skin> tadi.

    /* Related Post Dengan Tooltips Membuat Blog Keren --- */
    .related-post .post-thumbnail {
    z-index: 1; position: relative;
    width: 100px;
    height: 100px;
    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: 108px;
    height: 108px;
    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: #00B366;
    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;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    }
    .related-post:hover .related-post-title {display: block;}


5. Eit belum selesai lho ya, masih ada yang harus di cari. Cari kode ini:
<div class='post-footer-line post-footer-line-1'> atau bisa juga <div class='post-footer-line post-footer-line-2'> (gunakan CTRL + F untuk mempermudah pencarian), kode tersebut ada banyak sehingga kamu harus mencobanya 1 per 1 nanti setelah kode di bawah ini dipastekan dan disave.

6. Apabila sudah ketemu, copy kode di bawah ini dan pastekan tepat di bawah kode tersebut:

    <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]='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'};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=5;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
    </b:if>
    </div>
    <div class='clear'/>

7. Selesai dan simpan template kamu.
8. Cek dahulu related postnya sudah muncul atau belum, jika belum coba ulangi cara ke 5 dengan mencobanya 1 per 1 kode tersebut (dikarenakan ada banyak kode tersebut).

*NB Penting: maxresults=5 adalah jumlah artikel yang akan kamu tampilkan pada Related Post. Silahkan kamu bisa mengubah sesuai keinganmu. 100px merupakan ukuran gambarnya, baik tinggi maupun lebarnya. Silahkan diganti apabila kamu ingin memperkecil atau memperbesarnya. Tulisan Related Post juga bisa kamu ganti dengan sesukamu, misalnya jadi Artikel Terkait, atau Mungkin Anda juga menyukai" dan lain-lain sesukamu :D






Demikian artikel mengenai tutorial Cara Membuat Related Post Bergambar di Bawah Postingan Blog. Semoga bisa bermanfaat untuk para pembaca :-) Jika ada pertanyaan atau masukkan silahkan tulis dikomentar atau di halaman tanya jawab disini.


Terima kasih ~ :-)

Wassalamu'allaikum Wr. Wb.

4 Responses to "Cara Membuat Related Post Bergambar di Bawah Postingan Blog"

  1. sangat bermanfaat info nya. makasih gan ..

    ReplyDelete
  2. sangat membantu dan bermanfaat sekali sob.,.

    ReplyDelete
    Replies
    1. Baguslah kalau bisa membantu agan Ahmad :)
      Terima kasih sudah berkunjung .. :)

      Delete