Cara membuat Related Post with Thumbnail di bawah Setiap postingan Blog

 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 Dengan Gambar 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. mungkin karena apa saya juga tidak tahu, tapi mungkin karena yang pertama membuat script Related Post with Thumbnail di bawah posting Blog sudah di hapus, jadi ya mau tidak mau script yang kita pasang di blog kita juga jadi tidak bisa berfungsi lagi.

 Kali ini saya punya solusinya untuk sobat semua, karena baru kemarin saya baru menggantinya dengan script yang baru dan saya terapkan pada blog ini. Untuk melihat contohnya silahkan sobat lihat di bawah postingan ini akan muncul Related Post with Thumbnail di bawah posting Blog.

 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 >> Lanjutkan.
3. Centang >> Expand Template Widget
4. Lalu sobat >> Unduh template lengkap >> Demi untuk menghindari kesalahan saat pengeditan Template.
5. Silahkan sobat Cari kode </head> gunakan CTRL+F untuk mempercepat pencarian.
6. 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.googlecode.com/files/releatedimage.js' type='text/javascript'/>

</b:if>

<!--Related Posts with thumbnails Scripts and Styles End By KUCOPAS -->

7. Kalau sudah, Masih dalam Edit HTML. Silahkan sobat cari kode berikut:

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

8. 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 -->

9. Sebelum di simpan, silahkan sobat preview atau pratinjau terlebih dahulu.
10. Silahkan di SIMPAN atau Save, jika hasilnya sudah oke.
11. Simpan 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.
Semoga artikel Cara Membuat Related Post with Thumbnail di bawah posting Blog, sangat bermanfaat untuk sobat KUCOPAS semua.

---

| Supported by http://kuc0pas.blogspot.com |

---