How To Add Auto Readmore To Blog Posts On Blogger Default Template
Hello fellow bloggers,, I am back again with another tutorial of interest to you all newbie bloggers.... This afternoon, I am going to be showing and teaching us how to implement Readmore button to your blog post on blogger default template... They are actually 3 ways you can do that;-
1. Via Css
2.Via javascript
3.Via using jump break in blogger post editor.
Number 3 is commonly used because some don't know it can be done automatically.....but I am going to be showing you how to add Auto Readmore via css...
So let me show you guys how to do it... Backup your template just incase..
Firstly:- Log onto your Blogger dashboard, then navigate to Themes, then go to Edit Html,
Secondly :-Click anywhere in the box and Press Ctrl+f to open the search box, then look for this code
]]></b:skin>
Thirdly:- Now paste the below code, directly above ]]></b:skin>
.thumbnail-post {
width:240px;
height:156px;
float:left;
margin:0px 10px 0px 0px;
}
Now after that, FInd this code <data:post.body/> then replace it with the code below
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'><img class='thumbnail-post' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/></a>
<b:else/>
<a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='Your Image thumbnail link'/></a>
</b:if>
<div class='post-snippet'>
<data:post.snippet/>
</div>
<div class='rm-button-wrap'>
<a class='button' expr:href='data:post.url'>Continue Reading</a>
</div>
</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>
You may find multiple occurrences of the above code( <data:post.body/>) but you will need to stop at the second one..... Then save template..
Goodluck!!!
Feel free to drop your comments if it works for you!!
medianaij love your comment