Customizing Blogger Pager

Blogger’s Pagers refers to Home,Older Post and Newer Post.Blogger Pager can be customized using CSS why not its is also responsible of Increasing Visitor.As it is located below of Post setting however may visitor might not notice it.But if your visitor is Fan of your Blog then Pager helps them to  view older or newer post or helps to go home easily.Look at the Pager of Blogger Rounder it looks like this.

Table of Content.

1. Identifying The codes of pager.
2. Changing Pager to Image like blogger rounder.
3. Changing the Text of Pager.
4. Changing the sides of Pager(Older and newer Post )
5. Styling the pager using CSS.
6. Removing Pager.
7. Resource for successful implementation.

Identifying the Codes of Pager.

Before making any change we need to identify the pager codes.Pager Codes are located in Blogger Dashboard>Template>Edit HTML>Tick in Expand Widget.In my Template Pager codes looked like this(Before customization of Pager) what's yours.

    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <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>
      </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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

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

Did you Noticed highlighted lines.If not see lines 3,9,13.They are responsible for pager.Those Three tags are responsible for showing pager text.

Pager tag	Pager name
<data:newerPageTitle/>	Newer
<data:homeMsg>	Home
<data:olderPageTitle/>	Older

The ID of Pager are;

Pager ID or class name	Pager name
#blog-pager-newer-link	Newer
.home-link	Home
#blog-pager-older-link	Older

Changing Pager to Image.

To Change the pager just replace the pager tags with this.

<img src='ImageUrl'/>

In Image URL change with direct linking of Image.

Eg.If we want to change newer pager we will change <data:newerPageTitle/> to <img src='ImageUrl'/>

My Friends mohammad from mybloggertricks has made such heart touching image of pager you can download by clicking any one of link.Download will be started in one click(Don’t sell image because of copyright of MBT)

1. Home, Previous Next (Circular)

Changing Pager Text.

If you want to change pager text then just you need to replace the text with your own code.For example if We want to change newer pager to recent post then We will replace <data:newerPageTitle/> to recent post.If you want to use especial character like < > etc. then you need to encode it from here as browser mix them with tags and you may mess your Template.

Changing the side of pager.

To change the side of Pager just we need to edit CSS.Simply the pager codes tends to looks like this in Template.

#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}

Just you need to search these lines which is similar as it may be Different from another template.To switch sides just change float:left to right in line 2 and float:right to left in line 6 your work will be done.

Styling the pager.

If you want to style the pager like adding background etc. then add the CSS in pager like this

#pager id  or .pagerclass {
background:#xxxxx;
}

In Line 2 just replace #xxxxx with 6 digit color codes from resources (see below).If you want to add image as background then simply replace line 2 with this

background:url(ImageURL) no-repeat;

Removing Pager.

Got Tired of Pager and want to remove it just add this CSS in your Template.

#blog-pager {display:none}

Above code will remove all pager if you want to remove only one pager then do it like this.

#PagerId or .Pagerclass {display:none}

For example if you want to remove newer pager then you need to add this in your CSS.

#blog-pager-newer-link {display:none}

Resources for successful Customization of Pager.

• You may need to encode code which you can get it from here.
• You may need six digit html color code which you can get it from here.
• You may not know how to add CSS you can do this from here.

Admin of Blogger Rounder
Shirshak is the Administrator of the Blogger Rounder who thinks he will die next to Blogger. He is Completely devoted to Blogger and thinks Web Designing will makes is career.You contact using contact form from navigation tab to him.You can find him in Twitter.

Subscribe for free
Thanks for visiting Blogger Rounder.We can subscribe to Blogger Rounder'^s by RSS feed or email updates.