Customize older and newer post links in blogger

Posted by: Dapinder Singh on 7/07/2013 Categories: |

This post is about customizing the default older posts, newer posts and home links in blogger blogs. These links are available below every post in blogger. They are used by the blog visitors for navigating through the whole blog archive. The default pagination links in blogger are just like simple links which looks very unattractive and ugly .One good thing about these links is that they can be customized easily with the help of small CSS code. In this post we explained about 5 different designs for customizing older post, newer posts and home links in blogger blogs.

Also read:

5 designs for customizing read more link

5 designs for customizing blogger labels

5 search box designs for blogger

4 designs for customizing popular posts widget

Customizing older, newer and home links in blogger

  • Login to your blogger dashboard.
  • Select your blog.
  • Select Template option.
  • Select Edit HTML option.
  • In the template code find ]]></b:skin>
  • Paste any one of the following code just above it.
  • Save the template and you are done.

Design 1: Leaf Style

leaf style blogger pager links

.blog-pager a
{
background: #8fc400;
padding:5px;
font:18px verdana,arial;
text-decoration:none;
color:#ffffff;
transition:all 1s;
-o-transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
border-top-right-radius:20px;
-moz-border-radius-topright:20px;
-webkit-border-top-right-radius:20px;
border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
-webkit-border-bottom-left-radius:20px;
}
.blog-pager a:hover
{
background:orange;
text-decoration:none;
border-radius:0px;
border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
-webkit-border-top-left-radius:20px;
border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
-webkit-border-bottom-right-radius:20px;
}

 


Design 2: Elegant links with transitions


Customize blogger pager links

.blog-pager a
{
font:22px georgia,verdana;
text-decoration:none;
color:#222222;
transition:all 1s;
-o-transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
}
.blog-pager a:hover
{
text-decoration:none;
color:#3bb4d7;
}

 


Design 3: Pill Style


Pill style blogger pager

.blog-pager a
{
background: #2c539e;
padding:5px;
font:18px georgia,arial;
text-decoration:none;
color:#ffffff;
transition:all 1s;
-o-transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
border-radius:10px;
}
.blog-pager a:hover
{
background:#222222;
text-decoration:none;
}

 


Design 4: Dotted border style


Design 4

.blog-pager
{
background: #f8f8f0 ;
border:1px dashed #dcdcdc;
padding:10px;
}
.blog-pager a
{
padding:6px;
border:1px dotted #222222;
font:16px verdana,arial;
text-decoration:none;
color:#222222;
border-radius:10px;
}
.blog-pager a:hover
{
text-decoration:none;
}

 


Design 5: Dark Style


Design 5

.blog-pager
{
background: #180000 ;

border-radius:30px;
padding:10px;
}
.blog-pager a
{
background: #b6e026;
padding:5px;
font:18px georgia,arial;
text-decoration:none;
color:#ffffff;
transition:all 1s;
-o-transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
border-radius:10px;
}
.blog-pager a:hover
{
background: #180000 ;
text-decoration:none;
}

2 comments :

  1. or you could just go to Template - Customize - Advanced - Add CSS

    worked for me

    ReplyDelete
  2. great tip for new bloggers like me..... Keep continuing sharing ideas...... Make Money , Blogging Tips

    ReplyDelete

Windroidclub © 2012 - 2014. All Rights Reserved | Powered by-Blogger

Designed by-Windroidclub Themes