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.

Read:
How to Add Related Posts Beneath Each Post on Blogger

Automatic-read-more-hack-for-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>
<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
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;
}

//]]>
</script>

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

<data:post.body/> 

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.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&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>
</div>
</b:if>
</b:if>
<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:

Snap-shot-of-Automatic-read-more

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 Facebook0Tweet about this on Twitter1Share on Google+0Pin on Pinterest0Share on StumbleUpon0Digg this

Comments

  1. Tomoloju iseoluwa david says:

    Am using nokia 2700 classic

  2. Tomoloju iseoluwa david says:

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

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

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

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

  6. @Olusanya fatoki, which code?

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

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

  9. Victor Noah says:

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

  10. Blog Okulu says:

    thank you araba oyunları

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

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

  13. Thanks all, you’re all welcome.

  14. Awesome hack for blogger user

  15. Adventures as a Small Town Mom says:

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

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

  17. @techno gist You’re welcome.

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

    http://technogist.blogspot.in/

Tell us what you're thinking...

All comments are moderated.

* Denotes required field.

*