How To Add Auto Read More To Awesome Inc Blogger Template

Awesome Inc blogger template is chosen by many bloggers because it is lightweight and fast. But finding the tutorials online on how to customize the template can be quite challenging to newbie blogger, especially if you don't know what search term to use in other to get the desired results. 

In this post, you will learn how to add Auto Read More to your Awesome Inc. blogger template. But before we do do that, you may like to know that there are several ways to add an auto read more button to your blog posts, and the are;

1.    Using Javascript

2.   Using Jump break in blogger post editor

3.    Using CSS


All of the above methods works perfectly if you apply the procedures correctly. But in this Article, we will be learning how to add Auto Readmore Button to your Blogger posts using CSS. Just follow these simple steps, and you'll get it done.

1.    Login to your Blogger dashboard, then navigate to Template, then go to Edit HTML

2.   Press Ctrl+f to open the search box, then look for this code ]]></b:skin>

3.    Now paste the code below, above ]]></b:skin>

.thumbnail-post {
  width:240px;
height:156px;
float:left;
margin:0px 10px 0px 0px;
}

4.   FInd this code <data:post.body/> then repplace 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>

(There might be 2 or 3 occurrences of this code, but you will have to replace the one that is around or close to   <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->)

===>>>    Important Tip, first copy the codes to your notepad, so as to remove every font customizations 

PLACE YOUR MID-POST ADS CODE HERE FOR pc