11/25/16

Cara Membuat Related Post Simpel di Blogger

Cara Membuat Related Post Simpel di Blogger

Related Post merupakan postingan terkait yang di ambil dari postingan lain yang memiliki kategori/label/tag yang sama, dan berada di bawah setiap posting blog (tapi terkadang ada juga related post yang di simpan di tengah-tengah postingan setiap blog).

Dengan memasang Related Post di blog Anda, akan banyak pembaca Anda tetap betah berlama-lama berada di situs Anda ketika mereka melihat posting lain yang mereka minati.

Menambahkan Widget Related Post ke Blogger/Blogspot

Langkah 1: Pertama silahkan Anda login ke akun Blogspot Anda. Kemudian backup terlebih dahulu template blog Anda.

Langkah 2: Klik Tema, kemudian klik Edit HTML lalu cari kode </head>. Agar lebih mudah mencarinya, Anda bisa munculkan pencarian di editor HTML Blogspot; Klik sembarang pada area Editor HTML–> Tekan Ctrl+F pada keyboard.

Langkah 3: Copy dan paste kode di bawah tepat di atas kode </head>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Related Post */
#related_posts{margin-top:15px}
#related_posts h4{color:#000;background:#f0f0f0;padding:10px;margin:0 0 5px;font-size:120%;}
#related_img{margin:0;padding:0;}
#related_img:hover{background:0}
#related_img ul{list-style-type:none;margin:0;padding:0}
#related_img li{min-height:62px;border-bottom:1px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;}
#related_img li a{color:#2672a0;}
#related_img li a:hover{text-decoration:underline}
#related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;}
#related_img .news-text{display:block;text-align:justify;font-weight:normal;text-transform:none;color:#333;font-size:12px;}
#related_img img{float:left;margin-right:7px;border:1px solid #ccc;padding:2px;width:60px;height:60px;max-width:100%;background:#fff}
</style>
<script type='text/javascript'>/*<![CDATA[*/var relnum=0;var relmaxposts=5;var numchars=135;var morelink=" ";function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"http://lh3.ggpht.com/_xcD4JK_dIjU/SnamIh0KTCI/AAAAAAAADMA/hLjqmEbdtkw/d/noimagethumb.gif",relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatpost(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[h]+"' rel='nofollow' target='_top' title='"+reljudul[h]+"'><img src='"+relgambar[h]+"' /></a>",g+="<a href='"+relurls[h]+"' target='_top'>"+reljudul[h]+"</a>",g+="<span class='news-text'>"+relcuplikan[h]+" ... <a href='"+relurls[h]+"' target='_top'>"+morelink+"</a><span class='news-text'>",g+="</li>",document.write(g),m++,m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script>
</b:if>

Catatan: Anda bisa mengedit jumlah postingan yang ingin di tampilkan pada Related Post, dengan mengedit bagian ini var relmaxposts=5; ganti 5 dengan jumlah posting yang ingin Anda tampilkan.

Langkah 5: Setelah Anda selesai memasang kode di atas, selanjutnya Anda cari <b:includable id='post' var='post'>.  Geser kursor kebawah sampai menemukan kode </b:includable>. 

Copy dan paste kode di bawah tepat di atas kode </b:includable>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear:both;'/>
      <div id='related_posts'>
        <h4>Related Articles :</h4>
        <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=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
        </b:loop>
        <ul id='related_img'>
          <script type='text/javascript'>relatpost();</script>
        </ul>
      </div>
      </b:if>

Catatan: Untuk yang di tandai warna merah, silahkan Anda ganti dengan tulisan yang Anda sukai misalnya Artikel terkait, atau You Might Also Like.

Langkah 6: Klik Simpan.

Itulah langkah-langkah yang Anda butuhkan! Anda bisa melihat hasil akhir dari pemasangan related post di blog Anda dengan cara melihat salah satu postingan Anda. Selamat mencoba!

You might also enjoy reading

Subscribe

Daftarkan email Anda untuk mendapatkan Artikel terbaru pilihan dari Andito Blog

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

2 comments

Trimakasih Mas, sudah berhasil saya terapkan di blog saya. Sebelumnya udah saya coba dari beberapa tutorial lain ...tapi selalu gagal/tidak muncul. Pinginnya sih related post yang cuman gambar saja. tapi cara yang diatas hasilnya bagus juga. Trimakasih banyak!

Balas

Iya sama - sama. kalau mau hanya gambarnya saja nanti saya kirim via e-mail bak

Balas

Silahkan berkomentar sesuai dengan topik.