Cara Membuat Artikel Terkait, Posting Terkait (Related Post), Produk Terkait Horizontal dengan Thumnail

Kali ini saya akan posting

Cara Membuat Artikel Terkait, Posting Terkait (Related Post), Produk Terkait Horizontal dengan Thumnail

Ada banyak tutorial yang bisa anda termukan berkaitan dengan judul ini, namun yang saya post ini adalah yang sudah saya praktekkan dan berhasil. lihat demonya disini.


Oke langsung saja...
1. Login ke blogger
2. Rancangan >> Edit HTML
3. Centang "Expand Template Widget"
4. Cari kode <data:post.body/> agar lebih mudah gunakan CTRL+F
5. Letakkan kode berikut di bawah <data:post.body/>

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Jika anda bingung coba perhatikan contoh milik saya dibawah ini:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
</b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
 
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
 


   <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> 
      </div>
    </b:if>
    </div>

</b:includable>

6. Kalau sudah cari lagi kode </head>
7. Tempelkan kode berikut tepat diatas kode </head>,

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h4{
font-weight: bold;
color: black;
font:normal 14px Arial;text-transform:none;
margin:0px;letter-spacing:.01em;line-height: 1.2em;color:#666;
}
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTtsbsd14XYxA1dYEqcIxjCC5iBXg7QTV-GSS89_I21bP8iV9roMRsq6PD7jICHj6Hsgkc-0Hp1n1WAg1xBn_1VIRxwf_3wGXwPqw5BeXfAm6lO0DZBjoLfW4jXwVMGQFxeDu79Es2bkY/s400/noimage.png&quot;;
var maxresults=6;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Lihat Produk Lainnya&quot;;
</script>
<script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

CATATAN:
Lihat Produk Lainnya (Judul pada widget, bisa diganti sesuai keinginan anda)
var maxresults=6: Jumlah artikel yang di tampilkan (juga bisa diganti)

Demikian tutorial singkat ini, semoga bermanfaat !!!

Sumber:http://www.blogdhika.com/2012/01/artikel-terkait-horizontal-dengan.html





Kalau manfaat, jangan lupa dishare...
Artikel Cara Membuat Artikel Terkait, Posting Terkait (Related Post), Produk Terkait Horizontal dengan Thumnail ini Anda baca di webeson.blogspot.com Jika Anda merasa artikel ini bermanfaat, jangan lupa kasih komentar.

Terimakasih atas kunjungan Anda. Kritik dan saran dapat anda sampaikan melalui kotak komentar. Silahkan baca Posting Meranik Lainnya di bawah ini dan jangan lupa berkunjung kembali
Flag Counter

  ©webeson - All Rights Reserved.

Template by Dicas Blogger | Top