rkcxvp

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

103 thoughts on “Automatic Read More Hack For Blogger

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

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

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

  4. 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 πŸ™‚

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

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

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

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

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

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

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

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

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

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

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

    http://www.peevishpenman.com

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

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

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

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

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

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

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

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

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

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

  26. 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,
    πŸ™

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

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

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

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

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

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *