Change Older Post and Newer Post With Buttons

Change Older Post and Newer Post With Buttons
Change Older Post and Newer Post With Buttons

Change Older Post and Newer Post With Buttons - Generally, the pagination on bloggers inscribed with Older Post or  Newer Post or in accordance with the selected language for your blog.



Have you ever seen a blog that pagination using button as shown below?



The buttons use in pagination are considered more attractive for some bloggers, but many bloggers doesn’t like it. If you consider that the use of buttons on pagination is more interesting but don't know how to apply it to your blog, then blogger tutorial try to discuss it this time.

Create HTML Image Code for Button

The first step you should prepare is the icon for the button. You can create yourself or download on free icons website provider. Example for free icons website provider  is http://www.iconspedia.com. For example, I will use the icon as follows:



Upload those icons to bloggers. For how to upload images to blogger has been discussed in posts How to upload images in Blogger and how to create HTML code to display the image on the blog in Create HTML Code to Display Image on Blog article. For example, button code will be used are as follows:

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigus3hf9cJRT3uJy8I8QvXqEwOCAhjI36dBpKM6zN0UNnT-ICRCAvkqHvYO3V-neeiWh4YuPDz7-PVIkRxz_VIbqTkDWgAIyNwnjzYkfR94PGgcelOsccyzyHTzkpOA4Yg0z9p-Rg6DAH3/s1600/left.png" />  <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUc80yxVUmxmb9wd2F-CHLkhGXsohxlcj-3q05aq1j8EEVb0q3DnZ1KLfc8gZRiowl8oyAa5gHDLYSTsmuQ3NV0yTRwLYBZ1qjEhry3gq5QkZcd0GwEISDAnhgcQP9eOOZ3s3fV_SVUcW8/s1600/home.png" />  <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTmG06gcqQMZz8oYYj8KfmZR8gmgKJj4k1zBEkNSyUW_KXMepEJJmAl2r0JTlR35_ANdVAzMmR3sAy6iFEicksO_HgZwHzBt0iMb3d2lpKwAvCbUeAQHq9vnLH5AxtbGCExdWMnXSuAU7O/s1600/right.png" /> 

Change Older Post and Newer Post with Buttons

Now it’s time to change your blog pagination code with button code which has been prepared.
Here are the steps:

1. Please login to blogger with your ID
2. Click Design
   
   
3. Click Edit HTML tab
   
   
4. Please backup your template first then click Download Full Template
5. Check the small box next to Expand Widget Templates
   
6. Find the following code:

   <span id='blog-pager-newer-link'>       <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>       </span>     </b:if>      <b:if cond='data:olderPageUrl'>       <span id='blog-pager-older-link'>       <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>       </span>     </b:if>      <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> 

7. Delete the code above and replace with the following code:

   <span id='blog-pager-newer-link'>       <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigus3hf9cJRT3uJy8I8QvXqEwOCAhjI36dBpKM6zN0UNnT-ICRCAvkqHvYO3V-neeiWh4YuPDz7-PVIkRxz_VIbqTkDWgAIyNwnjzYkfR94PGgcelOsccyzyHTzkpOA4Yg0z9p-Rg6DAH3/s1600/left.png" /></a>       </span>     </b:if>      <b:if cond='data:olderPageUrl'>       <span id='blog-pager-older-link'>       <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTmG06gcqQMZz8oYYj8KfmZR8gmgKJj4k1zBEkNSyUW_KXMepEJJmAl2r0JTlR35_ANdVAzMmR3sAy6iFEicksO_HgZwHzBt0iMb3d2lpKwAvCbUeAQHq9vnLH5AxtbGCExdWMnXSuAU7O/s1600/right.png" /></a>       </span>     </b:if>      <a class='home-link' expr:href='data:blog.homepageUrl'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUc80yxVUmxmb9wd2F-CHLkhGXsohxlcj-3q05aq1j8EEVb0q3DnZ1KLfc8gZRiowl8oyAa5gHDLYSTsmuQ3NV0yTRwLYBZ1qjEhry3gq5QkZcd0GwEISDAnhgcQP9eOOZ3s3fV_SVUcW8/s1600/home.png" /></a> 

8. Click Save Template
9. Finish

If you didn't do any mistakes, then your pagination inscribed with Older Post, Newer Post, and Home should has been turned into buttons.

*** Change Older Post and Newer Post With Buttons