Blogger Templates

Automatic Thumbnail and Read More Function for Blogger

This is only for users which has already installed this code on their templates, they need only to update a link.

1. Go to edit HTML --> search for this:
http://kfile.110mb.com/summary-post.js

2. Replace it with:
http://blogergadgets.googlecode.com/files/excerpt.js

Save.


NEW USERS READ THIS:
Read more function is used to cut our post on homepage, post will appear fully when we click read more link. It's cut automatically and if we insert image, it appears thumbnail.
This is automatic read more function with thumbnail. We just need to set up our HTML code.

Follow steps:
1. Go to "Layout" click "Edit HTML"
2. Tick on "Expand Widget Templates"
3. Find this code
<data:post.body/>

4. Replace with this code below
<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://blogergadgets.googlecode.com/files/excerpt.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

5. Save / Check your blog

clarification code above:
summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width

- If you need help to install it or to customize it, just leave a comment.

158 comments:

Editor said...

Does this work with free hosting at blogspot.com and if so where do I put it.

Klodian said...

Yes, Sure.

John Hildebrand Photography said...

dude i cant figure out how the help to do this i have been trying for ever

Klodian said...

Hi John,
First check this template, and there check demo, you will understand how this works, if you like this template download and upload, because this template has code enabled, or if you want to keep your template, I will help you to install code above.

John Hildebrand Photography said...

sorry can't figue this out i thought i did it right and it didn't work

Klodian said...

if you placed code like showed above, this should work

John Hildebrand Photography said...

i think i did everything right but when i make a new post does the read more but just pop up.
JOHN

John Hildebrand Photography said...

got it to work but how do i make a new page for the link to go to

Klodian said...

No code doesn't work OK, I found an error there, I will publish now the new code, it's easy to install.

John Hildebrand Photography said...

it shows the link on my blog but can't figure out how to make it when a new posting. I tried it any help

John Hildebrand Photography said...

are you saying there was something wrong with the code you made?

Klodian said...

Yes, but now I have solution, and I will update this post in few minutes.

John Hildebrand Photography said...

did you fix it

Klodian said...

Yes, sure. Now works fine.

Josh Halliday said...

Wow - how easy was that. Thanks! Though is there any way I can customise which part of the image is thumbnailed rather than squashing the whole image?

Thanks.

Klodian said...

Hi Josh,
You can, edit number of words and image size, just change numbers in script and test, that's really easy.

Josh Halliday said...

Hey - this would be ideal: Show the full post of the most recent post and cut short the rest. Do-able?

Klodian said...

Yes, but not automatically and not with this script, its a hard work, need to edit all posts... if you are interested I will show you.

Superstar said...

thanks this is what im looking for..

Sicky Dicky Productions said...

look at my blog the summary has the code in there what do i do
http://johnhildebrandphotography.blogspot.com/

John Hildebrand Photography said...

could i maybe email you my html code and see if you can look at it and fix it for me. this would kick ass. I will donate to you for srue

Admin said...


theres is nothing wrong with the codes.. check my blogs
http://showbiznewsnow.blogspot.com/
http://promdiphilippines.blogspot.com/
http://philippine2010election.blogspot.com/


to all users of this trick, I think you should backup the script..
we'll never know, that script above might be deleted. and the bandwidth..you know that thing...

Klodian said...

@Sicky Dicky Productions,
I checked your blog and it's OK, if you want to customize thumbnail size or text, just post a comment.

@John Hildebrand Photography,
I sent your an email :)

@Admin
I use this script and for my other blogs, so I check bandwidth closer.

Braden Kelley said...

Will this work with the Classic Template or does someone have a potential solution that does the same thing for the Classic Template?

Thanks,

@innovate

Klodian said...

No sorry, this doesn't work in classic. I checked your blog, why you don't move in XML.

Jayhawk said...

I know no javascript at all, nor anything about the template language of Blogspot. How would one alter this so that it would apply only on selected posts, or on more lengthy posts. Perhaps I'm asking what would one change so that medium length posts would not be affected, but long ones would. Oh, hell, I'm confused, but...

My point is I'd like it to apply, but only rarely. It does work nicely on my blog, it just works too often.

Klodian said...

@Jayhawk
this code works in all post new and older, after install it no need to do anything else, I can say its excellent javascript. All should donate for this code :)

Jayhawk said...

Absolutely. My point is that it takes a post which is two paragraphs long, cuts it off in the middle of the second paragraph and says "read more." Thus, every single one of my posts, including very short ones, requires clicking, and when you click all you get is one additional line. You read 95% of the item and click to get a mere 5% more.

I would like the cutoff to be longer. I'd like posts that are, say, three paragraphs long not to have any cut off and not any "read more" link, that is to be displayed in their enirety. Only posts longer than three paragraphs would be cut off and have the "read more" link.

Thomas said...

This looks nice but it serves no purpose.
Most important thing to shorten articles is to avoid duplicate full text which Google does not like. And this method only hides part of the post. Not really what I was looking for.

Klodian said...

@Jayhawk
You can customize this size

summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width

just edit and preview.

@Thomas
Don't know what you are looking for, but most important and powerfully bloggers / especially wordpress do this.

Jayhawk said...

Well, I'm not sure what the "image height" and "image width" are, because I don't see any images, and changing the "post cut height" with or without image (and why they would be diggerent), is having no effect whatever. I think I'm missing something; am I supposed to have some sort of image somewhere?

Klodian said...

@Jayhawk
Install this code correctly in your blog. After you place a code tell me to take a view of your blog.

Fredj A. Jad said...

i like it, Thanks

Badugiz said...

this is the one i was searching!thanks a lot!!!aside from making my blog neat it becomes faster too!!!great thanks a lot Klodian!

Klodian said...

@Badugiz
Thx for feedback, yes it's a great tool, also you can customize it. Check my comment above I have explain it.

கைபிள்ளையும் கைகூலிகளும். said...

thanx bro
good job
excellent

EmeraldIre said...

omg thankyou. lol. I was so hopeless though. I couldnt find that first code so i just copied it into wordpad and hit ctrl + f and what do ya know? I have the code. then i copied it into my html editor and it works brilliantly. thank you for your help.... even if i did have to cheat a little bit (well ok a lot) roflmao. thanks again.

MD said...

How to change summary text size??

Klodian said...

@MD
Is a clarification code above read it, change numbers, preview / save.

tag02.blogspot.com said...

How to change summary text size?? it very small size on my layout.

http://tag02.blogspot.com

Klodian said...

@tag02.blogspot.com
download template from here and then add read more code.

DRoshani said...

I see that the JS is hosted somewhere else, does it mean that Blogger can be in danger to loose the function if that file disappear one day?

Is it possible to add text Flot Right or Left, I was think to control this for Hebrew which is RTL rather than LTR.

Klodian said...

@DRoshani
Yes file is hosted, but I use for my other blog, so look this closely, but I don't think that will have problem, anyway I recommend to bookmark my blog.

Yes you can change from float right to left, find at code above and edit it.

Sourav !!! said...

I cant summarise view in your template even after doing all the suggested changes...help !!!

www.emilysbeautyinbalance.com said...

Excellent! It took me forever to find where to put it, but I eventually found it and it worked perfectly! Genius, thanks a million!!!!

havatrafik said...

Thank you

Editor said...

Is there a way to make the length selective, depending on the length of the post, rather than automatic? Thanks for your help.

Klodian said...

@Editor
No this will do automatically in all posts, but u can customize it. Read code clarification above.

Dr J said...

Where is this -> http://kfile.110mb.com/summary-post.js ?

I don't usually like to be beholding to someone else's server - Is this on a Google server of some sort? Or can this be embedded in the template?

Klodian said...

@Dr J
I have uploaded there, if you want can upload in your own server.

Xaris said...

Hey...
Nice work on this hack, it works prefectly. :)

I want to know, if i can replace the letters "Read More" with an image.

Thank you.

Klodian said...

@Xaris
Technically is possible, just need from you to have skills in HTML / CSS code.

Xaris said...

OK.

I think that i can do it...

Thank you Klodian, nice templates and hacks. :)

Eve A said...

can u help me about this..because it not fully working

Klodian said...

@Eve A
Follow steps above and tell in which steps you have problem.

Bayron said...

Thank you so much!! it work really good!

asher castillo said...

Is it possible to use this code with multiple blog contributors?

Klodian said...

@asher
Yes, of course.

wfleet said...

Klodian -- After I went to HTML and clikked Expand Widget Templates, I did Ctrl F and pasted the data:post.body line above into it. It found that phrase about half way down into the template (which I had saved a copy of to my desktop.)

I put the big chunk of info from above onto my clipboard. I selected data:post.body and pasted the new stuff in. I did Preview to check it out.

I wanted a somewhat longer summary so I changed the 430 & 340 both to 1200. (I found the right place by using the Ctrl F trick and pasting the script type = first line of the new info into it.) Any time I went back to tweak, I had to remind myself to re-clik the Expand Widget Templates box.

It works !great! to make it shorter but removes all bold and italics (tho not on the "main" page when you clik thru from Read More). Any way to keep the paragraph spacing and bold and italic in the summary? It looks bland with no paragraphs and so4th.

http://sickerdick.blogspot.com/

Klodian said...

@wfleet
No its not possible this.

Kurauzah said...

The script works like a charm. Finally I found out how to do this. Thanks to you =D.

Vijay said...

hi klodian,

It's an excellent piece of JS code. I have used so many different options.. but nothing works like this... the best is of getting image even set.

thanks a million.....

giovanni&amp;jovanie said...

hi. i didn't understand. what should i replace?

book4fun said...

Thanks, very useful code!
I used it for my blog:
http://book4fun.blogspot.com/
Have a look!

leopold said...

Hello, I am trying to figure out a way to have all comments visible on a blog page just like you have here. Along with the comment box always open. Is the code above for that purpose?

Thanks,
Joe

Kelly said...

Hi,

Thanks for the code, it works great! Is it possible to change the font size to make it larger though? And also, can I change the header colour and add a discription in the "about" box?

Thanks!

Klodian said...

@Kelly
No cant change font, its default, but dont know why is small at your blog.

University Blog said...

I cannot find data.post.body tagfrom HTML editor panel. any body plz can show me this where i can find this tag?

Klodian said...

@University Blog
Follow all steps above correctly also read all comments above.

College Student said...

ya I have found. but i wanna show full image o auto resize. it shows odd size image.

MPC said...

how do you change the font and size of my font? I was able to change the font in "Read More", but not the font in my summary post.

Kyle and Svet Keeton said...

Thanks, works fantastic!

Kyle

Preetish Panda said...
This post has been removed by the author.
Rob Gordon said...

Hello, first I apologize for my english, I'm just a stupid French guy.
Here is my blog : http://www.toujoursraison.com
Most of the pictures are movie posters, but not only.
I'd like to have thumbnails with a width of 200 and a height which respects proportions, so that movie posters and other pictures keep their original shape.

I tried that :


summary_noimg = 430;
summary_img = 640;
img_thumb_height = undefined;
img_thumb_width = 200;

But it only works on Mozilla Firefox, not on IE.

i also tried to remove the img_thumb_height line, but it does'nt work.

Do you understand my problem ? Is there a way to solve it ?




Thanks

Alex said...

My Problem is that, I want the read more feature, and I don't mind it displaying the image I am using, but I'm have 2 problems. First, I have ad's in my posts, and the ads are being displayed as the image for by post, but distorted. I want to use the image I select. The 2nd problem is, with sizing. My Pictures get distorted. Please Help.

alex@thegayatheist.com

Alex said...

Hey, I wrote yesterday. I solved that problem, but need your help now. Is their anyway for me to download the Java File so I can upload it to my own file site. Don't want to rely on someone else. Please Help Me.
alex@thegayatheist.com

Klodian said...

@Alex
I'm "someone else", so I host JS here
http://kfile.110mb.com/summary-post.js

download and upload on your server.

if you appreciate this, put my link on your blog, and share this post.

Alex said...

Update: I think I got everything fixed. Thanks for the great info. Here is my blog: http://www.thegayatheist.com/

Mechtayou said...

Really BIG help, thanks a lot!!!! It works :))))

Beatriz Oliveira said...

My blog came with the read more and I would to like to take it off. Could you help me, please?

Send the answer to my e-mail: goose.bumps@hotmail.co.uk

Thank you

admin said...

After I changed this to my preferences:

summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width

an error massage appeared. How can I solve this?

fresh freeware download said...

I can't save my template when I tried to change this :

summary_noimg = 430;
summary_img = 640;
img_thumb_height = undefined;
img_thumb_width = 200;

Klodian said...

@fresh freeware download
@admin

start from begin, and change only numbers not text.

fresh freeware download said...

it's now work. Thanks

andry said...

it's work thanks bro

Angie, The Rehab Reject said...

Thank you soooooooooo much!!!!

mushariff said...

thank u so much!!!!!!!!!!!!!!!!!!!!!!

down_driller said...

I have tried! And it works! Thanks to you Klodian!! :)

lhc said...

Great code and worked on first try. However, I notice that I now have click on the back button twice to get back to the thumbnails from the full post. Anyone else experiencing this?

Imaadh bin Nasir said...

Normal 0 false false false EN-US X-NONE X-NONE MicrosoftInternetExplorer4 ...

i m nt getting a part of the post and then read more. i m getting the one that i mentioned above and then after that read more. y is it so? cn u plx help me? :(

kaskus said...

Can you help me?
http://daftarpenipu.blogspot.com/search/label/PT%20Penipu
how to short them?

April Lorier said...

KLODIAN HELP!

This kfile.110mb.com is not working anymore. Now all are full-posts only on my blogs, and my friend's blogs too!

CEP said...

Help me! the file: "http://kfile.110mb.com/summary-post.js" has been deleted

Rangga said...

hi klodian, thanks for the trick.

only one problem, the image thumbnail only appear as thin line on IE

www.cottonable.com

Klodian said...

@April Lorier
@CEP

No its not deleted.

Motigator said...

Everythings fine for me. I use IE. Never tried in Oozilla or Opera yet.

sHady said...

thanx a lot man it is working like a charm

lavette cullen said...

cooooooool man. Works perfectly. Thanks

Harsh said...

Can you tell me where to replace the code?

Kelvin@Porkchop said...

hi,the code is perfect complement with your template!! but i am having some formatting issue here

http://dino-kun.blogspot.com

the formatting is in one straight line,how to get it to replicate exactly as per in the post.please look at the post here
http://dino-kun.blogspot.com/2009/08/canaan-18-pvc-figure.html

notice the formatting is straight down..how to replicate it? I am ok if i can display lesser info out there but would just want it to be in same format

arriieea said...

cool..
thanks a lot..

Paul Perrin said...

Awesome thank you!

football said...

can this be modify to show videothumbnails? If it can please let me know how !Best regards

Dewan Pemuda PAS Kawasan Padang Serai said...

I don't know what happened, but it seems it's not working for my blog. I would like to have 'Read More' button in the page so that i'm not using the whole text which make the page become longer.

www.dppkps.blogspot.com

Klodian said...

@Dewan Pemuda PAS Kawasan Padang Serai

read this,
http://buzz.blogger.com/2009/09/its-date.html

Mia said...

Klodian I love you :P this is the ONLY script that worked on my template ! I must have gone through 13 scripts and then I noticed you had a script here too . Thank you Klodian - youve managed to save another Blogger ! Now I dont know why it isnt working for so many users - I mean the instructions are simple enough - look for the " data:post body" code - erase it and replace with the given code below - geesh ! SAVE & youre done . I dont know what to say - but Thanks again K . tweet tweet :)

Mark Lorier | Los Angeles, California said...
This post has been removed by the author.
Klodian said...

@Mark

this is from free server, and I think such things happens.

Админ said...

Hi Klodian, this script was perfectly working until 2-3 days ago when it stopped working and now the whole articles are displayed. Can you help? May this be because of the new read more function of Blogger?

Klodian said...

@Админ
no its working, and not related to blogger. Its a js that hosted on free server and sometimes maybe fail because is free.

L said...

does anyone have the location of the js file on another server?

Theresa said...

Hi, I am using "Revolution Elements" template. The data:post.body/ code appears twice and I replaced both with the above code. The "Read More" link comes out, but the article and images are not summarised/thumbnailed. Help! Thank you.

Bang Ancis said...

Hmmm thanks guys....

Marc De Mesel said...

Hi Klodian, excellent hack! Thanks.

It also worked at my sites very well but 2-3 days ago it stopped working. I understand from your answer to Админ that it is not related to the new 'read more' function from blogger (btw, yours is better! it shows images!) but is related to the free blogger servers. I hope it is temporary and the function will start to work again in the future because I love it!

Klodian said...

@Marc De Mesel
Tested now and its working, anyway, I do some edits this post, and will make one that don't need a hosting.

M@t said...

You 've done a great job with the templates! They rock! ;)

About 4 months ago, I installed 2Plus (http://www.deluxetemplates.net/2009/05/2plus-templates-for-blogger.html) template on my blog... I am also using the "read more" feature for more than two months!.....

Until today! I just did a blog post, only to find out that this feature is no longer working! (my previous entry was 10 days ago and everything was working smoothly!). I ought to be more precise: The feature is not vanished, but the "read more" is displayed on the end of post! Kinda pointless! :)

So, I got myself a backup and:
1. I tried to follow the above steps again - didn't work!
2. I tried to re-install the theme and add the code - didn't work!

Since, I loved this template, I hate the idea of not having this feature!.... Some help?
(I can also send you the .xml file, if it can help!)....

Klodian said...

@M@t
because is free hosting, I will do a post, that will not require hosting, and so will never have problems.

I will do post as soon as possible.

M@t said...

Hey Klodian!

Thanks for the quick reply and the help!

I will keep my eyes on the blog! ;)

cryoffalcon said...

hi klodian
i tried to do that but failed i replaced the code of datapost.body the read more is appearing but i cant change the size or length of the post
i tried changing numbers from 430 to 50 and did change to all but nothing changed.
take a look at http://psychology-n-life.blogspot.com/
i will be waiting for your reply,
and one more thing do you know how to embed myspace video in jw player of longtail.com

thanks for reading
Regards
Shah Faisal

Klodian said...

@cryoffalcon
this not works will update this post as soon as possible,

DorkScotch said...

Klodia, i really hope you can fix this code asap! my blog looks suck wo it. :(

amoeba said...

Hi....It worked...but the thumbnail is distorted..How do i fix this...thanks!

Marc De Mesel said...

Klodian,

I am also seeing forward to your code. My website looked awsome with it!

Klodian said...

@Marc De Mesel
I have updated, now works fine.

@amoeba
read --> clarification code above

Marc De Mesel said...

Klodian, thank you very much! You are great!

arriieea said...

Thanks for update link..

M@t said...

Hi Klodian!

Just dropped by to say a huge thanks for your efforts and for fixing this!

You really rock! ;)

Thanks, again!
M@t

Pojan said...

im not sure if its working or not (you know what i mean)

Hellllpppppp!!!!

DorkScotch said...

thanks alot man!!! :))

Kang Deni Ahmad said...

thanks very much

kalaiv said...

Thankxxx really good blog

al said...

hey thank you very much for the new code!

i have a question:

the old code didn't thumbnail the images, it was pretty much like previewing a part of the post. is it possible to tell the script to not thumbnail?

thanks again for the code it was really useful!

MedEditor said...

I replace the first code but it doesn't work at all. I have to write also this?

summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width

Where I should write this?

Klodian said...

@MedEditor
if you followed all steps above, and this not work for you, than I'm sorry.

Putri said...
This post has been removed by the author.
Mourya said...

hi admin, your site is really helpfull to me , it totally changed the look and also thank you for your support.
Once again thanks alot.

Food and Drink said...

Nice site. Template is God for content. This is your big effort. I like you work.

Best Regards.

Moderator said...

Great Template :)...but wondering how could you nicely arrange its content ? currently all sequence in few rolls.......can we make separate some sentences ?

Klodian said...

@Moderator
its not possible.

Moderator said...

any idea for "add to cart" solution for blogger..

paypal one is quite tedious...
any code that we can simply program and send the value to paypal checkout one ?

herroyalbleakness said...

Thanks for the easy steps on 'Read More' with thumbnail! Happy Holidays!

Erwin Rooshartono said...

ill try..tks...

http://restinrich.blogspot.com

Megrim said...

The main issue ive found is that it also affects single pages and when you hit read more it doesn't display the full text it just loops on the same page still saying read more.

it works fine with normal posts.

Cap. Jack Sparrow said...

Works fantastic dude.... Can we somewhat highlight the "read more" link anyway.....plz

anyway thnx for the code

http://blackpearlfreebay.blogspot.com/

Sarah said...

First, thank you, Klodian, the great, well-written script. It worked on regular posts at first try. I have the same problem as Megrim above with these two individual pages though:

http://radicalunschooler.blogspot.com/p/created-with-admarkets-flickrslidr_06.html

http://radicalunschooler.blogspot.com/p/who-am-i.html

Any fix? If not, I'll have to revert back to full post. THANK again.

Sarah said...

I was hoping for a suggestion to solve my dilemma, Klodian. After two days of searching, I came up with none I tried that worked. At this time, I sadly have to remove such a neat hack off my blogs. Someday when there is a solution or me figuring out how to expand just those two stand-alone pages, I won't hesitate in adding the hack back in. Again, thank you for such a cool script.

Masduki said...

Thank you soooo...much...this is really work..

Giovanni Deri said...

thank you... I like your work.

Nawala said...

for some reason...the code also applied itself to my pages in blogger and the read more button on my pages doesn't allow you to read more! smh had to remove this :-/. any clue what thats about?

Free Products said...

thank you so much!

Srikanta Kundu said...

Thank You.
It really works.
You may check here www.todayincivil.blogspot.com

once again thank you.

1Templatesss said...

There Is "Read More" Option I Want To Change It...
And I Want In Every Post A Different Links Come, Is It Possible???

muneebrb said...

Thank you very much...this is really helpful.
http://muneebbaig.blogspot.com/

KlusTTer said...

thanks man.. it worked..
very nice

Irtiza104 said...

Hi. it works fine. but the thing is, it messes up the static pages too, which is kind of a problem. what can i do?

Klodian said...

@Irtiza104
yes right, nothing can do.

Naeem said...

Its don't works on page.

But work on blog post. :(

Check this page of my blog. In didn't work.

http://ebooksdunia.blogspot.com/p/study-in-bangladesh.html

How can i solve this. :(

Vijay said...

how to do it in thesis template ??

your thesis template to awesome. if you can bring in the new version of Thesis template with all new blogger features 'expandable post', 'pages', 'share button' it would be just too good.

I like all your minimal designs.

Post a Comment

 

About the Author

Klodian I'm Klodian definitely a Blogger fan. Minimalist designer, Mac User.

Twitter Updates

    The Premium Template

    Daily Edition is a Premium Blogger Template, with a unique look, where details make the difference. Read More

    Show Us Your Blog

    Blogger Showcase: Showcase Best Blogger Powered Blogs. A place where you can show to the world your blog :) Submit your blog for free

    Partners