Lano Blog
Jum'at, April 04, 2025

» » Cara Membuat Artikel Terkait Dengan Thumbnail

Cara Membuat Artikel Terkait Dengan Thumbnail

S

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

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.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk mengantisipasi jika nanti terjadi kesalahan dalam pengeditan kita dapat dengan mudah mengembalikan template ke seperti semula.

4. Cari kode <data:post.body/>. Untuk mempercepat pencarian, silakan tekan Ctrl + F lalu masukkan kodenya.

5. Copy kode berikut letakkan dibawah kode tersebut.

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

5. 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguUc7blBZ8swbIYgEmTx8h-Mzm4B5hrUjOmqxp7re0RKgjXe6RYWGbt50o6BOPMiLmHh0bomRNR24SJ_EEfPCCRhR5Ny00Io9hymb9d9Ryodpu37ilfmdP9C57fGXzHT6515-8yaky0HA/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-->

6. SIMPAN

7. 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguUc7blBZ8swbIYgEmTx8h-Mzm4B5hrUjOmqxp7re0RKgjXe6RYWGbt50o6BOPMiLmHh0bomRNR24SJ_EEfPCCRhR5Ny00Io9hymb9d9Ryodpu37ilfmdP9C57fGXzHT6515-8yaky0HA/s400/noimage.png";
  • Untuk mengubah warna dari Splitter Line, silakan edit kode var splittercolor="#d4eaf2"; ( Untuk mengganti kode warna dengan selera anda klik sini )


HABIS BACA JANGAN LUPA LIKE FANSPAGE KAMI DIBAWAH YA SOB..

Artikel Menarik Lainnya

Label: