Header Ads

Cara Memasang Widget Artikel Terkait dengan Thumbnail

Cara Memasang Widget Artikel Terkait dengan Thumbnail

Sebelumnya di blog ini telah dibahas mengenai cara memasang widget artikel terkait di blog. Namun widget tersebut tanpa thumbnail, jadi hanya menampilkan judul-judul artikelnya saja. Kali ini akan dibahas tentang cara memasang widget artikel terkait dengan thumbnail.

Widget artikel terkait dengan thumbnail ini cukup menarik karena disertai dengan gambar. Gambar yang muncul diambil dari salah satu gambar yang ada di artikel yang dimaksud. Widget artikel terkait merupakan daftar link dari judul-judul artikel suatu blog yang berlabel sama dengan artikel yang sedang dibaca.

Berikut cara memasang artikel terkait dengan thumbnail.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan.

3. Klik tab Edit HTML.

4. Klik Download Template Lengkap, untuk berjaga-jaga kalau nanti terjadi kesalahan dalam mengedit template.

5. Beri tanda centang pada Expand Template Widget.

6. Cari kode </head>. Bila Anda menggunakan browser Mozilla Firefox, tekan tombol Ctrl + F, lalu isikan kode yang dimaksud untuk memudahkan pencarian.

7. Copy kode berikut dan paste di atas 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 h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
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="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.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-->

8. Cari kode  <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>.

9. Copy kode berikut dan paste setelah salah satu kode di atas.

<!-- 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'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

10. Klik tombol SIMPAN TEMPLATE.

11. Klik Lihat Blog untuk melihat hasilnya.

  • Anda dapat mengubah jumlah artikel terkait yang ingin ditampilkan dengan mengubah kode var maxresults=5;
  • Untuk mengubah judul widget, Anda dapat mengedit kode berikut var relatedpoststitle="Related Posts";
  • Bila ingin mengganti default thumbnail, edit kode berikut  var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
  • Untuk mengubah warna dari Splitter Line, silakan edit kode var splittercolor="#d4eaf2";


8 comments:

  1. kode di langkah ke 8 koq gak ada ya di blog q??,, dua2 nya gak ada, gimana cara mengatasinya??

    ReplyDelete
  2. Sudah diberi tanda centang pada Expand Template Widget belum Sob?
    Kalau memang tidak ada juga, coba letakkan di bawah kode <data:post.body/>

    ReplyDelete
  3. ohh ea belum sieh hehe,, key dech thnx ya buat info nya

    ReplyDelete
  4. udah saya terpakan mas berhasil meskipun sedikit ada yang aneh. garis sama gambar gak sejajar

    ReplyDelete
  5. cara nih kok sudah ga bisa dipake lagi kenapa yah?
    padahal udah di expand

    ReplyDelete
  6. masih bingung saya gan

    ReplyDelete

Comment Policies:

1. NO SPAM
2. NO LIVE LINK

Any violation will be deleted within 24 hours, thanks for your attention.

Template images by Ollustrator. Powered by Blogger.