Membuat Related Post pada Blog - cara 6

Kali ini akan berikan blogspot tutorial tentang cara membuat related post pada blogger yang beda dari yang lain. Tentunya anda semua sudah sangat mengerti apa manfaat related post pada blog anda. Ya, untuk meningkatkan pageviews blog anda saat pengunjung datang membaca artikel anda. Disini related post berguna untuk menarik pengunjung berdasarkan artikel yang mereka baca yang berkaitan dengan kategori artikel itu. Atau biasanya disebut "related post by category". Tutorial cara membuat related post pada blog kali ini memang sengaja saya buat, karena ada blogger yang me request tutorial ini. Kebetulan saya sudah mencobanya pada blog saya ini dan memakainya sampai sekarang. Script related post ini memang saya taruh tidak jauh dari footer artikel, dikarenakan pengunjung afar bisa lebih mudah melihatnya.

Baiklah, langsung saja, inilah tutorial blog, cara membuat related post pada blogger. Ikuti petunjuknya:

• Login pada akun blogger anda.
• Pergi ke Tata Letak > Edit HTML.
• Bila anda takut terjadi error, template bisa anda backup lebih dahulu.
• Pastikan centang "Expand Widget Templates".Cari tag </head> pada script template anda.
• Tambahkan kode ini sebelum tag </head> tadi.

<style> #related-posts { float : left; width : 540px; margin-top:15px; margin-left : 5px; font : 12px Verdana; margin-bottom:20px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 18px; 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/AVvXsEheN5661k-ggwOlHsblR8JpsGUMNmuQwACE2k4R9PtHzmhLfrj5PZ3Xzg0GHRwgM5PASXe2GcsH3UfsLgLES5APeiqZGVw59SUYhZ1J6AUZxRmDHFdTKAEbEdywIMFMC7NlArpXfv2usIg/s320/Arrow1+Right.png&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; line-height : 1.5em;} </style> <script src='http://bsaves.com/scripts/Related_posts_hack.js' type='text/javascript'/>

• Sekarang Cari tag <data:post.body/>, bila tidak ketemu, coba <div class='post-body> ini, karena biasanya tiap template bisa berbeda.
• Setelah ketemu, tambahkan kode dibawah ini, tepat dibawah tag <data:post.body/> tadi.

<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='#000000'><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=10&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
 </div>

• Selesai. Simpan Template anda.

*Perhatian:

Untuk mengubah tampilan jumlah related post, anda bisa mengganti sendiri max-results=10 menjadi max-results=5 dan lain - lain.
Untuk mengubah gambar bullet ini dengan gambar lain yang anda suka dengan ukuran 16x16 pixel.
Anda juga bisa mengubah sendiri kode warna pada CSS tadi dengan warna yang sesuai dengan blog anda.

Demikian blog tutorial related post. Semoga bisa bermanfaat bagi blog kawan - kawan sekalian.

Update : Dari semua posting " Membuat Related Post pada Blog cara 1, 2, 3, 4, 5 dan 6 " tidak semuanya bekerja, karena mungkin tergantung bawaan HTML atau apalah namanya, yang jelas saya coba dibeberapa blog punya saya dan teman-teman hasilnya berbeda, tidak semuanya berhasil. Silahkan aja coba-coba mana yang support mana yang tidak, sekalian belajar dan lebih memahami cara menambah feature-feature blog.

Semoga bermanfaat,

kartolocyber.blogspot.com