» » Membuat Related Post yang Cantik

Membuat Related Post yang Cantik
doni septu 15/07/2012 1


Related post adalah artikel terkait yang berhubungan dengan tulisan atau posting yang sedang dibaca. Related post sangat membantu dalam meningkatkan page view pada blog. Kalo kita mencari di google dengan kata kuncul misalnya " membuat related post pada blog" maka akan muncul puluhan bahkan lebih artikel yang memberika cara membuat related post . Namun yang perlu diperhatikan adalah selain artikel tersebut menarik  juga penempatan related post dan desain related post itu sendiri sehingga orang lain tertarik untuk membacaya.


Bagaimana membuat related post yang menarik

  1. Login ke Blog Dashboard.  > Layout > Edit HTML
  2. Jangan lupa Back up template anda untuk berjaga-jaga 
  3. Langan lupa centang "Expand Widget Templates"
  4. Cari tag </head>
  5. Tambahkan code di bawah ini sebelum tag </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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrEYFvWrCrHqtrqVXam4XNMdl67zYReSmxlliT7mqO3X6jxo_sTqLRoRyHfWzm8-0uYv0HJoNG4NKcvRexFMj_mK-vlP5-VGYOMk2orPh9mMvWhh1ZVFYTqPwjhDHIcMVu62Qb6q-xh5o/") 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://yourjavascript.com/10121340032/btsnts_related_posts.js' type='text/javascript'/>

6. Cari  kode <data:post.body/> dalam template ( tips : tekan CTRL + F lalu paste
<div class='post-body>  untuk memudahkan pencarian) 
7. Tamabhakan code di bawah ini dibawah  <div class='post-body> 

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

8. Save template
Costumized

Untuk mengatur jumlah post yang muncul pada related post ubah nilai pada  max-results=5 nilai 5 bisa di ganti sesuai keinginan.


Anda sedang membaca Artikel: Membuat Related Post yang Cantik
Kontributor: doni septu Jika anda suka artikel ini silakan di sebarkan atau cukup like FunPage kami terima kasih Rating Blog: 5 dari 5

Kode HTML:

Dapatkan Update Via Emile :
(periksa emile anda dan verifikasi)
Hide Comments
Show 1 Comments

Terimakasih atas kunjungan anda

Copyright © 2012 Abangbloger.Blogspot.Com
Kalijaga, Lombok Timur