Cara Membuat Related Post a.k.a Artikel Terkait Yang Bagus

By HP Yitno

Related Post a.k.a Artikel Terkait sering digunakan blogger mania untuk meningkatkan jumlah pageview. Posisi artikel terkait umumnya berada dibawah postingan. Hal ini bertujuan untuk menarik minat pengunjung agar mau membaca tulisan lainnya. Dan biasanya artikel yang muncul dalam kolom related post adalah dari jenis label yang sama dengan tulisan diatasnya.

Dalam pembuatan related post ini kita membutuhkan sebuah kode javascript. Karena menggunakan javascript, sedikit banyak akan berpengaruh terhadap kecepatan loading blog. Untuk menyiasati loading situs yang bertambah berat karena penggunaan javascript, saya biasanya menghilangkan widget lain yang nggak terlalu saya butuhkan seperti archive page.

Tapi jika anda paham dengan tag conditional blogspot, anda bisa memanfaatkan kode tersebut untuk menyembunyikan atau memunculkan widget tertentu sesuai yang anda harapkan. Dengan begitu loading website anda tetap ringan namun terlihat profesional. Blogger profesional yang sudah ahli dalam pembuatan template biasanya memanfatkan tag pengatur perilaku widget ini.

Dan berikut cara membuat artikel terkait sederhana tapi indah:
1. Login ke www.blogger.com
2. Klik template kemudian edit html
3. Cari kode </head> dengan bantuan CTRL + F
4. Jika sudah ketemu, salin kode dibawah ini tepat diatas kode </head>

<!-- kode javascript related post start -->
<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(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX8Z2JlGQsvmbhm3duOrvtZvkjmGRfxa40spOno6qnD318oz1mDuSJMWdECDFUxvPfsDSH7ewXSvaZ-PhfAYXCL9TKk2n3TMrg8EwkHxqRHDfz52wWtxcMM905MQhu-JfnjMKrACLsEfF_/s1600/rss.png&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; }
</style>
<script src='http://coker.wen.ru/files/related-post.js' type='text/javascript'/>
<!-- kode javascript related post end -->

5. Setelah itu cari kode <data:post.body/> dengan bantuan CTRL + F untuk mempermudah pencarian [ cari kode yang kedua ya sobat ]
6. Jika sudah ketemu, copy paste kode dibawah ini dan letakkan dibawah kode <data:post.body/>

<!-- kode related post 2 start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
<!-- kode related post 2 end -->

7. Simpan template dan lihatlah hasilnya

Demikianlah informasi tentang cara membuat artikel terkait yang baik dan terlihat profesional. Jika anda tidak suka dengan tampilannya, anda bisa mengganti url gambar berwarna biru dengan url gambar yang anda inginkan. Anda bebas berkesperimen untuk menemukan kepuasan.

SHARE :