Membuat Related Post Cantik di Blogspot

Related Post atau artikel terkait jika dipasang di tiap artikel dapat meningkatkan pageview blog kita. Selain itu, adanya link ke artikel lain di blog akan memberikan inbound link yang tentunya bagus untuk SEO.

Bagi pengunjung, adanya link artikel terkait ini mungkin bisa lebih memberikan pencerahan dan pendalaman untuk informasi yang sedang dicari. Sayangnya, membuat related post di blogspot tidak sesimpel blog wordpress yang banyak dukungan plugin untuk keperluan tersebut.

Bagi webmaster blogspot, perlu sedikit pemasangan kode untuk membuat related post atau artikel terkait. Kabar baiknya, ada banyak panduan, tutorial, dan tulisan sejenisnya tentang bagaimana membuat Related Post di blogger blogspot. Salah satunya artikel ini. Mari kita belajar membuat Related Post cantik di blogspot.

• Silahkan Login di blogger anda
• pilih Layout > pilih dan Edit HTML di Dashboard Blogger.
• Sebaiknya backup dulu template anda sebelum membuat perubahan apapun.
• Beri tanda centang "Expand Widget Templates" box.
• Cari tag </head>
• Tambahkan kode dibawah ini sebelum tag </head> tersebut.
  

<style>
#related-posts {
float : left;width : 540px;margin-top:20px;margin-left : 5px;margin-bottom:20px;font : 11px Verdana;margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;margin : 5px 0 5px 0;padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;font-weight : normal;margin : 5px 7px 0;padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;margin : 10px;padding : 0;
}
#related-posts ul li {
display : block;background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEQicjy63pkJrXNhdqAmsgNjSAdLxT5lMmgUrmvPJqTBI9bP9tKbRUQRmUiV2-8t-BLonMR20jA2pRcfjLKHrT7eSR9CX9e5Cf4QWTEEuo2mPH1hgmg6E0ZsOJQNoOCCZSlACX_eMVllo/") no-repeat 0 0;
margin : 0 0 5px 0;padding-top : 0 0 1px 21px;line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script src='http://bsaves.com/scripts/Related_posts_hack.js' type='text/javascript'/>

• Lalu cari kode <p><data:post.body/></p>. Dalam beberapa template, mungkin kodenya terlihat sebagai berikut <div class='post-body> atau <p><data:post.body/></p>
  
  Tambahkan kode dibawah ini tepat di bawah kode tersebut.

<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

• Untuk menampilkan hasil sebanyak mungkin, ganti angka 5 (berwarna biru) dengan angka yang anda kehendaki.
  
  
• Untuk menyesuaikan dengan tema blog anda, ganti gambar (linknya disini diberi warna merah) dengan yang cocok dengan anda. Contohnya, untuk blog hape, aku menggunakan gambar hape kecil. Cara menyimpan dan menggunakan gambar sendiri dapat anda lihat disini.
  
  
  
  
  
• Simpan template baru anda.

source: belajarngeblog