Find info about electronics prices, discounts, top deals in link, like US below.

Add related post with thumbnail in blogger


related-posts-thumbnail
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 by: Zein Okeh Share Everything, Updated at: Monday, October 03, 2011

4 komentar:

economic said...

good tutorial for blog with ficture inside the post.

Resep Rahasia Ibu said...

thanks for this trick!

#JK said...

How to copy this code???

I am copies it only:

Read more at: http://new-ones.blogspot.com/2011/10/add-related-post-with-thumbnail-in.html
Copyright : new-ones.blogspot.com | Under creative Common Share Alike Atribution

Zein Okeh said...

just copi like and remove Read more at: http://new-ones.blogspot.com/2011/10/add-related-post-with-thumbnail-in.html Copyright : new-ones.blogspot.com | Under creative Common Share Alike Atribution

Post a Comment

Sorry if my english is bad

Related Posts Plugin for WordPress, Blogger...
Powered by Blogger.