Cara membuat related post keren

Cara membuat related post keren

Kali ini saya coba share membuat related post / artikel yang berkaitan dengan gambar disisi kiri judul artikel. Contohnya bisa dilihat di Artikel terkait bagian bawah blog saya :

 

Teknik ini menggunakan javascript dari theblogstemplates.com/scripts/Related_posts_hack.js

Nah seperti di atas cuplikannya, lalu cara membuat related post keren sbb :

• Seperti biasa agan login ke blogger > Rancangan > Edit Html > Expand Template Widget

Jika takut gagal simpanlah template dulu dengan mengklik download template lengkap agar kode tadi dapat dikembalikan sewaktu-waktu.

Setelah itu cari kode (Ctrl+F)

</head>

Letakkan kode dibawah ini tepat di atas kode </head>

<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("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png") 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='https://sites.google.com/site/areacyberblog/areacyber/areacyberblogspot.js' type='text/javascript'/>

Selanjutnya cari kode 

<data:post.body/>

Biasanya jika sudah dipasang readmore kode tersebut ada lebih dari satu ( 2-3 ) coba agan-agan tes satu per satu jika nongol related post nya berati kode tersebut yang harus di edit.

Nah letakkan kode dibawah ini tepat dibawah kode <data:post.body/>

<br/><br/><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>

Keterangan pada huruf warna biru : Related post (judul widgetnya) ganti sesukamu, max-results (jumlah posting yang akan ditampilkan pada related postnya) bisa diganti sesuka hati.

You're reading an article about Cara membuat related post keren and you can find this articles Cara membuat related post keren with url http://areacyber.blogspot.com/2011/09/cara-membuat-related-post-keren.html,you can redistribute it or copy and paste it if the article Cara membuat related post keren very beneficial to your friends, but do not forget to put Cara membuat related post keren a source link.