Replace Blogger Newer, Older and Home Navigation Links With Image

Replacing Page Navigation Links With Image:

By default Blogger blog's having page navigation links like Newer, Home and Older post links. You can see these page navigation links just below each blog post. We can customize these links for easy navigation. We can add images to the page navigation links in Blogger blog. You can also add numbered page navigation links to your Blogger. Here I'm explaining how to replace Newer, Older and Home navigation links with image buttons on your Blogger blog.

How to Replace Blogger Home, Newer and Older Post Links With Image:

Before going to start replacing page links with images, first create image buttons and save images in any image hosting sites and get image links. Next replace page navigation code with images using image tag 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 the place of your image url linkin the above image tags, place your customized image url links.

Like this you can customize page navigation links in your Blogger blog. First create image buttons before replacing navigation link with images. Many resources are there on the internet to create image buttons. after creating image buttons, save those images on image hosting sites like picasa, photobucket and get image buttons url links. Replace default navigation links with your customized image buttons by fallowing above steps .

Read More

Rename newer post, home and older post links in blogger

How to change newer post, home and older post links in blogger :

We can customize blogger pager links as we require.We can change names of blog pager links on blogger.Default pager links name like newer post, home and older post.These links will appear below posts on blog.

Follow below steps to change newer blogger pager links text

step 1 : go to blogger dashboard

step 2 : click on template

step 3 : click on edit HTML

step 4 : do as below to change pager links ad next first and previous

To change newer post link name :

search  <data:newerPageTitle/>

rename <data:newerPageTitle/> as Next

To change home link name :

 search <data:homeMsg/>

rename <data:homeMsg/> as First 

To change older post link name :

search <data:olderPageTitle/>

rename <data:olderPageTitle/> as Previous

step 5 : click on save template.

Now you can see pager links as Next , First and Previous on your blogger blog.

Read More

Customize blog pager in blogger

How to customize blog pager in Blogger :

You can see the blog pager under blog page (below last post in a page) on your Blogger blog. Newer post, Home and Old post links will appear on blog pager. We can increase the size of blog pager and page navigation links font, also change background color and border of pager.

Follow below steps to customize blog pager in your Blogger blog

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML

Step 4 : Search  #blog-pager {

Increase blog pager size:

padding: 20px;

Increase value in padding attribute to increase blog pager size.

Increase blog pager navigation links :

font-size: 150%;

Increase value in font-size attribute to increase blog pager navigation links font size.

Like this you can also change blog pager background color and border

Step 5 : Click on Save template.

Read More