Widget Entri Terkait Thumbnails Horisontal

Blogger yang kreatif tidak mengandalkan widget pihak ke 3 seperti saya. heheheh namun lebih cenderung dengan membuat  widget sendiri. Ini tidak menggunakan Widget otomatis seperti dari LinkWithin, ternyata Widget artikel terkait LinkWithin tersebut Redirect terlebih dahulu dari situs LinkWithin sebelum di arahkan ke artikel kita lainnya, dan lebih kacau lagi Link tersebut nempel di blog kita DOFOLLOW, pasti cukup berpengaruh pada blog. Mari kita bikin widget sendiri saja. Mau lihat contohnya dulu klik disini

Membuat Artikel Terkait Horizontal dengan Thumbnail. Disini kita hanya memerlukan sedikit langkah otak-atik HTML namun alangkah baiknya jika sebelumnya anda beckup dulu templatenya buat jaga-jaga.

1. Jelas login ke blog
2. Rancangan - Edit HTML
3. Centang "Expand Template Widget"
4. Cari kode <data:post.body/> agar lebih mudah gunakan CTRL+F
5. Copy kode berikut tepat di bawah <data:post.body/>

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove -->
<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=7&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 cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

6. Kalau sudah cari lagi kode </head>
7. Copy kode berikut tepat diatas kode </head>,

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove -->
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}


#related-posts h4{
font-weight: bold;
color: black;
font:normal 14px Arial;text-transform:none;
margin:0px;letter-spacing:.01em;line-height: 1.2em;color:#666;
}
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 type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoUlBstO0FlV_iJs5vTCoOi8pFK5BK3g8WT5bJDhskB6kwRXeMzRI1X1n2VQjGsTOjsY3MLowQBl72g0Kbz8BgnKooBr6j8KsxKZr4L3BaO4yCTVZRcFmPiMUdmsIDT09AuebpeDKPtH8/s400/noimage.png&quot;;
var maxresults=7;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Artikel Lainnya:&quot;;
</script>
<script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove -->
<!--Related Posts with thumbnails Scripts and Styles End-->

Anda ganti sesuai keinginan anda tulisan berikut : Artikel Lainnya : Judul pada widget, var maxresults=7: Jumlah artikel yang di tampilkan. Terakhir simpan/save dan lihat hasilnya.



Pasang IKLAN dan Dapatkan Uang dari Website atau Blog anda dengan BidVertiser