class="tr_bq"> How To Add Auto Readmore To Blog Posts On Blogger Default Template - Get Latest News On Universities,Polytechnics And College Of Education | Winnyz Blog How To Add Auto Readmore To Blog Posts On Blogger Default Template | Get Latest News On Universities,Polytechnics And College Of Education | Winnyz Blog Get Latest News On Universities,Polytechnics And College Of Education | Winnyz Blog: How To Add Auto Readmore To Blog Posts On Blogger Default Template

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

Opinions Are Highly Appreciated!!!!

Thanks For Dropping Your Comments..... Winny'z Blog

Designed by Winny'z blog