How to add Read More button to blogger template?
Is above questions is your? If yes, then I have a solution for it.In this article you will know about how to add read more button to blogger post with thumbnail or without thumbnail or how to add it manually.
There are two options where you can add read more link.
First option is very simple
In first option you can placed manually Read More button in a single post or can add all posts one by one. Unfortunately you can't add read-more link in all post in one time.
While writing an article you can add read more button via click on Jump break button as given in below image.
Second option is awesome
Second option is better than first option because here you can add read more link with and without thumbnail (as you can see in above first image).
What should you do?
You have to add a JS code in your template which I am giving in below.
You have to follow some steps then after your all post will get read more button in one time and an auto read more button will automatically merge with your new post.
Note:- I am suggesting you to download a backup of your blogger template before editing.
Step First
Go to your template where you want to add auto read more link with or without thumbnail and go for Template and then Edit HTML
Step Second
Now, Click any where in template code window and press Ctrl+F to open a blogger search box, where you have to search given below code.
<data:post.body/>After search, you will get find 1 to 4 or 5 codes but you have to work with third code.
Step Third
Now you have to add given below code instead of above code.
<b:if cond='data:blog.pageType != "static_page"'>Step Fourth
<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>
Now search </head> and paste given below code before or above </head>.
<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 460;
img_thumb_height = 110;
img_thumb_width = 130;
</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: 0px dotted #E6E6E6; padding-bottom: 1px;}
.readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>
You can change number of characters when your post does not has image by default 500 characters.
If your post has image that means your post will show thumbnail and characters will be 400 by default. But you can change it as your wish.
If you want to change width or height of thumbnail so you can edit it. By default height - 150 and width - 180.
Not Working?
It is not working with my template?
If it is not working with your template don't worry! I have another solution.
And solution is - You have to follow all above steps but in second step I write "you have to work with third code" as highlighted in black colour. Now follow above steps with second code. If still not working then try with all one by one.
This code is verified and 100% working. But still you getting problem with this code. Leave you comment and that would be the final.
That's It!
No comments:
Post a Comment