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.... :)
20 comments:
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!
@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
how about android template?
@Piratz; Go to Edit HTML -- Expand Widget Template
Find this :
<div class='singleinfo'>
Paste the code in step 6 before that code above.
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.
Thanks for the support, Cahaya!
Hi I'm using the template Scarlett. Where I put the codes in step 6?
@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.
@Mario; Yes, I can transform the Minto Zine into blogger. Don't worry... OK.
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!
@Projeto; Have you checked the box, expand widget template???
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.
nice information thanks
@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.
I did exactly as you said. It did not work.
Its you test on Scarlett and see if it works there?
Thanks
@Projeto; The Hack runs well in Scarlett. Please, see this page.
http://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
@Choi; have you click the expand widget template???
great tips.
i'm done whith my site, thanks
http://gbestmovie.blogspot.com
@gmovie; You are welcome
Post a Comment