Add 'Read Previous post' link at bottom of Posts in Blogger

If you have a well structured blog with links to right things at right places then your chances of getting more readers increases and that's what any blogger wants. This tutorial shows you how to add an good looking link to previous post at bottom of every post automatically.
When you are new with all this HTML and CSS thing in blogger then you add a static thank you message at bottom of post one by one in all blog post while writing it, but there's more you can do with the template, you can add your own elements in the template to make your blog look better.
Demo
This is a post you will find helpful if you want to add something at bottom of every post : http://stramaxon.blogspot.com/2012/07/adding-any-thing-under-every-post.html
Coming back to main topic of the post, it's about adding a link to previous post under each and every post automatically. Read further for the codes.

The skeleton HTML

Before you start, Backup your template.
As usual we need the HTML to be in place and then we will add some CSS effect on it. The HTML code is actually just an anchor HTML with bloggers layout data tags to dynamically get the link of previous or older post.

<a class='lst-post' expr:href='data:olderPageUrl' target='blank'>Read our Previous Post</a>

Copy the above HTML to your clipboard by selecting and clicking CTRL+C.

How to add this HTML

We have to place it in the template and to do that follow these steps.

1. Go to your Blogger Dashboard 
2. Select the Template tab (in new interface)
3. Now click on the 'Edit HTML' button on the page
4. Click on 'Proceed' 
5. Then check mark the box which says 'Expand Widget Template' (Important)
6. Use CTRL+F to find <div class='post-footer'> in the template, you may not copy and paste the text from here, type <div class='post-footer'> yourself in the search box which appears after hitting CTRL+F
7. Once you find this line  <div class='post-footer'> paste the HTML provided just above the code.
   
   
8. When you have place the right code at right place then you can Save the Template.

Now check one bottom of your one of post and you will see the link to previous post, but doesn't it look so dull ? It needs to be painted in CSS3 to attract reader's attention.

The CSS

.lst-post
{
    display:block;
    font-family:'verdana' !important;
    cursor:pointer;
    background-color:rgba(10, 74, 133, 0.49);
    margin-bottom:-5px;
    margin-top:16px;
    color:white !important;
    padding:5px 10px;
    -webkit-transition:background-color 0.3s ease-in-out;
    -moz-transition:background-color 0.3s ease-in-out;
    -o-transition:background-color 0.3s ease-in-out;
    -ms-transition:background-color 0.3s ease-in-out;
    box-shadow:0px 0px 4px gainsboro,inset 0px 0px 2px white !important;
    font-size:14px;
    text-shadow:1px 1px 1px grey;
    border-radius:4px;  
}
.lst-post:hover
{
    background-color:rgba(6, 128, 224, 0.49);
    text-decoration:none;
}

The CSS code is lengthy but useful, all you have to do is now to add the CSS in your template to apply the style onto the link.


Now follow these steps to know how to add the CSS into the template

1. Go to your Blogger Dashboard
2. Now select and Template 
3. In the Template tab you will see the customize button
4. You will enter the template designer
5. Click on the Advanced tab > Add CSS 
6. Now paste the CSS in the custom CSS box, Preview it before you save to make sure it's working well.
7. If it's okay, hit the Apply to Blog button refresh your blog with CTRL+F5 and see the link just below any of your post !

That's it ! This feature will keep your visitors engaged with your page and that's a good thing for your SEO and pageviews. Your readers will stay online for more time on your blog.                  

Your suggestions

You can help us make our blog post better by giving your suggestions and informing us about any error in post or the codes. Drop your precious comments which is very important for us. We will love to hear from you.