New !! Cara Membuat Related Post Keren Dengan Tampilan Image

Lanjutan dari Cara Membuat Related Post (artikel Yang Berkaitan),dengan Scroll, Dan Menampilkan Related Post Dengan Thumbnails  JQuery, Ternyata ada juga cara membuat Related post yang lebih keren dengan tampilan Image Postiingannya,

 

Mau ?! langsung aja Langkah pertama seperti biasa masuk blog, jangan ketuk pintu dan teriakan salam, kalo gak ada yg ngejawab langsung saja masuk ruangan edit HTML, jangan lupa centang Expand Widget Templete.
Kemudian cari Code </head>, lalu letakan kode berikut sebelum Code </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=’http://blogergadgets.googlecode.com/files/relatedthumbs21.js’ type=’text/javascript’/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Kemudian cari code <div class=’post-footer-line post-footer-line-1’>
Masukan code 2, dibawah code <div class=’post-footer-line post-footer-line-1’>

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

Finish n Selamat Mencoba dan Juga jangan Lupa Meninggalkan jejak dengan Komentar ya !!!

New !! Cara Membuat Related Post Keren Dengan Tampilan Image 9 out of 10 based on 10 ratings. 9 user reviews.