Thursday, February 23, 2017

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. 
How to add auto read more to awesome inc blogger template
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 




If You Enjoyed this Post, Kindly take 5 Seconds and Share it With Your Friends on

8 comments:

  1. It didnt work at first, but I tried about 4 more times, after reviewing my steps.. and later it worked.

    ReplyDelete
  2. Please how can i use my just approved youtube adsense account for my blog, please check my blog and help me@ www.giftnaija.blogspot.com

    ReplyDelete
    Replies
    1. Hello gift I do not know if the methods have chaneged, but the process is quite simple. You have to connect your Adsense Account to your blogspot blog.

      Just Now Sign in to your AdSense account.,,,, Then Go to Account Settings
      Now scroll down Access an authority, then use the email invitation option there to invite the email address that you use for your blog.

      Now go to your email inbox and accept the invitation, then visit google.com/adsense and use the email address you invited earlier to sign in

      Delete
  3. I just click on earning, and it says i have been approved, but when i try displaying my earning ads, it did not show on my blog, i have customise the ad gadget, stil, is not displaying on my blog

    ReplyDelete
    Replies
    1. If you place ad codes, it will take some minutes, before it's starts displayig

      Delete
  4. bro please help me, till now i cant find it on my site

    ReplyDelete
  5. Ok.. use the contact form on homepage to send me a mail.. with screenshots of what you have been trying to do

    ReplyDelete

***We ❤ to hear from you, Tell us Your views and opinion. Please note that comments are always moderated, Abusive comments won't be approved, and spammy comments are deleted automatically