Cara Membuat Related Post pada Blogger

Share

topgans.blogspot.com - Kali ini saya 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 page views 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 dan Ikuti petunjuknya:

Step - By - Step tutorial related post:

• 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; margin-bottom:20px; font : 12px Verdana; margin-bottom:30px; } #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/AVvXsEg5RNmXgsbHK2Y5dJL4sco80-iAe24scz1bH02dg0RIIpKu3pqz7zhMI64uiReTmKpYGW5_wb5FbV85wQj4Wx1KZ4oAXKX89MWLfmMKG8nOmPYpv_SZNNFJs5aDC1t2fK2BbtUpj9_DTjo/s320/Arrow1+Right.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 : 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>

• Selesai. Simpan Template anda.

*Perhatian:

1. Untuk mengubah tampilan jumlah related post, anda bisa mengganti sendiri max-results=10 menjadi max-results=5 dan lain - lain sesuai kemauan anda sendiri.

2. Untuk mengubah gambar bullet  ini dengan gambar lain yang anda suka dengan ukuran 16x16 pixel.

3. Anda juga bisa mengubah sendiri kode warna pada CSS tadi dengan warna yang sesuai dengan blog anda.

Apabila ada kesalahan silahkan anda ralat, karena saya menerima kritik dan solusi dari kawan - kawan semua terkait hal yang saya tulis dalam blog saya ini.
Semoga Bermanfaat .

Tutorial tentang cara membuat related post pada blogger

Related Posts by Categories