Replace Blogger Newer, Older and Home Navigation Links With Images

Replacing Page Navigation Links With Images:
By default, Blogger blogs have page navigation links such as "Newer", "Home", and "Older" post links. These links appear below each blog post and can be customized for easy navigation. One way to customize these links is by adding images to them. Additionally, numbered page navigation links can also be added to your Blogger blog. Here, I will explain how to replace the "Newer", "Older", and "Home" navigation links with image buttons on your Blogger blog.

How to Replace Blogger Home, Newer, and Older Post Links with Images:

Before starting the process of replacing page links with images, first create image buttons and save them in any image hosting site. Then, get the image links. Next, replace the page navigation code with images using image tags in your Blogger template code.

Follow the below steps to replace Newer, Older and Home navigation links with images on your Blogger blog .

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML

Step 4 : Search for below code

<data:newerPageTitle/>

and replace it with image tag

<img src="http:your image url link"/>


Next search for <data:olderPageTitle/>

and replace it with image tag <img src="http:your image url link"/>


And again search for <data:homeMsg/>

and replace it with image tag <img src="http:your image url link"/>

Step 5 : Click on Save Template.

Note: In place of "your image url link" in the above image tags, replace it with the customized image url links that you have created.

Using this method, you can customize the page navigation links in your Blogger blog. First, create the image buttons before replacing the navigation links with images. Many resources are available on the internet to help you create image buttons. After creating the image buttons, save them on image hosting sites like Picasa or Photobucket, and get the image button URL links. Then, replace the default navigation links with your customized image buttons by following the steps outlined above.

No comments:

Post a Comment