Make Long Post Short on Blogger Homepage With Read More Hack

Yesterday, one of my blog readers requested for how he can make is blog to show fewer post in Homepage.

“hello admin,pls my blog homepage,when people login how can i make it to look like yours where by a post will only show not like all the whole details will just show”

The statement above was sent to me in a comment by one of this blog reader. Today, I will try to explain how to summarize content and show only summary with a “read more” thumbnail in Home page, Archives Page and Label Page using Automatic Read More simple script in your template. Using automatic read more on your blog will make your blog load faster by showing few post instead of the full post on the homepage and it will also make your blog look professional.

How to Add Related Posts Beneath Each Post on Blogger


Automatic read more for BlogSpot post can be done by inputting some code into your blog templates. Below are simple explanations on how to install Automatic Read More Hack for Blogger with Thumbnails and a snapshot of how it will look after the installation.

Now let’s start the installation:-

Note: before you make any changes on your templates, always make a back up of it.

Login in to your blogger account, then navigate to Template section of your blog .

Then search for this tag: </head> . Use Ctrl F on your keyboard to search for it.

Now place the code below above the </head> tag in your templates:

<script type='text/javascript'>
summary_noimg = 300;
summary_img = 300;
img_thumb_height = 120;
img_thumb_width = 120;
<script type='text/javascript'>

function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
strx = s.join("");
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;


Note in above codes you can change the numeric numbers according to how you wish it appears on your blog.

summary_noimg = 430; this code will decide how much characters must be shown in the post if that post doesn’t contain any images. I have selected 430 characters. You can customize it to suit your template

summary_img = 340; If the post contains image, then this code will decide how many characters must be shown in that post. Change the number of characters to be shown to suit your template.

img_thumb_height = 100; this tag decides the height of the thumbnail to be shown in the post. Vary the number 100 to suit your template.

img_thumb_width = 120; This tag decides the width of the Thumbnail image to be shown.

Now find


in your template and replace it with the codes below:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; +'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<>&quot;);</script>
<div class='readmore-wrap'>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url'>Read More</a></span>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

You can now preview your template and then save it.

It will look like this:


For help, use the comment box below.

I love sharing my knowledge with others. Feel free to contact me with any questions you may have. Please subscribe to the newsfeed and get updates through email, share this article with friends, or leave a comment below. New users can read about me HERE

Share this on:Share on Facebook6Tweet about this on TwitterShare on Google+1Pin on Pinterest0Share on StumbleUpon0Digg this


  1. rasheed ridwan says:

    i cant find this tag on my template

  2. thanks to u admin…its working perfectly

  3. How can do image active, like read more??? peoples press on image and than opened full post. dont need to press on read more or title. sorry for english

  4. Its not working on ma blog …. help pls

  5. Odebright says:

    Thanks Bro I have tried many, but only urs worked. am grateful. please help me check if there is anything I need to set for my blog for seo and traffic. Its a new blog I created This afternoon. Your Guide will be greatly appreciated
    Blog Name is:

  6. Tomoloju iseoluwa david says:

    Bro, so how many page View should I be expecting inorder to do better?

  7. Tomoloju iseoluwa david says:

    Bro… Thanks but did you thing I should Go for adsense now.. I have 1564 pageview In one month?

  8. i did it and it worked. d problm z dat i only have one post showing on the main page but when you click on ‘older posts’ the remainin posts appear normally.

  9. polawizard says:
  10. Tomoloju iseoluwa david says:

    What about wordpress, was it the same procedure?

  11. Tomoloju iseoluwa david says:

    Am using nokia 2700 classic

  12. Tomoloju iseoluwa david says:

    Hello boss am using phone how can I do it with phone?

  13. I can’t find this line on my template what should i do??

  14. can’t find this in my template< what can i do???

  15. hey blog i did as u ask. and it workd but gat 1 big probs after i insert the codes all my blog post are repeatn its self instd of 1 it 2… plz check for your self and tell what to do.

  16. @Olusanya fatoki, which code?

  17. plz this code: is absent in my template. what should i do?

  18. Thank You Very Much Bro! I Used Your Technique And Its Working!!
    This Is My Link..http://Infoaday.Blogspot.Com/
    The Ctrl+F That You Suggest Was Most Helpful..

    I Just Having Difficulties With
    “Now find the in your template and replace it with the code below.”
    It Should Be:
    “Now find ALL the in your template and replace it with the code below.”

    By The Way, Thanks Again!

  19. Victor Noah says:

    Thanks Master, may God Bless you more. Keep on with the good work.

  20. Blog Okulu says:

    thank you araba oyunları

  21. thank you, it is working absolutel cute on my new blog.

  22. I will definitely try these for my blog and thanks man for working comment

  23. Thanks all, you’re all welcome.

  24. Awesome hack for blogger user

  25. Adventures as a Small Town Mom says:

    Please disregard my previous comment – I uploaded the code and it works perfectly!

  26. thanks alot..your code work like a charm !!….and very easy…

  27. @techno gist You’re welcome.

  28. Hey…thanks for the code.It work’s perfectly.See it in my blog

Tell us what you're thinking...

All comments are moderated.

* Denotes required field.