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 = "float" ;
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>
var thumbnail_mode = "float" ;
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 == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.canonicalUrl' 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..

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??
thanks for notifying.. there was an extra </span> tag.
my bad... fixed it now..
hy,thanksfor you useful posting!
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.
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..
Excellent post dude
well blogger is planning to introduce this feature in blogger in draft soon
@alok .. yea there are now some new codes appearing in blogger.. so we can be sure that this will be soon coming to blogger...
hey aneesh my zodiac sign is also piceses well how can i contact you???
you can contact me using the contact form here or @ k_j_aneesh[at]yahoo.co.in :)
@Aneesh
also i have planned to move to wordpress your views on this???
@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..
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 !
Work's Perfect
thank'x alot looking for long time A++
vlogra.blogspot.com
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?
@Ikah can i see your blog.. gimme ur url..
wokay --> tubbyfeet.blogspot.com
oh wait! i solved it already. turns out it has nothing to do with this new code! sorry! and thanks once again :D
How do you customize the font and font size using this hack. Thanks!
thank you so much for your help. my blog looks so much nicer now.
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
how to configure this option into Aspire template for blogspot.com
hey still there is a problem.. it shows some codes....
Hey, thanks for sharing this! I'd tweak my Blogger later using this... :D
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?
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..
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. :)
Nice work!
In summary mode, the link "read more" is spelled "reade more"
Thanks
@TRuc thanks a bunch for notifying me.. i have corrected it..
i make alot of typos. :(
Thanks for posting Aneesh, most reliable and easy summary hack I've found.
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.
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..
amazing dude looks really good check it out on my blog
http://playstationbloggeruk.blogspot.com/
I like to use this but I have reservations on offsite javascript. If your site goes down, so is my blog.
hi,
how about the youtube video, i found that the video don't have thumbnails in the blog after the post summeraries
That is pretty amazing, nice work.
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/
I really liked this it helped out alot and was exactly what I was looking for
IF THE CODE DOESN'T WORK PROPERLY CHECK YOUR SETTINGS> ARCHIVING>ENABLE POST PAGES>YES
:)Works great
I am loving this! Thank you - worked perfectly as implemented by one who knows just enough to be dangerous!
Excellent instructions.
Bravo!
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!!
@amigodcristo thannks for the appreciation!
this will work for all posts on your blog(older and newer)
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!!
I have a static home page. How can I use this hack but only for label and archive pages? Great blog.
refer http://www.bloggerplugins.org/2009/06/selective-display-of-blogger-widgets-on.html
and use appropriate b:if conditions..
only working in home page, fails every wer else...pls check the code once pplzzzzz
@RAZOR,
show me your url.. the same thing is working on my blog and on many of my readers.. :)
Thank you very much
http://asirdabe.blogspot.com/
Thank you so so much.
It worked for me.
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
i cant find a tag
(data:post.body) in my blog template :(
@Ruchira ,
expand the widget templates..
by the way you can also use the new post summaries from blogger.
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!
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.
THANK YOU exactly what I have been trying to figure out on my own for 2 days! Thank
thx very much
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.
for my site it shows the whole post :(
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!
thanks for this! its working on my blog
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?
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.
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/
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?
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
Copied your code exactly but says there is a code era? Any thoughts? thanks
Good post, i will try it!!!!!!!!
I found Javascript code on your "summary code". Is this good for SEO or not?
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?
Thank's for useful info..
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
Anesh I Hav become a bIg fan of U , ur D running d beest blog
good info
thanx dude
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
how to integrate this in show post for a specific label>
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.
You're a genius! Look at what you've done to my blog. I love it!
http://queerenglish.blogspot.com
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
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 "".
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!
great post :)! i figured it out already
Thanks for this! It's easy to add and looks amazing on my blog: http://fuguetraveller.blogspot.com No problems with style whatsoever. Keep up the good work =)
It took a while for me to finally figure out how to show my pages. I have just completely replaced my previous "script for post summary" to that of what you have provided. and retained some of my previous script to make it more attractive. instead of just Read More.. mine looks like this "Read More - Post Title."
Thanks Aneesh for this another great help for us bloggers...
I really want to try this, as my post summaries suddenly stopped working but afraid It'll conflict with any scripts already in my template. Any advice?
http://newsychick.blogspot.com
Its a good trick/script BUT it makes load page slowly. Can you fix this please?
I too am wondering how to have the images resized without being distorted.
I've been using this code on my blog here: http://jenaissancedesign.blogspot.com and it has recently stopped working.
Since I didn't change the code, I'm assuming it is on the server side where the script is. Is there a work around for this? Any help would be appreciated!
thanks!!
this is GREAT! just what i was looking for...thank you! i have two questions.
1) my mp3/media player hotlinks aren't active in the summary. is there a way to correct this?
2) is there a way to only apply the summary to all the posts except the most current one?
thanks again...it's fantastic.
@ariel - you can use the new Official version of 'Read More'.
Refer http://www.bloggerplugins.org/2009/09/post-summaries-on-blogger-with-read.html
2. its not possible. BTW you can tweak the code to display the full version of the first post on the page, and summaries of the rest.
@Aneesh, thanks for the quick reply. man, i'm so dumb. i'd used the official 'Read More' plug-in before but i really like the layout/design of your summarized version with image to the left and text to right (overall condensed format). i just realized...why not format it that way myself?! haha. geez...but i tried it and i still prefer the location and font design of your version better. so, i guess i have 2 more questions (should be the last ones)
1. can i modify location/style (i.e. bold, closer to post text) of the "Read More" text in a template not using your auto summary tweak?
2. can you please elaborate on how to tweak the code to display full version of first post and summaries of rest?
my current active blog - http://chromewavesradio.com
my draft of new design - http://chromewavesradiotest.blogspot.com
thanks again aneesh!
aneesh, i figured it out. take care!
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!
i use it on my blog: www.thesexykidsrevolution.com and the thumbails arent so fine
Hi Aneesh
I've been using this code on my blog and work great.
I just wonder, how to make default image if there is no image on our blog post
I was looking for this for a while SImple and amazing code. But I need some help before adding it to my blog.
1. is there a way not to shrink images by fitting to a square? Instead, to "crop" the portion of the image? Or something. Images become deformed.
2. first characters on my blog is Google Ad code. So the summary is the code instead of text. See what I mean: http://i.imgur.com/kE9PG.jpg.
Is there a way to fix this because my blog is useless this way.
Thanks.
What a great tutorial! You just saved me a LOT of time and probably from a monstrous headache as well! Thank you!
this is what i'm looking for , thank you
how to make the post url beside thumbnail & Readmore opened in a new tab.. not at the same tab?
" " i can't this text can you help me??
Is it possible to exclude a known image to be capture as a thumbnail? I have a problem with all posts display the same thumbnail because the script just grab the first image.
thanks in advance..
grazieeeeeeeeeeeeeee finalmente uno script che funziona anche nelle pagine statiche! grazie! Thanks!!!!!!!!!
Thanks,i tried its working...great post
Thanks for the tip, it works ok with one problem. When I put a description under an image in my actual post, this text also appears in the post preview as part of the post. Any way to prevent that?
Hi, It's done, my blog looks ok, but I want to ask question, how can you change the color of the read more link. so that it is visible fairly well to my readers.
check my blog to review pleas.
http://ofwbisdak.blogspot.com
Thank you.
Great stuff! Thanks a ton for sharing! :)
Thanks for the post but how can i add custom menu in template???
Hi Anish
Get this error:
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 content of elements must consist of well-formed character data or markup.
Error 500
I checked and couldn't find anything out of place in your script. What could be the problem?
Hi Aneesh, Thanks for your post. How can i give the hyperlink to my thumbnail (similar to Readmore, i want the post to be displayed , when i click the thumbnail) .? Please advice me on this. I have tried but could not able to finish it.
Kajan
it's well and can be used to make templates
]
Hi Annesh,
i couldnt find the
awesome
Thanks for the hack, it was really useful. But I still have a question. On my main page, it works perfectly, but when I click on "Older Posts" I don't get their summaries, but full posts instead. How can I solve it?
http://oclerigo.blogspot.com/
Thanks a lot!
Just like "o Clerigo", I am experiencing the same issue. On my home page, the hack works. On "older posts", it no longer works. HELP!
thanx a lot man
Well, I've made my way and found a solution to the problem reported by me and anonymous, just above, but unfortunately I can't place the code here, as a comment :S
BUT there is a problem in this script when i try to add a CSS styled rtead more button check out my whole problem here http://www.codingforums.com/showthread.php?t=226693
i still wanna use this script but also the css read more button
actually.the template i am using is also using same kind of script...but it has a bug
thanks dude it is helpful but i want image summarise in post pages also not only homepage ..........
check this out on my blog
http://www.gamesforfree.cz.cc
Thanks! This was the simplest and nicest post-summaries code I found! Worked perfectly :)
Hi. First thank you for the hack, It works very well in my blog. But I want to make so that the post title appears side by side with the thumbnail and that the summary doesn't appear. How can I do it?
Thanks.
Thanks for this one. It works. :-).
I love this on my blog but when I click on the read more on my other pages it doesn't show the rest of the post. Any idea how to fix it? Thanks!
thanks great tutorial very easy to follow.. straight and exact
This tweaked approach makes better looking summaries imo since it crops instead of stretching the thumbnails and is more flexible: http://sharepointificate.blogspot.com/2011/09/blogger-post-summaries-thumbnails-part_05.html
awesome tricks. thx alot
Thanks for your post. How can i give the hyperlink to my thumbnail similar to Readmore, i want the post to be displayed , when i click the thumbnail..?
hi, look at my site: allfoodexperience.blogspot.com, I need to make an auto summary of my blog and with thumbnail picture seen in my homepage and button next/previous 1-2-3 & so on below the post. How can I make this? Please Help. Thanks a lot
This really is a neat piece of code. I've had it working great on my blog for a long time and love it (thank you), but I'm struggling with some sort of conflict between the Blogger post setting of how many posts (summaries) to display, which I have set to '10' and how many actually get displayed on my home page, which seems to fluctuate over time.
Thee seems to be more than one setting or variable that is determining the number of summaries to display, and which ever one is winning is NOT the Blogger GUI setting of how many posts to display. This makes it tricky to manage my layout because the depth (height) of my home page is changing and yes I care about how my blog looks.
So can you help me understand what is determining how many posts get displayed? Is the date (age) of the posts? Is it an archive setting, or some other combination of all of the above? I'd really like to get a better handle on this one attribute so that I can plan on how many summaries to display and control it accordingly.
By knowing what is causing it, even if I can't change it, I can at least work within those constraints.
This is not a complaint at all, just would like to have more control or understanding of how this is working. Many thanks!
@Brian - Blogger dynamically sets the number of posts to be displayed on a page. They do this based on the page size. If your posts have too much content, images etc, then you can't expect blogger to display all of them. Blogger does this to improve the blog loading time.This was a feature introduced by blogger and you can read about it at http://buzz.blogger.com/2010/02/auto-pagination-on-blogger.html
How you can avoid this clipping?
You have to control the amount of content that gets loaded on the page. You can do that by adding a jump break into every post. The part of the post after the jump break will not be loaded on the homepage or other index pages. When you click on the read more link, the whole post will be displayed. In this way you yourself can control the amount of HTML, and the amount of images on your page. To know more about jump breaks, read. If you are using jump breaks in each of your posts, then you wouldn't even need this script.
Jump Breaks : http://www.bloggerplugins.org/2009/09/post-summaries-on-blogger-with-read.html
If you are going with jump breaks, and you want to display the thumbnail in a better way, then you can refer http://www.bloggerplugins.org/2011/09/post-thumbnails-for-blogger.html
Thanks for the detailed feedback, but I think you may have missed my point or I was not clear, so I apologize.
I am using the above script to display thumbnail images and summary text (200chars) for 10 posts on my blog home page. Sometimes it displays all 10 summaries with thumbnails, and sometimes it shows less, like right now. I have the blogger settings set to display 9 posts - but can't determine what it causing my blog to display less summaries on occasions.
I don't know what or which setting or option is controlling that. I hate to have you take a look and see, and definitely don't mean to plug my blog, but it might be easier to understand if you look - obviously only if you have time. (http://www.briangreen.net/)
I'm just trying to get a better handle on the summary view and controlling the number of summaries to display. Thanks again for the feedback, I'm taking a look at the links you provided right now.
@Brian - The code in this post is a JavaScript snippet. JavaScript runs on the reader's browser. So what happens here is that the entire post will be fed to the user's browser. It will then replace the content with the summary(this script does that). This doesn't effectively reduce the load on the user's browser. It just improves the presentation and it hides the full post from the user(it just hides. it's still actually there) The actual content and all the images and such stuff are still fed to the browser. It doesn't display it. That's all. When you use jump breaks, the part of the post after the jump break doesn't exist on your home page. Hope I am clear enough.
If you are still not clear, turn off JavaScript on your Browser and then view your blog again. Everything will be clear to you :)
This site has instructions for enabling JavaScript on different browsers. http://www.activatejavascript.org/ . If you just follow the opposite, you can disable it :)
WOW it's worked ^_^ Like Like Like
Hello.Aneesh AT First can you say me your ream ore will appear in monthly archive and label page.How can we make like this in Both homepage and label page
@dsagasdg - this will work on all multi-post pages(that includes home page, archive, labels and search results)
By the way this is an old method of doing things. The best way is to use jump breaks. If you need thumbnails to be displayed alongside the jumpbreaked posts, then refer http://www.bloggerplugins.org/2011/09/post-thumbnails-for-blogger.html
Thanks so much!!! This is exactly what I needed.
http://www.33rdsquare.com/
thank's for this post :D
working in my template.. thanks :D
working for me.....thanx admin for this article
Post a Comment