Cara Membuat Related Post With Thumbnail Di Blog

KUCOPAS - Cara Membuat Related Post With Thumbnail Di Blog. Setelah lama tidak update posting, sekarang saya akan posting lagi trik blog tentang Cara Membuat Related Post with Thumbnail di Blog atau cara membuat artikel terkait bergambar di bawah setiap postingan blog.

Mungkin sobat sudah pernah melihat dan bahkan sudah menerapkan atau memasangnya di blog sobat, namun seperti pengalaman saya yang sudah pernah memasang related post with thumbnail di bawah posting blog, berangsur-angsur akan hilang dan sudah tidak pernah muncul lagi related post with thumbnail di bawah posting blog. Penyebabnya adalah dikarenakan kode script related post sudah di hapus oleh sipembuat atau juga bisa dibanned, jadi ya mau tidak mau kode script yang kita pasang di blog kita juga tidak bisa berfungsi lagi dengan baik.

Kali ini saya punya solusinya untuk sobat semua, karena baru kemarin saya baru menggantinya dengan script yang baru dan saya terapkan pada artikel blog ini. Untuk melihat contohnya silahkan sobat lihat gambar screenshot di bawah ini.

Untuk Cara Membuat Related Post With Thumbnail Di Bawah Setiap Postingan Blog, silahkan sobat ikuti langkah-langkahnya sebagai berikut:

1. Silahkan Masuk >> Login ke akun blog sobat
2. Lalu klik Menu>> Template >> kemudian >> Edit HTML
3. Silahkan sobat cari kode </head> gunakan CTRL+F untuk mempercepat pencarian.
4. Setelah ketemu, kemudian sobat letakkan semua kode berikut tepat di atas atau sebelum kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start By KUCOPAS -->
<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:#00FF00;}
</style>
<script src='http://kucopas-js.googlecode.com/files/releatedimage.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End By KUCOPAS -->

5. Kalau sudah, masih dalam Edit HTML. Silahkan sobat cari kode yng berwarna biru berikut dibawah ini.

<div class='post-footer-line post-footer-line-1'> (Gunakan CTRL+F untuk mempermudah pencarian).

6. Kemudian sobat letakkan kode di bawah ini tepat di bawah atau sesudah kode <div class='post-footer-line post-footer-line-1'>

<!-- Related Posts with Thumbnails Code Start By KUCOPAS -->
<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=7;
var relatedpoststitle="Related Post";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End By KUCOPAS -->

7. Sebelum di simpan, silahkan sobat preview atau pratinjau terlebih dahulu.
8. Silahkan di SIMPAN atau Save, jika hasilnya sudah oke seperti yang sobat inginkan.
9. Selesai dan lihat hasilnya.

Keterangan:

• var maxresults=7; = angka 7 adalah related post yang akan di tampilkan, silahkan sobat ganti angkanya.
• background-color:#00FF00; = adalah warna Background bila tersentuh Mouse, silahkan sobat ganti kode warnanya seperti yang sobat iginkan.

Jika sobat sudah berhasil memasang Related Post with Thumbnail di bawah posting Blog, jangan lupa di Like yach... Bila sobat masih belum jelas, silahkan bertanya dan di comment postingan ini.