Blog pager with ease-in-out effect for Blogger

Many blogger don't like to use blog Number pagination because sometimes it make the template loading time delay. So those blogger who wants to use stylish blog pager they can use this widget. Because I have not only customized the Blog Pager but also I have added ease-in-out effect where if you just mouse over on older post or newer post button then you can see the effect. I have set invisible the Home button to make the effects professional and you can also use this widget with Number Pagination. So try it into your blog..

Step 1 Log in to your blogger account and Click on Template  ->

Step 2 Now click on Edit HTML-> Unfold code  ►

Step 3 Now find ]]></b:skin> by Pressing  Ctrl + F

Step 4 And Paste the below code above ]]></b:skin> and save your template

/* Blog pager by www.bloggerspice.com */
.home-link{
display:none;}
#blog-pager-newer-link {
float: right;
color: white;
padding: 10px;
text-align: center;
overflow: hidden;}
#blog-pager-older-link {
float: left;
padding:5px;
text-align: center;
overflow: hidden;}
#blog-pager-older-link a:hover {margin-left:20px;}
#blog-pager-newer-link a:hover {margin-right:20px;}
#blog-pager-older-link a, #blog-pager-newer-link a {
color: #fafafa;
line-height: 33px;
padding: 4px 25px 4px 25px;
background: #111111;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
border-radius: 5px;}
#blog-pager {
color: #DDD;
text-align: center;
text-transform: capitalize;
font-size: 16px;
float: left;
font-weight: normal;
letter-spacing: -1px;
font-family: 'Open Sans', sans-serif;
overflow: hidden;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
width: 625px;
border-radius: 5px;}

Customization

• Alter #111111 Color code to change the Pager background color
• Change 625px to set the width of the Pager.