Beautiful Numbered Pagination For Blogger

So friends today I’m going to share our 3rd widget on this blog. This Widget is basically of Numbered Pagination For Blogger, it may help you because this is really need of every blogger that make his blog attractive and stylish and this is help you for making your blog more stylish, attractive and good looking. So let me give you this widget for free and make your blog more attractive and stylish.

Features of This Widget

This widget has many features I’m Going to tell you about some of them so read them below:

1. Fast Loading Widget
2. Especially built with CSS3 and HTML5
3. Easy to add
4. Awesome Hover Effect
5. Awesome Design of Widget
6. Responsive on any browser
7. Works in mobile also

Tutorial on How You Can Add This Widget

So Friends, I’m Going to give you the widget with easy steps to understand and you’ll easily add this widget I know surely.

NOTE: Follow the instructions carefully

Step 1

1. Go To Blogger
2. Template > Edit HTML
3. Ctrl + F
4. Now find ]]></b:skin>
5. add this coding above it

/* Pagination by bornblogger.net

———————————————– */
#showpageArea {
margin:0;
padding:0;
}
.showpageArea a {
font-family: ‘Oswald’, sans-serif;
font-size:14px;
font-weight:normal;
text-decoration:none;
}
.showpageNum a {
font-family: ‘Oswald’, sans-serif;
background:#eee;
font-size:16px;
font-weight:normal;
text-decoration:none;
border:1px solid #ccc;margin:0 3px 0 0;padding:5px 10px;color:#474747;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;transition: all 0.3s ease-in;}
.showpageNum a:hover {
border:1px solid #1573A3;
background-color:#2288bb;
color:#fff;
}
.showpagePoint {
font-family: ‘Oswald’, sans-serif;
border:1px solid #1573A3;
background-color:#2288bb;
color:#fff;font-size:16px;
font-weight:normal;
text-decoration:none;
margin:0 3px 0 0;
padding:5px 10px;
}
.showpageOf {
font-family: ‘Oswald’, sans-serif;
display:none;
font-size:16px;
font-weight:normal;
text-decoration:none;
padding:5px 10px;margin: 0 3px 0 0;
color: #ccc;
text-transform:none;
}
.showpage a {
font-family: ‘Oswald’, sans-serif;
border:1px solid #ccc;
background-color:#eee;
color:#474747;
font-size:16px;
font-weight:normal;
text-decoration:none;
padding:5px 10px;
margin: 0 3px 0 0;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.showpage a:hover {
border:1px solid #1573A3;
background-color:#2288bb;
color:#fff;
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
}

Step 2

1. Now find </body>
2. add this code to below this

<!–Page Navigation Starts–>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<script type=’text/javascript’>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src=’http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js’ type=’text/javascript’/>
</b:if>
</b:if>
<!–Page Navigation Ends –>

1. Now save your template
2. Done!!

Final Words

So Friends Now I have successfully give out this widget to you all I hope that you will like this one and this widget will goanna rock on your blog I worked whole day and then I have completed this widget and now I’m very satisfied with this widget and I think all the bloggers love it! . I’m also designing a blogger template so be in touch with us by subscribe us and liking our Facebook page. Happy Blogging and Keep Blogging!