Monday, 8 July 2013

How to Change - Home/Next/Previous Links to Buttons?

Posted by Arun Kumar Choppara On 13:27 | No comments

The navigation between the pages of the blog is very much important as we can't have all the blog spots on a single page. As the number of blog posts extend to multiple pages on the blog (with specific number of posts on a blog page) the blog should always contain the links for Previous and Next posts on the blog. If we are using a blogger template, then the template will come with the links for the page navigation i.e default links for Next, Previous and Home pages of the blog.

Using beautiful buttons for the these navigation links will make the blog look more attractive and user friendly. So we can have the beautiful and customized buttons for the links Previous, Next and home buttons we have on the blogger template.


Let us see the process of Changing the default links to customized cool Navigation buttons.


1. Go to: Dashboard-> Template-> Edit HTML

image1

2. Find the below mentioned codes from the blog template HTML code. These codes represents the data to be displayed for Home, Previous and Next links on the blog.

<data:newerPageTitle/> represents the display of Newer Posts link
<data:olderPageTitle/> represents the display of Older Posts link
<data:homeMsg/> represents the display of Home link

image2

3. Now replace these codes with the data/pic to be displayed.
<data:newerPageTitle/> with the new display data/picture for newer (next) posts
<data:olderPageTitle/> with the new display data/picture for older (previous) posts
<data:homeMsg/> (only the first one) with the new display data/picture for homepage

ExamplesLight bulb


Example1: Replace the default display with new display data

image3

Example2: Replace the default display with a display button image

image4

Example3: Replace the default display with a display button image as well as different Text display.

Just add the display text before the end tag </a> from the above code in Example2 to display both the button image and new text display.

 

Now we are familiar with the process of changing the Next/ Home/ Previous links to Buttons on the blog.
If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.

Reactions:

0 comments:

Post a Comment

ABOUT ME

Founder & Author: Hi Friends, my name is Arun Kumar Choppara. I am a Software Engineer by profession and a passionate blogger. I have started blogging as a hobby and now addicted to it.
...Read More