Thursday, November 29, 2012

Membuat Related Post di Blogger dengan mudah

Membuat Related Post atau sering juda dikenal dengan Artikel Terkait memang diperlukan ada di halaman blog kita.

 

Kegunaan Related Post atau Artikel terkait

Selain untuk hanya mempercantik halaman blog, Related Post / Artikel Terkait ini juga sangat membantu bagi pengunjung untuk lebih leluasa mencari artikel yang dikehendakinya saat berada di blog kita.
Related post disini akan menunjukan beberapa Artikel / Postingan yang isi kontennya masih ada kaitannya dengan artikel yang sedang dibaca.
manfaat lain dengan adanya widget atau fitur Related Post di blog adalah dapat membuat pengunjung akan jauh dari rasa bosan.

untuk membuat Related Post / Artikel terkait simak tutorial berikut ini:

Cara membuat Related Post atau Artikel Terkait dibawah Postingan


Step : - 1

  • masuk ke Blogger-->Template-->Edit HTML-->Procees.
  • Klik pada "Expand Widget Template"
  • Cari kode </head> di dalam blog HTML
  • Copy & paste kode dibawah ini tepat sebelum kode diatas
<!--Related Post Widget Starts-->
<style> #related-posts { float : left; width : 480px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; font-weight: bold; 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: bold; 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;http://1.bp.blogspot.com/-X0SkFmJ3J_Q/T7Na0d6OADI/AAAAAAAADNM/Ivs78tMFl0I/s1600/%5Bwww.gj37765.blogspot.com%5Drp.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 : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://sites.google.com/site/bloggerwidgets01/related-posts-widget.js' type='text/javascript'/>
<!--Related Post Widget Ends-->

Step : - 2

  • Selanjutnya cari kode  <data:post.body/>
  • Copy & paste kode dibawah ini tepat setelah kode diatas. 
<!--Related Post Widget Starts-->
<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='#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>
<!--Related Post Widget Ends-->

Step : - 3
  • Save the template.
Note: Kode berikut ini dapat diganti sesua keinginan untuk berpa banyaknya artikel yang akan ditampilkan  (max-results=5).

Artikel Terkait

Membuat Related Post di Blogger dengan mudah
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email