Add related post with thumbnail in blogger

Lots of models related post, like the related post standard model, related post scroll function etc. Similarly to the related post on this one the thumbnail related post, called thumbnails related post because it looks quite interesting with a picture or thumbnail. So it will look more attractive and is one way to beautify our blog.


If interested in making a related post with thumbnail, the steps are as follows:

1.Log in to blogger.com which your account.
2.Click The design of the dashboard menu
3.Click Edit HTML, do not forget to check the "Expand Widget Templates"
4.Then find the following code </head>
5.Put this code below before the code:

<!--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: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}

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

6. Then find the code below :

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

If you do not find the code above, try to find the code like this :

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

If you have found, enter all the code below under one of the above code found.

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

7. The final step Save Template and then see the results.

Note: The red code can be replaced in accordance with you want,
#585858 (background code), figure 5 shows the number of articles that appear on the related post, Related Posts (The title is desired).

sources code :http://nobinoku.blogspot.com/2011/02/membuat-related-post-bergambar-atau.html

Description: Add related post with thumbnail in blogger Rating: 4.5 Reviewer: Zein Okeh - ItemReviewed: Add related post with thumbnail in blogger

Posted in: Blog Tips,Internet,Tips and Trick,Tutorial