How To Add Auto Read More and Post Thumbnails To Blogger | blogger auto read more.

By Default, blogger will display your full blog posts on the homepage which to me and to so many people it is absolutely not cool. Having full post on your blog homepage increases load time and makes your blog look “old schooled”. Adding Auto read more to blogger is quite easy, just use the  blogger auto read more scripts below.
The blogger auto read more function I will be sharing with you will automatically create post excerpts for you and also add a thumbnail image when an image is present in the post. It will also improve your page speed and the thumbnail images will improve your blog posts CTR.
Adding the blogger auto read more is quite easy, you will only be adding two codes at two locations in your blog HTML template editor.
So, let’s add our Blogger Automatic Read More.

Note: Make sure you tick the Expand Widgets Template ate the Top of the HTML Editor. 

add auto read more to blogger

How To Add Auto Read More With Thumbnails For Blogger?

Go to Your blogger Dashboard > Template/Design > Edit HTML
Now Find – </head> tag
Place the code below right above the </head> tag.

<script type=’text/javascript’>var thumbnail_mode = “no-float” ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
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>

To change the image Thumbnail size, find these numbers 100 and 200 and change to your desire width and height.

Now Find  <data:post.body/>  and replace it with the code below.
<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>
<a class=’more’ expr:href=’data:post.url’>Read more …</a>
</b:if>
</b:if>

Now, save your template and you are good to go.
I  hope this blogger auto read more tweak works for you, If it does work for you or doesn’t work for you, mention it in the comments. I will be glad to help you out.

 

Receive Updates of Useful Tips, Tricks and Valuable Resources Right in Your Inbox. Subscribe Now!

Enter Your Best Email Address:


Comments

  1. Thanks dude, But
    it doesn’t fit and ask error of 500 which is here

    “Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. XML error message: Open quote is expected for attribute “{1}” associated with an element type “cond”.
    Error 500″

    Any help. ?