How to Make Auto Read More on Blogger/Blogspot

How to Make Auto Read More on Blogger/Blogspot

Auto read more is a way to display a summary of the article that we post on the basis of the number of words automatically.

Here are the steps to install the auto readmore or auto summary for bloggers:
1. Log in to your Blogger account, then select "Design".
2. Get Used to perform backups, click on "Download Full Template ".
3. Click on "Edit HTML", check the "Expand Widget Templates".
4. Search code </head> with the help facility of your browser (Ctrl+F).
Copy and paste the script below under the code </head> was :

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 350;

summary_img = 350;

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>

5. Then find the code below :

<p><data:post.body/></p>

6. You will find 2 <p><data:post.body/></p>. Select which 2nd.

7.Then replace <p><data:post.body/></p>with the code below :

<b:if cond='data:blog.pageType != "item"'><br /> <div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><br /> <span class='rmlink' style='float:left'><a expr:href='data:post.url'>Read More - <data:post.title/></a></span><br /> </b:if><br /> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Save and see the changes. You Done It .

If you want to change the number of words displayed on the main page, you just change the value (color blue) in the code below:

summary_noimg = 350;

summary_img = 350;

If you want to change the length and width of images (thumbnails), you just change the value in the code below:

img_thumb_height = 120;

img_thumb_width = 120;