How add Read More Button in blog of blogger

How to add read more button in your Blogger (Blogspot) Blog

Read more button is well available in bloggers who use Google’s Blogspot stay in an exceedingly fix once it involves read a lot of practicality. What read a lot of button will is that it will increase exposure and visibility of your antecedently posted blogs and articles so your audience particularly the new visitors might see more topics and titles.

You Also Like to Know How To Change the Position of Widgets in Blogger in One Click

So here how you could add read more button in your blog, step by step.

1. Log into your Blogger account and select the Blog in which you want to add the read more button
2. Select Template button from the Left navigation menu
3. Click on Edit HTML
4. Do a Ctrl+F and search for: <data:post.body/>
5. Replace the code with script below:

<!– For read more button starts by Blogofblogger.com –>
<b:if cond=’data:blog.pageType == “static_page”‘>
<data:post.body/>
<b:else/>
<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:right;padding-top:20px;’><a expr:href=’data:post.url’>Read more…</a></span>
</b:if>
<b:if cond=’data:blog.pageType == “item”‘><data:post.body/></b:if>
</b:if>
<!– read more script ends by Blogofblogger.com –>

* you can Also Change Read more.... to anything you like for example- Continue Reading
6. Press Ctrl+F and Search for </head>
7. Paste the following code just above the tag:

<!– For read more button script starts by Blogofblogger.com –>
<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>
<!– read more script ends by Blogofblogger.com –>

8. Save template, close it and click on settings in left navigation which is first from bottom.
9. And you are done and ready to add read more to your post.

You Also Like:

How to Add Rcommended Pos Widget in Blog of Blogger