Cara Membuat Related Posts Dengan Thumbnail

Cara Membuat Related Posts Dengan Thumbnail | Ghiyats Blogs - Salam Untuk Sobat semua.... Pada artikel yang akan saya bagikan ini, kita akan membahas tentang Related Posts atau Artikel Terkait, Artikel Terkait Berguna Untuk Membantu Pengunjung Untuk mencari artikel lain yang berhubungan dengan artikel tersebut, Artikel Terkait biasanya berada di bawah postingan blog.

Ada yang berbentuk daftar atau pun Thumbnail, Akan saya bagikan ini berbentuk Thumbnail dan keunggulan widget ini adalah di sedia gambar bentuk yang menarik, Langsung saja kita coba membuatnya, Tutorialnya seperti dibawah ini :

• Pertama Kita login ke blogger
• Terus, Pergi menu ''Template''
• Klik ''Edit HTML''
• Setelah itu, cari kode </head> Setekah ketemu masukan kode dibawah ini di atas / sebelum kode tersebut

<!--Related Posts with thumbnails Start-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

#related-posts {

float:center;

height:100%;

min-height:100%;

padding-top:10px;

padding-left:15px;

padding-right:15px;

}

#related-posts h2{

font-size: 1.3em;

color: black;

font-family: Arial;

margin-bottom: 0.75em;

}

#related-posts a{

color:black;

}

#related-posts a:hover {

background-color:#eeeeee;

}

</style>

<script type='text/javascript'>

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNNsd0wnh9uOhwxWQ0N1qVf7f1xpLFxvQ7Ong57hTRJ3QnZS_0mMcd2OOb4qfKVLoCM7Ey-_N_AdQCS57FtJhzsOJoh0WjHE-u7Nw5e8fmYMd5CG5LIlz-LAKfCoT-ntiE29NrGTsAf-fn/";

var maxresults=5;

var splittercolor="#cccccc";

var relatedpoststitle="Related post";

</script>

</b:if>

<!--Related Posts with thumbnails End-->

• Terus cari lagi kode, <p class='post-footer-line post-footer-line-1'/> atau post-footer-line,Setelah ketemu COPY kode dibawah ini diatas salah satu kode diatas

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

<!-- Related Posts with Thumbnails Code End-->

• Setelah Klik ''Simpan'' 

CATATAN :

• Ganti Tulisan Related post Dengan tulisan yang anda suka
• Ganti juga 5 untuk mengatur jumlah artikel terkaitnya

Demikianlah artikel ini, Terima kasih sudah membaca artikel diatas, dan kalau anda punya kesulitan tentang artikel diatas, silakan berkomentar di bawah ini, Trima Kasih...

Via : Blogger Trix