Cara Memasang Related Post diBawah Posting

  kali ini akan memberikan tutorial Cara Memasang Related Post diBawah Posting. Pernahkah sobat berpikir bagaimana cara membuat related post agar pembaca/pengunjung blog sobat tidak hanya membaca atau melihat posting itu yang mereka cari saja, nah kalau sobat pernah berpikir cara ini cukup bagus untuk dipraktekkan

Langsung saja yah sobat praktekkan caranya :

1. Sama seperti biasa sobat Login dulu ke Blogger > Rancangan (Design) > Edit HTML > Centang Pada Tulisan Expand Template Widget
2. Kemudian pasang kode berikut di bawah tag </head> 

<style type='text/css'> #related-posts { float : left; width : 100%; 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/AVvXsEhlFE0722rjIgmoCPdeZbJ6ZYwLKjXoZ3k9De_vPQjlgYTN_MB3QQL6PH3Ys4S7rSzRR7s8HTMIlW0zo9xSSLobodXct527L5azwlNde3bnpxDSXv8DvJXnLMrMVbY7gc_oL_k_JyyAQ00/&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://belajarblogging.googlecode.com/files/relpost.js' type='text/javascript'/> 

3. Jika sudah, cari <data:post.body/> (gunakan ctrl + F) lalu pasang kode berikut di bawahnya, jika ditemukan 2 buah kode, simpan di bawah kode yang ke 2

 <b:if cond='data:blog.pageType == "item"'>
<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>

4. Save Template/Simpan Template.

Keterangan:

• pada tulisan warna merah di atas adalah warna tulisan dari widget ini.
• pada tulisan warna orange di atas adalah warna garis 
• Silakan ubah warna tersebutd dengan warna yang cocok untuk template Anda

Twitter Delicious Digg Facebook Stumbleupon RSS