11/25/16

Cara Membuat Related Post Simpel di Blogger

Related Post atau  Artikel Terkait  atau juga kalau kita sering stalking ke blog atau website berbahasa inggris kita akan menemukan tulisan You Might Also Like. Itu hanya sebuah nama saja yang membedakannya, tergantung anda mau dinamai apa, perlu anda ketahui biasanya Related Post ini berada di bawah posting artikel kita.

Terkait : Cara Membuat Artikel Terkait Simpel Di Bawah Posting

Related Post ada berbagai macam mulai dari yang hanya judul saja yang di tampilkan, ada juga yang memakai gambar dan judul, pokonya ada banyak dan itu tergantung yang punya blog sukanya yang model gimana.

Nah pada postingan kali ini saya akan membagikan cara membuat Related Post Simpel tapi terlihat elegant. Gambarnya, judul dan ringkasan artikelnya tampil, silahkan anda lihat screenshot gambar di bawah ini.
Cara Membuat Related Post Simpel di Blogger

Untuk membuat related post ini sendiri sangatlah gampang, mari kita simak tutorialnya

  • Pertama anda login ke blog anda
  • Jangan lupa untuk backup terlebih dahulu blog anda.
  • kemudian anda masuk ke Edit HTML lalu cari kode '</head>' agar lebih mudah mencarinya gunakan (Ctrl + F). dan copy pastekan kode di bawah ini tepat di atas kode yang anda cari tadi. 

<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>

  •  Maka pemasangan kodenya akan seperti gambar di bawah ini 

Cara Membuat Related Post Simpel di Blogger

  • Setelah anda selesai memasang kode di atas selanjutnya anda cara '<b:includable id='post' var='post'>'. setelah menemukan kode tersebut anda selanjutnya skroll kursor kebawah sampai menemukan tag penutu '</b:includable>'. kemudian copy pastekan kode di bawah ini 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>

  • Maka pemasangan kode di atas akan seperti gambar di bawah ini :

Cara Membuat Related Post Simpel di Blogger

  • Selanjutnya tinggal anda Simpan. dan cek di blog anda apakah suda berhasil tampil.

Untuk yang di tandai warna merah silahkan anda ganti, mau Artikel terkait, atau You Might Also Like. pokonyo sesuai keinginan anda aja.

Itulah tutorial Cara Membuat Related Post Simpel di Blogger  . semoga postingan kali ini bisa membantu. Jika anda masih kesulitan silahkan anda tinggalkan komentar di bawah. Saya akan senang membantu anda.

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.