Cara membuat widget Post Terkait keren dengan thumbnail

Widget posting terkait dengan thumbnail untuk blogger - ini adalah widget yang stylsh untuk menampilkan posting terkait di footer dari setiap posting blog dari kategori yang sama dengan thumbnail gambar. Dengan memasang widget ini di blog, tidak hanya membantu untuk menampilkan posting yang relevan, tetapi juga dapat meningkatkan page-view blog dan mengurangi tingkat bouncing juga. Pembaca Anda akan betah untuk waktu lama di blog Anda, ini yang sangat penting bagi bagi blog anda. Trik ini khusu bagi templat bawaan blogger, karena kebanyakan template profesional sudah ada fitur ini. Tapi template blogger standar tidak memiliki fitur ini. Jadi, jika Anda menggunakan default blogger atau template yang tidak memiliki widget pos terkait dan Anda ingin menyertakan fitur ini di blog Anda. Berikut adalah widget posting terkait keren dengan thumbnail untuk blogger untuk blog Anda.

Cara menambahkan widget posting terkait dengan thumbnail di blogger

Untuk membuat widget ini Anda tidak memerlukan pengetahuan tentang JavaScript dan CSS, tapi jangan khawatir di posting ini kita akan, untuk menambahkan ini melalui kode yang akan saya berikan, Anda hanya perlu mengikuti langkah-langkah sederhana dibawah untuk menambahkan fitur penting ini ke dalam blog.

1. Masuk ke akun Blogger Anda
2. ke bagian Template
3. Download/ Back up template Anda, untuk berjaga-jaga jika Anda membuat kesalahan dalam pengeditan template, Anda akan bisa memulihkannya dari cadangan.
4. Klik tab Edit HTML dan cari kode </ head> , untuk mempermudah tekan Ctrl+f
5. Salin kode dibawah  dan paste tepat di atas </ head> tag.

<!--Related Posts with thumbnails Scripts and Styles Start--> <b:if cond='data:blog.pageType == "item"'> <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, “Times New Roman”, 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> <!--Related Posts with thumbnails Scripts and Styles End-->

Setelah menambahkan kode diatas, kemudian gulir ke bawah dan cari <div class = 'post-footer'> Paste kode di bawah ini tepat di atasnya

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

Pengaturan :

maxresults = 5; untuk mengubah jumlah posting terkait.

" Related Post "; ubah judul widget ini, sesuai keinginan.

Simpan template dan periksa hasilnya.

Mudah-mudahan berhasil di blog Anda. Namun, jika Anda menghadapi kesulitan tentang menambahkan widget posting terkait, berbagi dengan saya di bagian kolom komentar.