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.... :)
Otto
October 6, 2009 2:56 AM
Hello!
I 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!
Cahaya Biru
October 6, 2009 6:32 AM
@Otto; In Gamezine Template,
Find 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
Piratz
October 6, 2009 10:31 AM
how about android template?
Cahaya Biru
October 6, 2009 9:17 PM
@Piratz; Go to Edit HTML -- Expand Widget Template
Find this :
<div class='singleinfo'>
Paste the code in step 6 before that code above.
Mario Andrés Landeros
October 7, 2009 4:13 AM
Cahaya
Please 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.
Otto
October 7, 2009 8:06 AM
Thanks for the support, Cahaya!
Projeto 2042
October 7, 2009 1:42 PM
Hi I'm using the template Scarlett. Where I put the codes in step 6?
Cahaya Biru
October 7, 2009 9:57 PM
@Projeto2042;
The Answer is the same with my answer to Piratz.
Find this :
<div class='singleinfo'>
Paste the code in step 6 before that code above.
Cahaya Biru
October 7, 2009 10:11 PM
@Mario; Yes, I can transform the Minto Zine into blogger. Don't worry... OK.
Projeto 2042
October 8, 2009 5:08 AM
Hi Cahaya
I got one once, but now no longer appears. Can you see if I made any error?
http://projeto2042.blogspot.com/
Very Thanks!
Cahaya Biru
October 8, 2009 6:10 AM
@Projeto; Have you checked the box, expand widget template???
Projeto 2042
October 8, 2009 8:07 AM
Yes I did everything right. I put the codecs in places you say me.
when 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.
Kenali dan Kunjung Objek Wisata di Pandeglang
October 8, 2009 10:08 AM
nice information thanks
Cahaya Biru
October 8, 2009 9:39 PM
@projeto; please, do not copy on b:includable id=comment
Find this:
<div class='singleinfo'> <div class='category'>
paste the code in step 6 before that code above.
Projeto 2042
October 8, 2009 10:50 PM
I did exactly as you said. It did not work.
Its you test on Scarlett and see if it works there?
Thanks
Cahaya Biru
October 9, 2009 5:50 PM
@Projeto; The Hack runs well in Scarlett. Please, see this page.
http://scarlett-cahayabiru.blogspot.com/ Click Here
ChoiBlog.TK
October 13, 2009 4:16 PM
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
Cahaya Biru
October 14, 2009 11:00 PM
@Choi; have you click the expand widget template???
gmovie
October 14, 2009 11:38 PM
great tips.
i'm done whith my site, thanks
http://gbestmovie.blogspot.com
Cahaya Biru
October 17, 2009 12:47 AM
@gmovie; You are welcome
Julianna Steffens
November 1, 2009 1:36 AM
Cahaya can i use this on monezine template? where i put the code if can?
Mihai
November 3, 2009 4:59 AM
it doesn' work
at step 5 I don't find anything
Cahaya Biru
November 3, 2009 10:31 PM
@Julianna;
Go 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???
BernardC
November 8, 2009 4:45 PM
I try to edit on http://greenteamovie.blogspot.com. It is a Gamezine template.
I follow all the instruction but I can't save the template!!
Praveen Gampa
November 9, 2009 3:49 AM
hello cahaya!
I 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
kliparsivim
November 9, 2009 6:46 PM
hi ... 10x for sharing ..
can 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..
Cahaya Biru
November 11, 2009 8:14 PM
@Bernard C; Try it again carefully.
@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)
R.yadav
November 12, 2009 4:17 AM
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
pls
help me
Cahaya Biru
November 16, 2009 9:21 PM
@R.yadav; have check the expand widget template??
hacker
November 17, 2009 9:07 AM
I want the bottom of articles that appear in the homepage How do I do?
Praveen Gampa
November 17, 2009 11:51 AM
sorry cahaya i cant find singleinfo class or category class.Iam using scarlett template having image slider.
please assist me
kliparsivim
November 17, 2009 9:52 PM
@ Cahaya Biru : when can you write about it ? I'm waiting :)
Cahaya Biru
November 22, 2009 10:29 AM
@hacker; I can't get your point men..
@praveen; have click the expand widget template box???
@Kliparsivim; This week I am so busy... I still do not know
sarjune
November 28, 2009 12:20 PM
hai i did not fin d the word <"head">
i find only this !<"/head">
pls tell
sanjeev
January 15, 2010 2:35 AM
I try to edit on http://royalenfieldmotorcycles.blogspot.com/. It is a Gamezine template.
I followed all the instruction but I was unable to save the template!!badly need ur help man...........
http://royalenfieldmotorcycles.blogspot.com/
Sharm
January 22, 2010 5:34 AM
doesn`t work
GreatMan
February 11, 2010 2:16 AM
am using monezine template and its smoothly work on the site.. check out @ http://moviesite4u.blogspot.com.. tnx Cahaya Biru
More Power....
sahil
February 11, 2010 10:28 AM
hi cahaya please tell me how to use this trick in Zinmag Chronicle template as am using that.
please tell
TycoBlogger
February 27, 2010 2:54 PM
hi cahaya... i think the right tag is </head> . Not <head>. Correct me if i'm wrong.
And guys, please click the permalink. U can compare it.
workshop-mobile
March 17, 2010 4:58 PM
coool
Aman S. Aneja
April 2, 2010 6:37 PM
Coooolest!!
http://amanrulesit.blogspot.com
mahmud
April 6, 2010 4:50 PM
just today I put related post code inside my blog. but its not work. Please check my blog and give me suggestion, whats my fault?
My blog: http://facezoomind.blogspot.com/
மணிபாரதி
June 25, 2010 2:05 AM
just today I put related post code inside my blog. but its not work. Please check my blog and give me suggestion, whats my fault?
www.ellameytamil.com
Sophia Koulbanis Artist / Designer
July 1, 2010 9:22 PM
Hi there I added the code but I want to show the the related posts on my main page not when I click into the story - like it is in link within. How do I get that o show?
Putera Bongsu
July 5, 2010 10:11 PM
template saya (Genesis) tiada
div class='post-footer-line post-footer-line-1
p class='post-footer-line post-footer-line-1
Jadi bagaimana?
saya cuba paste selepas body.blog juga tidak berjaya...
perlu diganti URL dalam code?