Related Posts Blogger with Thumbnails

Cara membuat Related Posts Blogger with Thumbnails sebenarnya memang mirip relate post cuma disertai dengan image postingan dan tentunya akan membuat tampilan template blog kita tambah profesional dan keren.

langkah -langkah membuat Related Posts Blogger with Thumbnails adalah:

1.Masuk Layout > Edit HTML dan centang "Expand Widget Templates"
2.cari kode:

</head>

3.kemudian ganti kode  </head> dengan kode dibawah ini

Related Posts Blogger with Thumbnails:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmbdSWV4jANX4c-FPfWTW8lphBRQAIGcTKCs5hAbP58eHpVgZtWNP6m-mZBNSh_r51RwMK2cDuxFcjHNN6R4m8dfQbSfPoSTUXRkRSxLVdKAJqpEw7xQPlZXlPnJp0bc5CHnAYJDtjGyI/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

4.Sekarang cari kode

<div class='post-footer-line post-footer-line-1'> kalo tidak ketemu kita juga bisa coba yang ini <p class='post-footer-line post-footer-line-1'>

langkah selanjutnya masukan kode di bawah ini tepat di bawah kode diatas.

Related Posts Blogger with Thumbnails :

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

selamat mencoba

Related Post