Style your blog pager

Style your blog pager (those newer, home and older Posts links)

This tutorial will show you five hacks to change the look of Blogger blog pager. Blog pager are those “Newer Post(s)”, “Home” and “Older Post(s)”  links at the bottom of your blog page. Here they are:

1. Changing the text with your own text
2. Replacing the text with an image
3. Switch sides between “Newer Post(s)” and “Older Post(s)”
4. Adding background to the text
5. Removing the pager from page

Okay let’s proceed. First you have to find the blog pager code.

1. Login to your Blogger account.
2. Go to Dashboard > Design > Edit HTML.
3. Back up your template.
4. Tick the  Expand Widget Templates check box on top right of the HTML window.
5. Look for following code:

01	<b:includable id='nextprev'>

02	<div class='blog-pager' id='blog-pager'>

03	<b:if cond='data:newerPageUrl'>

04	<span id='blog-pager-newer-link'>

05	<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>

06

</span>

07

</b:if>

08	<b:if cond='data:olderPageUrl'>

09	<span id='blog-pager-older-link'>

10	<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>

11

</span>

12

</b:if>

13	<b:if cond='data:blog.homepageUrl != data:blog.url'>

14	<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

15

<b:else/>

16	<b:if cond='data:newerPageUrl'>

17	<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

18

</b:if>

19

</b:if>

20

</div>

21	<div class='clear'/>

22	</b:includable>

You want to take notice three data tags in line 5, 10, 14 and 17. Below are the three data tags and their corresponding link texts.

Data tag	Link text
<data:newerPageTitle/>	Newer Post(s)
<data:homeMsg/>	Home
<data:olderPageTitle/>	Older Post(s)

1. Changing the text with your own

To change the link text with your own, just replace the data tag with your intended text, for example if you want to replace “Newer Post(s)” with “Newer Entries”, just replace
<data:newerPageTitle/> with Newer Entries
Note: Special characters such as “/”, “<”, “>” and quotation mark need to be converted to escaped characters, otherwise Blogger will interpret it as a part of your template code, which could potentially mess up your template. You can convert it with Quick Escape.

2. Replacing the text with an image

To use an image, replace the data tag with this:
<img src="YOUR_IMAGE_URL" />
YOUR_IMAGE_URL is the URL of the image that you are replacing the link text with.

3. Switch sides between “Newer Post(s)” and “Older Post(s)”

If you want to switch sides between  “Older Post(s)” and “Newer Post(s)”, look for something like this in the CSS section of your template code:

1	#blog-pager-newer-link {

2	font-size:12px;

3	float: left;

4

}

5	#blog-pager-older-link {

6	font-size:12px;

7	float: right;

8

}

just switch the floats - float:left; to float:right; and vice versa.

4. Adding background to the text

This can be done in CSS by applying background code to the respective HTML element classes, namely .blog-pager-older-link, .home-link and .blog-pager-newer-link.
For example to apply green background to “Older Post(s)”, use:
.blog-pager-older-link {background: #00FF00;}
To use an image as a background, use:
.blog-pager-older-link {background: url(YOUR_IMAGE_URL) no-repeat;}

5. Removing the pager from page

Two ways of achieving this:

1. Actually remove the HTML element -by deleting the above HTML code.
2. Hide it,  using CSS display:none. I prefer this method because it is easy to apply and easy to undo. For example if you want to remove the “Home” link, just add this code:
   .home-link {display:none}
   and if you want to remove all three links at once, use this:
   #blog-pager {display:none}
   To unhide, simply remove the added code.
   

Add the CSS code snippet (in no.4 and 5) right before ]]></b:skin> in your template.
If you are using a Designer template, you can also add the CSS code snippets using custom CSS editor.
That’s it. Enjoy!
Like our Facebook page: