 |
How to Auto Add Read More in Blogger Posts? |
May be you have seen blogs with read more button below post showing only a summary or excerpt of post. You have to click read more button to read the full post. Read More button is for blogs homepage. What if your blog homepage is showing full post? Your page load time will increase and if your visitors are viewing your homepage then they will not scroll down full post for viewing other posts.
You should add read more button in blogger posts and add a summary of the content. When your visitors will see your homepage there will be more chances that they will read more posts of your blog. With this practice your viewers will see the more articles on your blog and there are more chances that they click on your posts. This can also decrease bounce rate of your blog.
How to Auto Add Read More in Blogger Posts?
1. Login Blogger Account.
<data:post.body/>
Important Note: You will see the code many times. You have to go for the 3rd code like this.
3. Replace that code with following 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>
Important Note: If adding this code doesn't add read more button then you should also replace the code the 2nd <data:post.body/> .
4. Now add the following script above the </head> tag.
<script type='text/javascript'>
posts_no_thumb_sum = 495;
posts_thumb_sum = 401;
img_thumb_height = 161;
img_thumb_width = 181;
</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>
Customization for Auto Read More Posts:
- To change the post summary or excerpt length if no image or thumbnail found in the post, change 495 with the characters length you want to show as summary or excerpt.
- To change the post summary or excerpt length if there is a thumbnail, change 401 with the characters length you want to show as summary or excerpt.
- If you want to change the size of the thumbnail then change the value 181 for width and 161 for height.
6. Save Template.
7. Done!
Important Note: If it doesn't work then you must paste the code of 4th method above </body> tag instaed of above </head> .