Cara Membuat Widget Artikel Terkait Dengan Thumbnail/Gambar

Ini adalah widget yang indah untuk menampilkan posting terkait di footer dari setiap postingan blog dari kategori yang sama, bersama dengan tampilan thumbnail gambar.

Dengan memasang widget ini di blog, tidak hanya membantu untuk menampilkan posting yang relevan, tetapi juga dapat meningkatkan blog page view dan mengurangi tingkat bouncing juga.

Ini trik yang jitu agar pembaca betah melihat isi blog anda untuk waktu yang lama.

related posts widget for blogger

Sayangnya template blogger standar tidak memiliki fitur ini. Jadi, jika anda menggunakan template blogger standar atau template yang tidak memiliki widget pos terkait tapi ingin menyertakan fitur ini di blog anda, silakan ikuti langkah-langkahnya sesuai urutan.

Cara menambahkan postingan terkait widget dengan thumbnail di blogger

Untuk membuat widget ini anda memerlukan pengetahuan tentang bahasa JavaScript dan CSS. Tapi jangan khawatir, di postingan ini anda tidak perlu menulis kode tetapi hanya mengikuti langkah-langkah sederhana untuk menambahkan fitur penting ini ke dalam blog anda.

1. Masuk ke akun Blogger Anda.

2. Pilh menu Template.

3 Download / Back up template Anda sebelumnya, untuk berjaga-jaga jika Anda membuat kesalahan dalam pengeditan template.

4. Klik tab Edit HTML dan cari </ head>.

5. Sekarang Salin kode dan paste tepat di atas tag </ head>.
<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.3em;
font-weight: bold;
color: #000000;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#000000;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://eflianda-blogzzz.googlecode.com/files/relatedthumbs.js' type='text/javascript'/>
</b:if>

6. Setelah menambahkan kode diatas, kemudian gulir ke bawah dan cari <div class='post-footer'>. Salin dan Paste CSS di bawah ini tepat di atas <div class='post-footer'>.
 <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>
 <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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
 <script type='text/javascript'>
 var currentposturl=&quot;<data:post.url/>&quot;;
 var maxresults=5;
 var relatedpoststitle=&quot;Related Posts&quot;;
 removeRelatedDuplicates_thumbs();
 printRelatedLabels_thumbs();
 </script>
 </div><div style='clear:both'/>
 </b:if>
Keterangan :
maxresults = 5 ; untuk mengubah jumlah postingan terkait.
" Related Posts "; untuk mengubah judul widget ini.

7. Simpan template dan silakan cek hasilnya.


Mudah-mudahan, cara ini akan bekerja di blog anda.

Semoga bermanfaat!

Source : Stylish Related Posts Widget with Thumbnail for Blogger

Related Post

Tambahkan Komentar Sembunyikan