Cara memasang widget Related Post/artikel terkait dengan thumbnail di blog

Senin, 29 Agustus 2011

Sobat blogger bentar lagi kan lebaran saya punya tutorial baru nih tentang Widget "Artikel terkait" apa sih artikel terkait?.Artikel terkait adalah Daftar link yang berhubungan dengan sebuah artikel yang kita baca.Kalo masih bingung langsung aja praktekin,tapi sebelum itu kalian wajib follow blog saya dulu setelah itu kita mulai:


1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Pilih Edit html
4.Back up dulu templatenya biar kalo salah bisa dikembaliin backup dengan cara klik "Download template lengkap"
5.Kemudian centangExpand Template Widget
6.Kemudian cari kode </head> (agar lebih mudah mencarinya gunakan f3)
7.Letakkan kode berikut di atas kode </head>

<!--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='https://sites.google.com/site/webmiftah/js/relatedpostthumbnail.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

8.Kemudian cari kode <div class='post-footer-line post-footer-line-1'>  kalo gak ketemu jangan panik bisa car kode seperti ini <p class='post-footer-line post-footer-line-1'> 
9.Kalo udah ketemu salah satu letakkan kode dibawah ini di bawah kode yang anda barusan temukan:

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

10.Tinggal di Save deh

KETERANGAN:

-Ganti tulisan yang berwarna MERAH dengan kode wana sesuai kesukaanmu
-Ganti tulisan yang berwarna KUNING sesuai jumlah artikel terkait yang ingin anda munculkan
-Ganti tulisan yang berwarna  CYAN dengan Tulisan yang ingin anda tampilkan (judul) di atas related post

SELAMAT MENCOBA
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di webmiftah.blogspot.com

20 komentar:

  1. wahaha iya nih bagus juga ni caranya

    oiya jgn kunjungi balik http://si-gembel.blogspot.com/ :D

    BalasHapus
  2. mantap infonya gan ..
    aku barusan pake yang kayak gini ..

    wah, sering2 kunjung ke sini lah, maklum, saya masih baru d blogger ..

    BalasHapus
  3. @Andrie:makasih udah berkunjung ke blog ini

    BalasHapus
  4. saya masih ragu nih.kalau pakai thumbnail ntar blog saya tambah berat.kalau yang biasa aja ada nggak?nggak pakai thumb hanya tulisan aja

    BalasHapus
  5. @Ego Dafma Dasa:kalo menurut saya ini tidak terlalu memberatkan blog

    BalasHapus

Posting Komentar