Add Automatic Read More Button To Blogger Posts

As we all know that we can't actually add read more button without using 'Jump Break' option. Without jump break your post is going to appear all over your homepage.

Basically, a nice homepage is one which loads faster without actually leaving behind main contents of your blog.

Add Automatic Read More Button To Blogger Posts

What this trick will do?

By this trick you can add read more button to every post and then there will be no need to use jump break tool to add read more button to your posts. Just add the codes below and publish your posts without actually using jump break tool.

Also, if you're not using jump break in your posts and your homepage is showing full post then you must customise your homepage.

Steps to follow

Open blogger
Go to 'Template' and select 'Edit HTML'
Now search for this code

</head>

Copy this code paste above </head>

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
.readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>

Now search for this code

<data:post.body/>

Now copy this code and replace above code

<b:if cond='data:blog.pageType != "static_page"'>
<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/>","<data:post.url/>","<data:post.title/>");</script>
<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

Save your template and you're done.

In case you've more than one <data:post.body/> then replace the last one.

Customise

To change number of characters when there is no image, change the value in blue.

posts_no_thumb_sum = 490;

To change the number of characters when there is an image, change the value in blue

posts_thumb_sum = 400;

To change image size change the value in blue

img_thumb_height = 160;
img_thumb_width = 180;

The easy way to customise your homepage in blogger.

Happy blogging!

Tutes Inside

Add Automatic Read More Button To Blogger Posts

Rishabh Singh

1 comment:

Popular Posts