How To Create Automatic Read More / Continue Reading In Blogger (Blogspot)

With this trick, you can choose to display an arbitrary amount of text from the beginning of each post, as a teaser for the whole thing. Then users who want to read the rest of the post can click a link to see the full text.
With this new Read More tips you don’t have to add code like:

<span class="fullpost"></span>

In all of your post. Using this code you will have automatic Read More in your Blog
Follow the steps below for how to To Create Automatic Read More / Continue Reading In Blogger (Blogspot)

1. Login to your blogger account then choose Layout -> Edit HTML
2. Find code </head> (you can use Ctrl + F to find the code)
3.Copy and paste below code directly above </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;

</script>
<script type='text/javascript'>
//<![CDATA[

/******************************************

Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks

********************************************/

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>


4. Save your template
5. In Edit HTML page tick mark "Expand widget template" then find this code below
<data:post.body/>

6. Delete code <data:post.body/> and change with below code

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


7. Save your Template

View your blog and see the result..Happy blogging :)

Related Topics:
How to Remove Underline below Text Link in Blogspot
How to Add Language Translator/ Flags Images Widget on Blogger(Blogspot)
How to Change Password for Paypal Account
How to add a PAYPAL DONATE button to your blog (Blogspot)
Optimize your Blog Title in Blogspot - SEO Title
How to Make Author Comment Have Different Color in Blogspot
How to Remove the Number of Label in Blogspot
How to use Strips Ad in Blogger
How to Hide / Remove Blogger Navigation bar
How To Create Automatic Read More / Continue Reading In Blogger (Blogspot)