Mohon Kritik dan Sarannya Untuk Kemajuan Blog Ini

Membuat Artikel Terkait Atau Related Posts Disertai Dengan Thumbnails Pada Blogspot

Mungkin sahabat blogger semua bertanya, bagaimana ya caranya membuat artikel terkait atau populer disebut dengan related posts. Nah, pada kesempatan kali ini saya akan membahas cara Membuat Artikel Terkait Atau Related Posts Disertai Dengan Thumbnails Pada Blogspot.

Saya akan membahas secara detail step demi step.


Oke, Langsung saja, cara membuat Related post pada blog ini kita bahas.

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. Taruh (copy paste) kode 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 Atau

<div class='post-footer-line post-footer-line-1'>
Jika tidak menemukannya cari kode berikut ini

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




8. Jika sudah ketemu, taruh (copy paste) kode 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 juga 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 jika sudah selesai.
Share this article on :

1 komentar:

Dode-XP mengatakan...

Tips yang bermanfaat gan :)

salam kenal ya :)

visitback + komentback ya gan :)

Posting Komentar

Terima kasih sahabat-sahabat blogger sudah menyempatkan diri untuk berkunjung di blog saya.

Silahkan sahabat-sahabat tinggalkan jejak pada kotak komentar di bawah ini.

Jadilah Komentator yang baik.

Komentar yang mengandung spam akan saya hapus.

Terima Kasih Atas Kunjungan Anda
 
© Copyright 2010-2011 D i t h a All Rights Reserved.
Template Design by Ditha | Published by Ditha Templates | Powered by Dithaisper.blogspot.com.