How to add Read More Button in Blogger

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

Read more button is easily available in WordPress but bloggers who use Google’s Blogspot remain in a fix when it comes to read more functionality. What read more button does is that it increases exposure and visibility of your previously posted blogs and articles so that your audience especially the new visitors could see more topics and titles.

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. Select the check box   Expand Widget Templates  on the top

5. Do a CTRL+F and search for: <data:post.body/>

6. Replace the code with script below:

<!– For read more button script 1 starts –>

<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 –>

7. Search for  </head>

8. Paste the  following code just above the tag:

<!– For read more button script 2 starts –>

<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 2 ends –>

9. Save template, close it and click on settings in left navigation which is first from bottom.

10. And you are done and ready to add read more to your post.

(Visited 1,285 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *