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

Leave a Reply

103 Comments on "Automatic Read More Hack For Blogger"

Notify of
avatar
Sort by:   newest | oldest | most voted
Dr.Vishaal Bhat
Guest

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.

View Comment
Divya Sai
Guest

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

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

View Comment
Dr.Vishaal Bhat
Guest

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.

View Comment
Dr.Vishaal Bhat
Guest

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

View Comment
Dr.Vishaal Bhat
Guest

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?

View Comment
Divya Sai
Guest

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

View Comment
Dav7
Guest

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

View Comment
Divya Sai
Guest

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 🙂

View Comment
AB
Guest

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

View Comment
Divya Sai
Guest

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

View Comment
Anonymous
Guest

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

View Comment
Anonymous
Guest

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?

View Comment
Mohammad Mustafa Ahmedzai
Guest

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 😀

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

View Comment
Another Way To Earn Money
Guest

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

View Comment
$@! kr!$#n@ DeEp
Guest

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

View Comment
$@! kr!$#n@ DeEp
Guest

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

View Comment
Divya Sai
Guest

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.

View Comment
$@! kr!$#n@ DeEp
Guest

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

View Comment
Blogger Templates
Guest

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

View Comment
Roady
Guest

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.

View Comment
wpDiscuz