This article explains about how to make Related Post with Picture Thumbnails style. (Credit to Aneesh)
The demo of this hack is installed in this site... Please see below this article
STEP BY STEP TO INSTALL THIS TRICK
1. Sign In To Blogger
2. Go to LAYOUT -- Edit HTML -- Checked the box, expand widget templates
3. Find this
</head>
4. After that, Replace that code with this :
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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-->
</head>
<b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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-->
</head>
5. Find this :
<div class='post-footer-line post-footer-line-1'>
If you did not find it, please find this code :
<p class='post-footer-line post-footer-line-1'>
6. Copy paste the code, below, under <p class='post-footer-line post-footer-line-1'> or <div class='post-footer-line post-footer-line-1'>
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.cahayabiru.com/2009/10/related-post-thumbnails.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.cahayabiru.com/' style='display:none;'>Blogger Templates</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbsundefined);
printRelatedLabels_thumbsundefined);
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.cahayabiru.com/2009/10/related-post-thumbnails.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.cahayabiru.com/' style='display:none;'>Blogger Templates</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbsundefined);
printRelatedLabels_thumbsundefined);
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Save Your Templates
NOTE :
After you save your templates, you may adjust how many thumbnail link will be shown to your reader. Please find this :
var maxresults=5;
The Number "5" is relating with how many relating post will be seen to your readers. You could change the number with any number that you want.
You could change the Title also. Please, find this:
var relatedpoststitle="";
The words "Related Posts" is relating with the title. Please do not delete the quote symbol. You may delete only the word -- Related Posts
Ok, Everything is done. If you like my works and articles, you could subscribe in my feed form in right sidebar of this site.
Ok, Have a nice blogging.... :)
39 Responses to Related Post Thumbnails
Hello!
October 6, 2009 2:56 AMI use your converted Gamezine White and it doesnt have any "post-footer" on the HTML code. What should I do? This hack is particulary very interesting.
Thanks!
@Otto; In Gamezine Template,
October 6, 2009 6:32 AMFind This Code :
<div class='spostinfo'>
Jump to the Number 6 steps. Copy-Paste the code, in step 6, above that code....
Remember...., above that code....
OK .... Have a nice blogging
how about android template?
October 6, 2009 10:31 AM@Piratz; Go to Edit HTML -- Expand Widget Template
October 6, 2009 9:17 PMFind this :
<div class='singleinfo'>
Paste the code in step 6 before that code above.
Cahaya
October 7, 2009 4:13 AMPlease tell me that you can transform to blogger the mintozine template for WP. http://www.jinsonathemes.com/demo/?themedemo=mintozine
I´m looking forward to see it.
You do a great job.
Thanks for the support, Cahaya!
October 7, 2009 8:06 AMHi I'm using the template Scarlett. Where I put the codes in step 6?
October 7, 2009 1:42 PM@Projeto2042;
October 7, 2009 9:57 PMThe Answer is the same with my answer to Piratz.
Find this :
<div class='singleinfo'>
Paste the code in step 6 before that code above.
@Mario; Yes, I can transform the Minto Zine into blogger. Don't worry... OK.
October 7, 2009 10:11 PMHi Cahaya
October 8, 2009 5:08 AMI got one once, but now no longer appears. Can you see if I made any error?
http://projeto2042.blogspot.com/
Very Thanks!
@Projeto; Have you checked the box, expand widget template???
October 8, 2009 6:10 AMYes I did everything right. I put the codecs in places you say me.
October 8, 2009 8:07 AMwhen work was put on (b:includable id='comments' var='post')
It was the only place that worked, but now does not work in some local.
nice information thanks
October 8, 2009 10:08 AM@projeto; please, do not copy on b:includable id=comment
October 8, 2009 9:39 PMFind this:
<div class='singleinfo'> <div class='category'>
paste the code in step 6 before that code above.
I did exactly as you said. It did not work.
October 8, 2009 10:50 PMIts you test on Scarlett and see if it works there?
Thanks
@Projeto; The Hack runs well in Scarlett. Please, see this page.
October 9, 2009 5:50 PMhttp://scarlett-cahayabiru.blogspot.com/ Click Here
I want to follow your instructions! but can not find the appropriate code in all instructions, and you see his blog for instructions regarding post to help her complete with? thanks
October 13, 2009 4:16 PM@Choi; have you click the expand widget template???
October 14, 2009 11:00 PMgreat tips.
October 14, 2009 11:38 PMi'm done whith my site, thanks
http://gbestmovie.blogspot.com
@gmovie; You are welcome
October 17, 2009 12:47 AMCahaya can i use this on monezine template? where i put the code if can?
November 1, 2009 1:36 AMit doesn' work
November 3, 2009 4:59 AMat step 5 I don't find anything
@Julianna;
November 3, 2009 10:31 PMGo to LAYOUT -- Edit HTML -- then expand the widget template
Find this tag
<div class='singleinfo'>
<div class='category'>
paste the code in step no 6 above the
<div class='singleinfo'>
After that, save your templates.
@Mihai; What template do you use???
I try to edit on http://greenteamovie.blogspot.com. It is a Gamezine template.
November 8, 2009 4:45 PMI follow all the instruction but I can't save the template!!
hello cahaya!
November 9, 2009 3:49 AMI am using scarlett template can i know where i have to post the footer part.I cant find either of them u specified i.e., div class or p class can you help me in this regard.I will be very much thank ful to you
hi ... 10x for sharing ..
November 9, 2009 6:46 PMcan you tell me that how you can transform WP themes to blogger ?
and one more question ! do you think which template i should use for adsense gain ? :)
10x again..
@Bernard C; Try it again carefully.
November 11, 2009 8:14 PM@Praven; please, read my comments before. It does not have any different with monezine. Ok. :)
@Kliparsivim; I 'll consider writing about it. OK...:).
Adsense gain template? Please try monezine (full versions)
i follow all the instruction which u r write here but sill related post is not appearing in my testing blog. i m using old gamzine templete
November 12, 2009 4:17 AMpls
help me
@R.yadav; have check the expand widget template??
November 16, 2009 9:21 PMI want the bottom of articles that appear in the homepage How do I do?
November 17, 2009 9:07 AMsorry cahaya i cant find singleinfo class or category class.Iam using scarlett template having image slider.
November 17, 2009 11:51 AMplease assist me
@ Cahaya Biru : when can you write about it ? I'm waiting :)
November 17, 2009 9:52 PM@hacker; I can't get your point men..
November 22, 2009 10:29 AM@praveen; have click the expand widget template box???
@Kliparsivim; This week I am so busy... I still do not know
hai i did not fin d the word <"head">
November 28, 2009 12:20 PMi find only this !<"/head">
pls tell
I try to edit on http://royalenfieldmotorcycles.blogspot.com/. It is a Gamezine template.
January 15, 2010 2:35 AMI followed all the instruction but I was unable to save the template!!badly need ur help man...........
http://royalenfieldmotorcycles.blogspot.com/
doesn`t work
January 22, 2010 5:34 AMam using monezine template and its smoothly work on the site.. check out @ http://moviesite4u.blogspot.com.. tnx Cahaya Biru
February 11, 2010 2:16 AMMore Power....
hi cahaya please tell me how to use this trick in Zinmag Chronicle template as am using that.
February 11, 2010 10:28 AMplease tell
hi cahaya... i think the right tag is </head> . Not <head>. Correct me if i'm wrong.
February 27, 2010 2:54 PMAnd guys, please click the permalink. U can compare it.