Monday, May 22, 2017

How To Add Auto Readmore To Blog Posts On Blogger Default Template

Auto Readmore

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 != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <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 == &quot;item&quot;'>
    <data:post.body/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <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!! 

No comments:

Post a Comment

Designed by scholarmaris'z Blog