Cara Membuat Artikel Terkait Di Blog

Kali ini saya akan menshare cara membuat Artikel Terkait di Blog.  Salah satu hal yang diperlukan pengunjung saat membaca suatu artikel di blog kita adalah navigasi / kemudahan menemukan artikel terkait lainnya. Oleh karena itu dibutuhkan sebuah gadget Related Post / Artikel Terkait dan langkah-langkah untuk membuatnya adalah sebagai berikut.

1. Login ke blogger

2. Klik Template lalu pilih Edit HTML

3. Kemudian tekan tombol Ctrl + F pada keyboard untuk memudahkan pencarian

4. Lalu pada kotak pencarian yang muncul masukkan kode </head>

5. Masukkan kode berikut tepat di atas kode </head>

<style> #related-posts { float : left;height:200px;overflow:auto; 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/AVvXsEiMwq3_jVASMXyZjrM13wcfm7wFDO-u_P0wJjrRkPZAv0BVFTrP5EAkZgwTMGETFoHc5LW6PHl7HWgdnpEb4-nkU4fnkCRpZKg3Xxxjw3feWcnWrCkNjwAC8DybIRUR4AnCYLPHpABMBsY/") 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://problogizjs.googlecode.com/files/Related-posts.js' type='text/javascript'/>

6. Kemudian cari lagi kode <data:post.body/>

  Biasanya kode tersebut ada 2 jadi pilih saja yang ke-2 dengan cara menekan enter 2 kali setelah memasukkan kode tersebut.

7. Setelah menemukan kode tersebut, masukkan kode berikut tepat dibawahnya

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

8. Jika sudah klik Simpan Template.

Semoga bermanfaat...!!!!