May 15, 2009

Automatic Read More Hack For Blogger


Although this tutorial will allow you to truncate the post wherever you want (i.e. you can show/hide several parts of the post with this hack), but being a javascript based hack, this method is not SEO friendly. If you want to use a SEO friendly post-truncating method on your blog, then kindly read this post.

Here's a multi-purpose and quite awaited Blogger Hack.
This is for all those bloggers who are looking for a hack, which adds "Read More..." expandable link automatically to all their posts (whether the posts are new or old).

Read More Hack For Blogger


You have to specify the number of characters after which the post will be truncated. If you select it as 500, then all your posts in the home page will show only first 500 characters.
And moreover this hack has already been modified to show the first image from the post, as a thumbnail along with the truncated post.

I called this hack as multi-purpose, because through this hack you not only add the "Read More" tag to your posts, but it also optimizes your "Archive pages" (Feb 2008, Oct 2008, etc.) for search engines and also for your readers.

NOTE: In the previous "Read More" hack, you have the control over your posts (to hide/truncate different posts at different lengths). But once you apply this hack, all your posts will be of equal length.

Instructions to follow:

STEP 1:
Log in to Blogger, go to Layout -> Edit HTML, and mark the Expand Widget Templates box.

Now find (CTRL+F) this in the template code:
</head>
And immediately ABOVE/BEFORE that, paste this code:
<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 450;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/read-more_auto2.js' type='text/javascript'/>
You may change the numbers in blue, as per your wish. If a post doesn't have images then the length of the summary will be 500.
If a post contains image, then text length will be 450, and the first image that will be displayed will have these dimensions:
width= 120, and
height= 100.

STEP 2:
Now again in the template, find (CTRL+F) this:
<data:post.body/>
Then REPLACE that line, with this code:

<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 class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read More... <data:post.title/> </a></span></b:if></b:if>

Save the template and make your readers and search bots happy !


NOTE: Although the JavaScript file has already been uploaded and linked in the code in STEP #1, but as a backup I suggest you to download and save a copy of it:

BackUp - STEP 1:
Download this file: read-more_auto.js

Download Link

BackUp - STEP 2:
Upload the file to
MyDataNest (Recommended),
NOTE: Edit & save the folder properties at your MyDataNest account as "Hidden" and NOT as "Private".
And copy the DIRECT LINK to the file.

Credits: VietWebGuide


107 comments:

Dr.Vishaal Bhat said...

Hi,

Thanks for the wonderful tutorials on this blog. I actually had a small request. Could you please tell me, is it possible to make a template, such that there are three columns on the front page, labels and archives, but only two columns on the content page? Also is it possible that the content can take up the unused space? Will be waiting for your reply and any suggestions u can make.

Divya Sai said...

Hmmm....that will take some time to think upon...
Why don't you simply use this trick to show/hide widgets in particular pages:

http://bloggerstop.net/2008/12/show-widgets-in-only-specific-pages-or.html

Dr.Vishaal Bhat said...

I went through it. Am using it on my test blogs. the problem is, it leaves a lot of white space, which i want the posts to occupy.

Dr.Vishaal Bhat said...

Is there any way to use different css files with the conditional tag.?

Dr.Vishaal Bhat said...

I was thinking whether we could use a two column css file for the post pages and a three column one for all the other pages. Just a thought. Do yopu think whether this is possible?

Divya Sai said...

Hmmmm
Not sure....but i think it is possible:

create 2 css files for 3 and 2 sidebars respectively;

show file 1 in homepage (3 sidebars, and less width of main-wrapper),
and show file 2 in other pages (!=home) (2 sidebars, and more width of main-wrapper).

Dav7 said...

I tried this js, but don't like :(

My images get weird and the text configuration disappears.

The texts looses all the configurations like Bold or colors :(

Here is a pic for an example from my blog

http://img31.imageshack.us/img31/1069/20090515214520.png

Divya Sai said...

Ya......even I am not using it, I generally like to hide posts at different lengths.

But this will be a great hack for those, who use less or almost no images in their posts...
OR who are too lazy to hide each & every post :)

AB said...

If the post have NO MAIN IMAGE but contains other image like when we use for explaining steps.Then, this hack is taking first image as main image.How to avoid this ?

Second problem, I am facing is, post containing video does not open when I click on read more..

Divya Sai said...

Here's the post, where you can show only summary, and it will not show any image in the summary,

http://www.vietwebguide.com/2008/07/to-read-more-c-tip-mt-cch-t-ng.htmlotherwise it will show the first image of the post.
Ankit, I haven't visited your blog for a long time, can you give me the address of your blog..

Anonymous said...

Thanks for this post dude
I am one of those lazy bloggers :))

Anonymous said...

I have a blog that has no choice to edit post footer size. I have no idea how to add the option.
Anyone have an idea?

Mohammad Mustafa Ahmedzai said...

hi Dsai,
As usual a great post. But I would rather stick to the previous hack of read more coz it gives you a command and control system :D

Dsai I wanted to request you a post, I hope you wont deny, it will be difficult for you to share but we would love to know that how did you gained a GPR 3.0? for your homepage. Plz provide with some tips that we could apply to do something for our blogs. I will be waiting for the answer

Another Way To Earn Money said...

Great! Now I don't have to worry about forget to place the span code anymore.

$@! kr!$#n@ DeEp said...

hi DS, when i use this the whole blog becomes slow

$@! kr!$#n@ DeEp said...

nearly how many pageviews do you get per day..plz be frank !

Divya Sai said...

I think you are talking about your blog hack-genius, in that as you already have many JS files, for digg, tweetmeme, your ads, addtoany etc. so actually it's a mixed effect of all of those. If you want to improve the loading speed, keep only those things which are really important to you, and from which you are actually gaining something.

$@! kr!$#n@ DeEp said...

so then how do i display digg and tweet .js file in the post page and not in the main page

Blogger Templates said...

Yes, this is a gr8 tip, I have posted the same in my blog some times ago. I think that is much simple, only with 2 steps. link

Roady said...

Great Find and Great Post.

However, This cannot be called as exactly as a wordpress hack simply because if the image height & width are already less than the provided values in the Template's HTML, it's gonna make even the most smallest image, totally pixelated.
I was actually hoping for a wordpress sort of hack where if an image is, say, greater than '500' in height, only then it would automatically get truncated to the specified height in the .CSS file. Nevertheless, great find.

Divya Sai said...

@ Sai Krishna,

Read this tutorial to show widgets only in posts and not in homepage:
http://bloggerstop.net/2008/12/show-widgets-in-only-specific-pages-or.html

@Deluxe Templates
It is the same code, with only 2 steps..

@Roady,

Ya idea is good.....let's see if we could do that :)

Regards
Sai

आकार said...

thanks !

regards,
aakar

Jane Doe said...

Thank you for this. I've followed the instructions but I have two weird results:

(1) On roughly half the page loads, the posts aren't truncated - They are full length with a working "Read More" link.

(2) When the posts *are* truncated, it seems that the summary-generation is dropping the first carriage return.

Do you have any ideas on this?

Site: http://janeproject.blogger.com

Jane Doe said...

Update: On exactly every other page load, the posts aren't truncated - They are full length with a working "Read More" link. This occurs in both FF and IE. Any comments would be appreciated, as I am out of my depth here.

Patt said...

Thanks for sharing this.I've tried and follow this instructions.

It works! but..weird and funny for mine.

The first landing page,the post aren't truncated until I refresh it.

If I refresh it again,it would be exactly same as previous with full post.

Switching between on-off!!! Don't have a clue how to fix this.

I'm using FF3

Mina Irfan said...

I have the same problem as Patt. It switches between the full lenght and "read more". Is there a way to make it consistent?

Mina
www.theuniverseguru.com

Anne said...

Me too. Same problem with Patt and Mina. Any solution for this? Thanks.

Anne
Easy Buy & Sell

Swagat said...

its not working on my older posts, I see 2 posts in 1 :(

Ezri Isa said...

Its awesome Sai...Thanks for the post.

Ezri Isa said...

but i also have the same problem like Pann, mina and anne...

Ezri Isa said...

Resolved! I'd changed the file name and hosted the file into other hosting site (hotlinkfiles.com)...

Divya Sai said...

Thanks for telling that Ezri,
that means there's some problem in the hosting service - boxstr.com,
I am seriously mussing the hotlinking service from google - googlepages,...
anyways i'll update and replace the link to boxstr with hotlink and will try to inform others too...
thanks again Ezri...

Regards
Sai

EDITOR said...
This comment has been removed by the author.
EDITOR said...

how can we show orginal size of image and more than one image

Probing Eye said...

This post has helped make sense on my site. Thanks

http://www.probingeye.com

Fatsa said...

Hi

i use this code on my blog, but its not  working right. One  time is working, and when refresh the page, is not. When refresh again, its working.

Please help me



Apologize for my English!

Divya Sai said...

Instead of uploading the file to boxstr.com use hotlinkfiles.com...that's it !

Fatsa said...

the url i use is that:

http://boxstr.com/files/5912391_wxsn7/read-more_auto.js


is not not correct?

Fatsa said...

I fix it with hotlinkfiles

Thank You!!

Anonymous said...

how to show original size of image plzzzzzzzzzzzzzzzzzzzzzzzzzz help

Divya Sai said...

@ Anonymous,

Here's the tutorial:
http://bloggerstop.net/2008/12/upload-images-in-blogger-without.html

But add width parameter to the img tag, so that the images don't go out of the content area.

C. E. Bailey said...

Okay, everything I've tried on your site so far has worked beautifully for me, but I swear I did everything exactly as you said and I uh, got nothing.

Is there a small detail I might have overlooked? I'm not sure whether I should take it out and start over or there's simple reason why something like this happens.

www.peevishpenman.com

Sai @ Blogger Help said...

May be there's some problem b/w this code and the frameset you are using...

Edgar said...

Sorry for so many posts...
This is the hack I tried to remove in order to install --- more ---

When I remove it, it gets rid of the entire post. When I edit it to show the entire post, it will not allow --- more --- to work.

edgarsreview.blogspot.com

I've gone back to the js for now

Divya Sai said...

Hello Edgar,

Once you remove the code instructed in Steps 3 and 4, and the posts are displayed in full length, comment here:
http://bloggerstop.net/2009/09/blogger-read-more-sidebar-errors-fixed.html

to start working on the new method...

Gaurav. said...

Very Good website! Thanks for it!

Gixman said...
This comment has been removed by the author.
Gixman said...

If you people want to keep the aspect ratio of your photo open the read-more_auto.js file with your text editor and change the following: '+img_thumb_height+'px and '+img_thumb_width+'px and use the % of the size you want your thumbnail (example; 50% or 75%) be aware that both sizes must be the same porcentage. save your file upload it and see if you want the results. If you want to justify the text of your post, find #outer-wrapper text and below must be this: text-align: Left change the value to Justify and you must get the desired result. Is not that I know too much abuot XML or javascript but Firebug was a great help to figure this out. If someone find a way to center the photo while keeping the text justified, please let me know Gixman@hotmail.com

Chanaka Aruna Munasinghe said...

~x(

CooL VicKy said...

hi i m having prob with this trick when i used this trick my social bookmarking icons r appearing over the images of post its nt properly placing below the post so pls tell what should i do ? i want to use this trick help me bro see my blog at http://watsyourblog.blogspot.com

Divya Sai said...

Hi Vicky,

To add those hiding social bookmarking widget, I have added 2 lines of code to hide the widget in the homepage and show it only below posts, so do the same in your blog, read this tutorial(step 3):
http://bloggerstop.net/2009/05/add-autohiding-social-bookmarking.html

Fatsa said...

hi

few days now hotlinkfiles is not working and boxstr is not working on IE & Chrome.

any ideas?


thanks in advance

Divya Sai said...

Ya HLF is going down frequently. Do not use boxstr.com as it is not supporting direct linking of .js(javascript) files.

Presently I am using and satisfied with Myadatanest.com
You may use it too. Soon I'll review it here on BloggerStop

Fatsa said...

Thank you Divya

Kartikey Sapra said...

i used this script but it shows the post two timed check my blog and tell me how to correct it

Divya Sai said...

@kartikey

Do not use hotlinkfiles.com
it's down for many days now. chk your link urself:
http://www.hotlinkfiles.com/files/2750395_bzedg/read-more_auto.js

Register and use mydatanest.com

Lauren said...

Hello again :) I was wondering, is there any way to make the post summary image also link to the full articl,e like the rmlink does? I have been able to customize this script a little bit but have been unsuccessful trying to make the image link to the post. Anywho, thanks again for all of your great resources.

sai @ BloggerStop said...

Hey Lauren,
yes that is possible.
Instead of the .js file referred in the post, use this one:

http://boxstr.com/files/6153818_ovqez/summary-post.js

and then change this in the post:

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:Post.id/>&quot;);</script>

to this:

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:Post.id/>&quot;,&quot;<data:Post.url/>&quot;,&quot;<data:Post.title/>&quot;);</script>

Lauren said...

Ohh great! Thanks I am going to try this :) Rock on thanks !

Kartikey Sapra said...

After using this script all the post ,steps are congested like step 2 is written just after step 1 with only a space between them but they should be in the next line . Is there any way to correct it.
check blog http://masterstop.blogspot.com/
And pls help

Lauren said...

When I replaced the section of code like you said it didn't work, so I instead just tried it using the new script w/ out replacing the code, it apperared that it did work. But when I published my blog the post summary image URL is "undefinied" so brings you to an error page. I see that you have many people asking you questions so I don't mean to bug you, but if you know how or where it is that I can "define" that URL I'd be much obliged. Thanks, have a great day.! Thanks ~Lauren

Sai @ Blogger Help said...

@ Kartikey,
Just visited your blog, I think that script is not reading the code for new line as <br />, try it without a space before /, like this <br/>

@ Lauren
I think the folder at your mydatanest account is set as "private", make it "hidden", because files are not accessible to others if the folder is set as "private", here chk the link:
http://mydatanest.com/files/nymphont/15752_6tm1w/readmore1.js

Lauren said...

yep I had the folder private, so nothing worked! #fail lol thanks

RV2x08 said...

admin,i tried it..but it's only working on IE but not firefox...pls help me... ~x(
http://www.gm-zone.co.cc

Sai @ BloggerStop said...

@RV2x08
Just checked your blog, the hack is already perfectly.
Nice template buddy. One advice: hide your "sharing is sexy" and "linkwithin" widgets from your homepage, and show them only below your posts:
http://bloggerstop.net/2008/12/show-widgets-in-only-specific-pages-or.html

and this file in your template:
http://mydatanest.com/files/YSG...../smiley.js
is not a valid link,
you have to create an account at mydatanest, upload the file yourself, and then paste the link in your blogs template.

RV2x08 said...

tq sai. i've solved many problem within yr threads and advices. now my blog looks much better than before.

btw,i want know y my feedburner readers always keep decrease or increase?? until now still just a few feed readers showing at my counter. :(( any solution?

2nd,how can i get approval from google adsense? i've apply for 3 times with many different google acc but still rejected by google. is that any problem with my blog? can check it for me wat is the problem exactly?

sry for my bad english and many question to ask. still newbie with those things. ~x( also thx for compliment with my blog :) .tq!

Blogger Widgets said...

Thats great, your blogs overall looks now macthes the content perfectly. Don't worry about the feedcount, it will increase gradually...just keep posting about useful stuff regularly on your blog.
Actually feedcount is the total of your email subscribers(which is almost constant or usually increases) and no. of people coming to your blog, thru feed (which varies daily, sometimes inc. & sometimes dec.), so the total count also sometimes inc. and sometimes dec.

I do not use adsense, and so cannot help much in that. But I think you can ask your doubts at Google groups or even better at DigitalPoint.com forums.
Good luck and happy blogging.

Pushpinder Singh Bagga said...

remarfuckable if it works...

Fatsa said...

Hi to all

i try to remove the hack from my blog and after that the sidebar is disappear

i put the old code (with hack - before edit) but again the sidebar is not working.


please help me

the url of my blog:
fatsa-tv.blogspot.com


thank you in advance and i apologize for my English

Fatsa said...

i forgot to say, incide a post, the sidebar is working fine. in main blog it disappear.

Divya Sai said...

Your blog is not open to all buddy...

Divya Sai said...

BTW this hack shouldn't create such problem, may be you using the <!-- more --> method of Blogger [jump Breaks]

johndoe said...

Hi, Great tutorial worked perfectly for me. However I have a question. I trying to use this read more hack with the hack which allows me to place adsense with my blog wherever I want.

But on the homepage these adsense ads are placed above the link and do not look very good. Is there a way to write html so this does not happen?

Your help would be most appreciated

Anonymous said...
This comment has been removed by a blog administrator.
gagaukon said...

This trick superbly works in my blog!

vijay said...

The read more hack is not working on my blog www.bayofblog.blogspot.com showing at the end of every post.plz help me to solve this.

Divya Sai said...

@Vijay
You have the pasted the code above this code:
<head>

whereas you have to paste it above this one:
</head>

DOM said...

Hi, i need a help , i have tired all possible solution but cant get it work, i guess something with my templates, i have added u in google talk. if you could please help me. waiting...

Thanks,
:(

Divya Sai said...

@DOM,

Do not use this trick, as recently I found that this method is not at all SEO friendly. I would suggest you to use the method advised by the Blogger Team. Read how to fix the errors too.

nil said...

not working bro u can take look at www.bcsexamguru.blogspot.com replay soon i am wating

@Blogger Help said...

@nil

There's no problem in the coding work done by you. May be some code-conflict with the template :|

Click On Portal said...

Can you have that code that limits up to 500 characters in your blog also with the read more feature where you place

TEXT
span = fullpost..
TEXT
span

so that you can control it?

RV Quick Tips said...

Yes you are right, i was about to say, that this method is not SEO friendly, but you have already informed us, thanks :)

Becky.

Naser said...

Thanks for the help your site is fantastic i only wish that your site reaches top of all sites
thanks again for the info

Mr. Kara said...

working in my blog thank so much

@hm£d said...

It doesn't Work I don't know why ...
software93.blogspot.com

Sai - Blogger Help said...

Hi there, couldn't find the code in your blog...

Swagat said...
This comment has been removed by a blog administrator.
Priyank Ahuja said...

hey sir i am using this technique on my blog but i have one problem. The problem is that when i use linkwithin widget, it dosent hid on home page...rather it is shown on all posts below post summery...

check it out yourselfHERE.... (www.priyankahuja.com)

Sai - Blogger Help said...

Plz don't use Google-sites, simply use mydatanest and keep a back-up ready at sigmirror (in case mydatanest ever goes down).

savingsisters said...

Hi. Thanks for the help. Quick question. Any way to modify this so that the posts on page 1 are full length but once the post gets moved to page 2 (and following), it is truncated? thanks! www.thesavingsisters.com

vamsi said...

Hi,
its very nice post,but i want to know that will it work for "ads theme" templet.pls let me know your answer because its dangerously required for me....:D

Sarathganesh said...

Divya,
Just a bit of your wonderful time
Is there any way of resizing those images proportionally?
There is a way. But the author is not willing to share it.
I know we can resize images proportionally with javascript but i dont know how to integrate it here.
The person who knows about the method's site is
homebiss.blogspot.com/2010/02/best-post-summary-read-more-hack.html
see the comments section
Would be delighted if you are interested in this hunt.

rishabh said...

i used ur trick but its not working u can see it on my blog samachar-rojgar.blogspot.com . i tried to set the niimg parameter tp 150 even but it just displays a read more link without shrinking the post

Lonely Crypto said...

Hmmm, i guess ma template designer has used ur code in ma template..If u c ma website, every page has a read more..How to remove it..I just want read more in posts wic are big..pliz mail me @ : contact@cancer-cure.info...Its urgent...pliz..thank u..

Sai - Blogger Help said...

Back your template, by downloading it first.

Then delete from this line:

<script type='text/javascript'>
summary_noimg = 800;
summary_img = 650;
....
....
....
....
....


to this line:

div.innerHTML = summary;
}

//]]>
</script>



Also, REVERSE the STEP #2

Lonely Crypto said...

Thanks a lot...

Sai - Blogger Widgets said...

Once you are done with removing this hack, use this method to summarize selective posts only:
http://bloggerstop.net/2009/09/read-more-is-official-now-and-static.html

Candy said...

i have a photoblog named Expozed Galleria. The theme is show only 15 to 30 images of each celebrity. i want to show only one image of each post on homepage and the rest in See More. currently i am using secondary blog named XPOMAX for see more purpose. how can i do this using only main blog. please see http://xpoxpo.blogspot.com.
waiting for your help. mail : canblo@yahoo.com

Gamers-z-zone said...

hello,,,,,,

i have used many methods for adding "READ MORE".....

1)http://bloggerstop.net/2008/10/blogger-help-add-read-more-link-to-your.html

2)http://www.eblogtemplates.com/how-to-add-the-blogger-read-more-expandable-posts-link/

but none of them is working for me... can you give a solution or help me with the problem i am having......

please help me as fast as possible.....

thank you.....

SELLAKUMAR said...

hi.. its not working properly in my blog...
there is no change in d size of d post..

wat can i do.. help me..

Ron said...

is it possible to show links of the original post on the post summary when you do this hack?

i've tried tweaking it a couple of times but im still unsuccessful...

Please help..:D

eagles513 said...

physical activity is any Cheap Steelers Jerseys form movement that causes your body to use enegy. it may be purposeful. such as when you exercise or play sports. it may also occur as part of your regular routine, for example,as you are walking or riding bike to go to school,Aaron Smith Jersey you are doing the physical activity. many forms of physical activity can improve your physical fitness, the ability to carry out daily tasks easily and have enough reserve energy to respond to unexpected demands. maintaining a high level of physical fitness gives you a sense of Ben Roethlisberger Jersey total well-being and is an important lifelong health goal.Sports help to keep people healthy and more energetic.
Brian Westbrook Jersey
Mike Quick Jersey
Nathaniel Allen Jersey
Donovan McNabb Jersey
Stewart Bradley Jersey

PRODIP said...

This is really an exclusive hack!!!
I have done a tiny modification just...slicing post title which was adjacent to Read More tag....

You can see it: www.fishclickbd.com

Thankx Divya

Poiesis said...

Muito bom, e funciona! Obrigada

Okuboyejo David said...

oesn't work for me please help

Devasani said...

Hi...
Nice but i am confused, I have a site songs download , when i am tried to ctrl+F for this code data:post.body/" , there are too many codes like this. With which one i have replace

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

Allowed HTML tags: <b>, <i> and <a>

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy