Membuat Tampilan Related Post Menarik | Blog jadi SEO

Dalam pembuatan related post 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, biasanya menghilangkan widget lain yang nggak terlalu dibutuhkan seperti archive page.

Related Post merupakan postingan yang yang saling berhubungan antara satu atau dengan yang lainnya. Related Post sering digunakan para 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. Biasanya artikel yang muncul dalam kolom related post adalah dari jenis label yang sama dengan tulisan diatasnya.

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.

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/AVvXsEjkSdgTEV3h8_JDCy3g7CL_WqoqSAIXXku3Un_AyOJhsusN-NdDw5rJ_LR1SweAjTbSRa34lR95B6wI_8scgj0lstOJhbQ9SlbgN7smsAb27hr__ReLF5zPEGHUgYbaLaoO-W_nJl8DkNhB/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 sobat tidak suka dengan tampilannya, sobat bisa mengganti url gambar berwarna biru dengan url gambar yang anda inginkan. Anda bebas berkesperimen untuk menemukan kepuasan.