Recent Posting

Related Post Thumbnails

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 == &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: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, 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 == &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><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=&quot;<data:post.url/>&quot;;
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="Related Posts";


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.... :)

45 comments:

Otto said...

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 said...

@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 said...

how about android template?

Cahaya Biru said...

@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 said...

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 said...

Thanks for the support, Cahaya!

Projeto 2042 said...

Hi I'm using the template Scarlett. Where I put the codes in step 6?

Cahaya Biru said...

@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 said...

@Mario; Yes, I can transform the Minto Zine into blogger. Don't worry... OK.

Projeto 2042 said...

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 said...

@Projeto; Have you checked the box, expand widget template???

Projeto 2042 said...

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 said...

nice information thanks

Cahaya Biru said...

@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 said...

I did exactly as you said. It did not work.
Its you test on Scarlett and see if it works there?
Thanks

Cahaya Biru said...

@Projeto; The Hack runs well in Scarlett. Please, see this page.

http://scarlett-cahayabiru.blogspot.com/ Click Here

ChoiBlog.TK said...

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 said...

@Choi; have you click the expand widget template???

gmovie said...

great tips.
i'm done whith my site, thanks
http://gbestmovie.blogspot.com

Cahaya Biru said...

@gmovie; You are welcome

Julianna Steffens said...

Cahaya can i use this on monezine template? where i put the code if can?

Mihai said...

it doesn' work
at step 5 I don't find anything

Cahaya Biru said...

@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 said...

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 said...

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 said...

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 said...

@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 said...

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 said...

@R.yadav; have check the expand widget template??

hacker said...

I want the bottom of articles that appear in the homepage How do I do?

Praveen Gampa said...

sorry cahaya i cant find singleinfo class or category class.Iam using scarlett template having image slider.
please assist me

kliparsivim said...

@ Cahaya Biru : when can you write about it ? I'm waiting :)

Cahaya Biru said...

@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 said...

hai i did not fin d the word <"head">

i find only this !<"/head">
pls tell

sanjeev said...

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 said...

doesn`t work

GreatMan said...

am using monezine template and its smoothly work on the site.. check out @ http://moviesite4u.blogspot.com.. tnx Cahaya Biru

More Power....

sahil said...

hi cahaya please tell me how to use this trick in Zinmag Chronicle template as am using that.

please tell

TycoBlogger said...

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 said...

coool

Aman S. Aneja said...

Coooolest!!


http://amanrulesit.blogspot.com

mahmud said...

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/

மணிபாரதி said...

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 said...

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 said...

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?

Post a Comment

Calculate Blog Weight


type your web or blog address (max 10)
 
(example: cahayabiru.com)  
 

Powered by iWEBTOOL


Return to Top