How to Customize Blog Pager in Blogger

In Blogger, you can see the Newer post(s), Home, Older post(s) links in default Blogger templates. Those are called as blog pager.

You can customize the blog pager as per your need.​

I highly recommend you to take a backup of your Blogger template before doing any changes. Let’s get started.

Customize Blog Pager

Switch Sides of Older Post(s) and Newer Post(s) Links

  • Go to Template > Customize > Advanced > Add CSS
  • Add the following lines
  • #blog-pager-newer-link

    {

    float:right;

    }

    #blog-pager-older-link

    {

    float:left;

    }

  • Click “Apply to Blog”.

Now, the Older and Newer links positions should be switched.

Increase Blog Pager Size and its Font Size

  • Go to Template > Customize > Advanced > Add CSS
  • Add the following CSS code to increase the blog pager size. Increase the padding size and get the blog pager size you need.

#blog-pager{

padding:20px;

}

  • The following is the CSS code for changing the blog pager font size

#blog-pager{

font-size:130%;

}

Use Custom Text and Font

If you want to change the font of the entire blog pager, use the below CSS code

#blog-pager{

font-family:’impact’;

}

If you want to change font individually for Older post, Newer post, and Home links, use the below code

#blog-pager-newer-link{

font-family:’font name’; // change the font name to your desired font name

}

#blog-pager-older-link{

font-family:’font name’;

}

.home-link{

font-family:’font name’;

}

To change the blog pager text with your own text, follow the below steps

  • Go to Template > Edit HTML
  • Find the <data:newerPageTitle/> in the code. Use Ctrl + F to quickly find the code.
  • Blog pager with default text
  • Delete the <data:newerPageTitle/> and replace it with your own text.
  • Blog Pager with Own text
  • For the Home text, find <data:homeMsg/>. Delete and replace it with your own text.
  • For the Older posts text, find <data:olderPageTitle/>. Delete and replace it with your own text.

Replace Blog Pager Text with Images

  • Go to Template > Edit HTML
  • Find the <data:newerPageTitle/>
  • Delete the code <data:newerPageTitle/> and replace it with this code <img src=”your image URL”/>

Now, the text won’t appear in the links and the images will represent the links in the blog pager.

Add Background and Border

  • If you want to place a picture beside the Newer posts links, you can do this by adding the following line of code before link
  • <img src=”Your image URL “/>

  • It will be like this
  • <img src=”Your image URL “/> <data:newerPageTitle/>

  • Save the template.

Now, the images will appear beside the links. You can do the same for the Older posts and Home links in the blog pager.

To change the color of the blog pager, use the following code

#blog-pager

{

background:#000666;

}

To change the background of the individual links, use the following code

.blog-pager-older-link

{

background:#002326;

}

.blog-pager-newer-link

{

background:#002326;

}

.home-link

{

background:#002326;

}

To use the images as background for the links in the blog pager, use the following code

.blog-pager-older-link

{

Background: URL(‘Your Image URL’);

}

.blog-pager-newer-link

{

background: URL(‘Your Image URL’);

}

.home-link

{

background: URL(‘Your Image URL’);

}

To add the border to the blog pager, use the following lines of code

.blog-pager

{

border: 3px dashed #32CD32; //Customize the code to change the border.

}

Blog pager with Border

Hiding the Blog Pager

If you want to hide the blog pager, use the following lines of code

.blog-pager {

Display:none !important;

}​

I hope that the information in this post is useful to you. If you find the information in this post useful, share this post with your friends.​

See:

Share Your Thoughts

3 Shares
Tweet
Share
+1