Cara Membuat Artikel Terkait Disertai Thumbnails Pada Blogspot

Blogspot Pemula sudah pernah Posting Artikel berjudul Cara Menampilkan Artikel Terkait di Blogspot, Sekarang Blogspot Pemula lanjutkan dengan Cara Membuat Artikel Terkait Disertai Thumbnails Pada Blogspot

Artikel terkait akan tampil dengan Thumbnails disertai Judul Postingan.

Cara Membuat Artikel Terkait Disertai Thumbnails Pada Blogspot :

1. Login ke Blogger.

2. Di halaman Dasbor, kita pilih Tata Letak.

3. Kemudian pilih Edit HTML

4. Beri tanda centang pada Expand Template Widget

5. Cari kode </head>

6. Copy paste Script berikut ini di atasnya

<!--Related Posts with thumbnails Scripts and Styles Start-->

<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:#d4eaf2;

}

</style>

<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>

</b:if>

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

7. Cari kode di bawah ini

<div class='post-footer-line post-footer-line-1'>

Atau jika tidak menemukannya cari kode berikut ini

<p class='post-footer-line post-footer-line-1'>

8. Jika sudah ketemu, taruh Copy Paste Script berikut ini di bawah salah satu kode di atas (no.7)

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

<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><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

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

9. Kita dapat menganti beberapa kode css, seperti berikut ini

var maxresults=5;

Berarti artikel terkait yang akan kita tampilkan adalah 5

var relatedpoststitle="Related Posts";

Judulnya adalah Related Posts

10. Simpan Template kemudian lihat hasilnya.

Demikian Postingan Cara Membuat Artikel Terkait Disertai Thumbnails Pada Blogspot

Semoga Manfaat.