Automatic Post Summaries for Blogger with Thumbnails


Wordpress users might have seen the wordpress excerpt thing, which displays a summary of your post. Now we have something similar for blogger.Actually i should say it is really amazing..This hack will automatically create post summaries with thumbnails.. you needn't need to add any extra code in every blogpost that you make..These summaries will be displayed on all pages other than the post page..Here in my blog i am using a modded version of the same which displays summaries on pages other than the post page and homepage.Check out some of my labels to see the hack in action..

First of all, this hack was developed by Blogger Sphera . I will try to explain his hack to you guys..

First of all Edit your blogger template

Find this code
</head>

and replace it with
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://blogergadgets.googlecode.com/files/excerpt.js' type='text/javascript'/>
</head>


Off course you can edit these parameters..
Now Find
<data:post.body/>


Replace it with

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span>
</b:if>
</b:if>


And you are done.. now you should have the post summaries on your homepage,search results,archive and label pages..
81 comments: Add Comment
alok said...

there is some code errors i guess

Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: The element type "b:if" must be terminated by the matching end-tag "".

if tried it three times same message was return are codes right??

Aneesh said...

thanks for notifying.. there was an extra </span> tag.
my bad... fixed it now..

Handi Priyono (Handz_Mentallist) said...

hy,thanksfor you useful posting!

Shubham NeO ©® said...

Now here is the real ques, I saw the hack on other sites regrading the expandable post summary and implemented this, but the real problem ( for which I was unable to find a solution ) was with my feeds. Can I implement the same outlook of expandable post summaries with image thumbnail on my feeds? I use feedburner and although it has option of summary burner, it truncates all images, and does not allow HTML.

Any work around for this would be just out of this world. Thanx. Love your blog.

Aneesh said...

it cant be easily done.. But surely it can be done...
I have a complicated idea to implement it..
Blogger has the media rss thing integrated into its feeds.so actually image thumnail urls of size 72 x 72 are present in the actual blogger feed.. i mean (atmom.xml?redirect=flase or rss.xml?redirect=false) So just make a php script to download the blogger feed and extract data and media thumbnails from your actual feed and burn this new feed..Make the php script generate a summary and make a new feed with thumbnail and post summaries.. The only thing you should take care is that the place you host the feed script should be reliable..

widgetblogger.co.cc said...

Excellent post dude

alok said...

well blogger is planning to introduce this feature in blogger in draft soon

Aneesh said...

@alok .. yea there are now some new codes appearing in blogger.. so we can be sure that this will be soon coming to blogger...

Alok said...

hey aneesh my zodiac sign is also piceses well how can i contact you???

Aneesh said...

you can contact me using the contact form here or @ k_j_aneesh[at]yahoo.co.in :)

Alok said...

@Aneesh

also i have planned to move to wordpress your views on this???

Aneesh said...

@alok if you are ok with editing up php templates and doing seo work on yourselves.. then you can opt for wordpress..blogger automatically does these tasks for you.. if you are having an established website move without loosing your current permalinks..

Shubham NeO ©® said...

Thanx Aneesh for the idea, but would feedburner allow me a customized feed using PHP script. A complete post of this solution is welcomed :) Thanx !

Makwarro said...

Work's Perfect

thank'x alot looking for long time A++

vlogra.blogspot.com

Ikah said...

hey man. it works wonderfully so thanks! but there's a teeny problem though. my header title disappears once you click read more. do u have any solutions for this?

Aneesh said...

@Ikah can i see your blog.. gimme ur url..

Ikah said...

wokay --> tubbyfeet.blogspot.com

Ikah said...

oh wait! i solved it already. turns out it has nothing to do with this new code! sorry! and thanks once again :D

MPC said...

How do you customize the font and font size using this hack. Thanks!

LaTease "Teasas Tips" said...

thank you so much for your help. my blog looks so much nicer now.

admin said...

I need your help plz.

I need a search code that will be only responsive to the exact full levels syntext.
that is it will only search the labels and when it find the exact match only than it shows the related posts.
waiting for your reply

Kannan said...

how to configure this option into Aspire template for blogspot.com

Shankar said...

hey still there is a problem.. it shows some codes....

Online Printing Company said...

Hey, thanks for sharing this! I'd tweak my Blogger later using this... :D

Rural Rambler said...

i tried this, the thumbnails work but the "read more" part is not showing up in a widget i use to embed my blog in my website , if you visit http://www.ruralaction.org you can see the widget, and see that it is not showing up, how can i get the post summary to show a "read more" link to the rest of the post?

Aneesh said...

yours is not a blogger blog.. And i don't see any embedding of a blogger blog in your website.. can you be more specific..

UPrinting said...

Oh cool! Is this like the LJ cut or the summary view for Multiply? That's great. I might actually try this one out for my blog. Thanks for sharing. :)

TRuC said...

Nice work!

In summary mode, the link "read more" is spelled "reade more"

Thanks

Aneesh said...

@TRuc thanks a bunch for notifying me.. i have corrected it..

i make alot of typos. :(

TRuC said...

Thanks for posting Aneesh, most reliable and easy summary hack I've found.

Siim said...

Excellent post, but just few clarifications, because I'm pretty new to blogging stuff still. When I'd use that hack, how exactly should I count words etc? I mean, what's the exact amount of words/letters I can use before this code's going to cut me off? Thanks again.

Aneesh said...

summary_noimg = 230;
summary_img = 140;

these 2 lines define the cut off..
If you dont have an image in the post, the number of character that would be displayed will be 230.If it has image,then it would be 140.You can edit these two variable to deine your own cut off..

krease said...

amazing dude looks really good check it out on my blog

http://playstationbloggeruk.blogspot.com/

SuperSawsaw said...

I like to use this but I have reservations on offsite javascript. If your site goes down, so is my blog.

philphil said...

hi,
how about the youtube video, i found that the video don't have thumbnails in the blog after the post summeraries

Anonymous said...

That is pretty amazing, nice work.

fiaso said...

I'm exhausted...I tried several times. For some reason it works in my test blog with the same template but in my real blog although it looks ok when you click the read more link nothing happens (!!). I deleted all the widgets and did everything from the beginning but something else is wrong. Please help..
My blog ---> http://www.cockasnook.blogspot.com/

Cid Evil said...

I really liked this it helped out alot and was exactly what I was looking for

fiaso said...

IF THE CODE DOESN'T WORK PROPERLY CHECK YOUR SETTINGS> ARCHIVING>ENABLE POST PAGES>YES

:)Works great

gastedmyflabbers said...

I am loving this! Thank you - worked perfectly as implemented by one who knows just enough to be dangerous!

Excellent instructions.
Bravo!

amigodcristo said...

Hi Aneesh!
first of all i wish you all the best!
well, once i was wondering to get this hack from ,blogsfera, but theres was the problem,, every post, was need to add an extra code, so i give it up,
as allways i like to visit your page, because you allwyas try you best very hard to make the thing symple for us.. i find it today in ur blog ,thanks to Aneesh,! but i have one question. that hack only will work after the next posts?
and after it work will aply for the olderst pos aswell or not ?
sorry about my bad inglish ,,i hoppe u understand.. thanks i will pop in later.. you are the best Aneesh!!

Aneesh said...

@amigodcristo thannks for the appreciation!
this will work for all posts on your blog(older and newer)

amigodcristo said...

Hi Aneesh!
i hoppe you are ok!!
thakns for reply,, you all ways so kind!
I got it in there, its realye wicked..
once more , thak you very much for that one !!
yours tutorial allways symple to understend,,
GOD bless you friend!!

Brad Hill said...

I have a static home page. How can I use this hack but only for label and archive pages? Great blog.

Aneesh said...

refer http://www.bloggerplugins.org/2009/06/selective-display-of-blogger-widgets-on.html

and use appropriate b:if conditions..

RAZOR said...

only working in home page, fails every wer else...pls check the code once pplzzzzz

Aneesh said...

@RAZOR,
show me your url.. the same thing is working on my blog and on many of my readers.. :)

السرداب said...

Thank you very much

http://asirdabe.blogspot.com/

Bilal said...

Thank you so so much.
It worked for me.

Lyes said...

Thanks for the hack. It worked for me, but in my blog, i have some jS embded vidéo that dont appear and other JS (no vidéo) you can see the code, can this problem be solved pLz

Ruchira said...

i cant find a tag
(data:post.body) in my blog template :(

Aneesh said...

@Ruchira ,
expand the widget templates..
by the way you can also use the new post summaries from blogger.

Zac Bentz said...

Hello Aneesh,

I was able to get this to work just fine on my blog, but before I use it, I have two questions:

- Is it possible to get a modification to scale the thumbnail image by a percentage instead of static pixel size? Like make the thumbnail scale to 25% instead of 100x100 pixels?

- Is it possible to make the text summary preserve text formatting? Specifically line breaks/returns, but also links? Basically I would like to keep the text looking exactly the same as in the full post.

Thanks!

Noriko &amp; Aaron Evans said...

ok, you use the word "thumbnails" but it's actually only a singular thumbnail.

is there any way to take ALL of the images, thumbnail them all at the bottom of the summarized text? This draws readers in. A lot of blogs (celeb gossip blogs for example) use this method and I cant' find any way to do it automatically...

please help.

Zaivest said...

THANK YOU exactly what I have been trying to figure out on my own for 2 days! Thank

tappanom.blog said...

thx very much

Thomas said...

There is one major drawback when using this hack. You create duplicate content according to what I see. If you disable java and refresh page, you will see entire post on both homepage and on direct link of the post. Am I right? If you tell me I am wrong, than I will gladly use this hack.

MayPay said...

for my site it shows the whole post :(

The Kosmo Blog said...

Hi there! I've tried over and over again to get this to work on a my template --> thekosmoblog.blogspot.com. It doesn't give me any kind of error, it just doesn't work. Any suggestions? My mail is kosmoblog@gmail.com. Thx!

vne said...

thanks for this! its working on my blog

Gina said...

Hi Aneesh, this script is great and I've got it up and running, I am wondering though, if it's possible to make it so that the post footer doesn't show up in the summary? I had an add this button for my post pages and had to remove it because the script shows it as part of the summary. My labels show up as well... any ideas as to what I may have done wrong?

Sary said...

Hi Aneesh, It is ok to fix but suddently I won't work for my blog. I don't know why because it's never mention code is error or can not pharse. The main thing is code already in and use the method you gave me. I won't appear read more with thumnail view. Please check it out for me.

http://creativelayer.blogspot.com

Waiting for you with your soonest.

Kamalika said...

Hi,I don't know how to thank you. From last couple of days i just gone mad surfing and experimenting with the readmore thumbnail code. Nothing was working atall. And those which are working they are not after my mind...but yours one wrokes perfectly superb...thanks a lot once again ..pls do visit my blog....i will surely put a reference in my blog....thanks again...
my blog- http://silencesings.blogspot.com/

Hayri said...

thank you for the post. i want to ask how can i put the picture to center and text to the bottom of the summary?

rufflemedia said...

Hi Aneesh
Can you help me with my problem...
Once I've implemented your automatic post summary code, how do I then add numbered pages to my blog? Do the two codes conflict? I've tried many times and numbered pages just won't show up whilst I have automatic post summaries added!
Thanks so much
Ruth

Andrew said...

Copied your code exactly but says there is a code era? Any thoughts? thanks

waya narmana said...

Good post, i will try it!!!!!!!!

Article Submission Master said...

I found Javascript code on your "summary code". Is this good for SEO or not?

software 45 said...

I have a problem use this widget, if i make a personal page in blogger, this widget work but my post can't full dispay. Can you help me about this problem?

Rio said...

Thank's for useful info..

sanjeev khatoi said...

Hi Aneesh, i'm using gamezine template...and unable to remove read more Automatic Read More Hack from Static Page in Blogger!! please help...

my blog url- www.royalenfieldmotorcycles.co.cc

Waleed Ahsan said...

Anesh I Hav become a bIg fan of U , ur D running d beest blog

Soz said...

good info
thanx dude

gb said...

hello

I have implemented it. but i have a very little problem. i am not getting the content justified in the post. please help. i will be waiting for your reply.

admin@ehubonline.com

r11guiutz said...

how to integrate this in show post for a specific label>

Meletao_Sosta@windowslive.com said...

I cannot find the code to replace it. I searched with the Ctrl F buttons. NOTHING. What can I do? no summaries of my posts are created.

Queer English said...

You're a genius! Look at what you've done to my blog. I love it!

http://queerenglish.blogspot.com

David Mirov said...

Really good information, thank you for that.

if you want check my new blog .. just recently started it .. I will appreciate ideas for it!!

http://things2dobeforedie.blogspot.com

maishee said...

i have a problem with the second code,i got this error " Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "span" must be terminated by the matching end-tag "".

David Aragon™ said...

It's a great hack. But there's an annoying problem I've been facing latley. The ellipsis "..." after the excerpts is not showing on this blog I made:

http://www.caminhocerto.com.br/

I think there's some conflict between my scripts. Do you have any ideas on how to solve that Aneesh?

Thanks!

maishee said...

great post :)! i figured it out already

Post a Comment

Please don't spam on here..