How to add Read More button in blog posts
Read More button is must for a blog. By default a blog displays a whole post therefore a single post is displayed at a time. If you add a read more button almost 10 posts will be shown at a time. By adding a Read More button your blog will attract more visitors. ReadMore button increases the beauty of the blog as well. Go through the steps below to add a Read More button to your blog posts.
Step 1. Login to Blogger. Go to Template and click Edit HTML button.
Customization:-
Erase the last code and copy paste the below code there
Step 4. Now click on Preview Template and check it.
Step 5.Now click Save Template and you are done.
Important Note: Download a backup of your Template before applying this. If you are not sure how to do this, you can read my post on How to download backup of Template in Blogger.
If you like this post or have any questions, Please leave a comment below
Step 1. Login to Blogger. Go to Template and click Edit HTML button.
Step 2. Now click anywhere in the text, then press Ctrl+F buttons. A search box will appear. Type </head> in search box and hit enter. It
will search the code in the Template.
Now copy the below code and paste it above </head> code.
<script
type='text/javascript'>
posts_no_thumb_sum = 500; //
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>
|
Customization:-
You can change the numbers colored red in the code according to your choice.
Posts_no _thumb_sum=500;// 500 words if there is not an image in the
post
Posts_thumb_sum=400;// 400 words if there is an image
Img_thumb_height=160;// 160 is the height of image
Img_thumb_width=180;// 180 is the width of image
Step 3. Now press Ctrl+F
and search for this code <data:post.body/>
Note:This code
can of at many places. Press enter as many times as required to find how many times
this code is in the template.
Erase the last code and copy paste the below code there
<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>
|
Step 4. Now click on Preview Template and check it.
Step 5.Now click Save Template and you are done.
Important Note: Download a backup of your Template before applying this. If you are not sure how to do this, you can read my post on How to download backup of Template in Blogger.
If you like this post or have any questions, Please leave a comment below
