Add Simple Pagination In Blogger.Com Blogs

This Widget is basically of Numbered Pagination For Blogger, it may help you because this is really need of every blogger to make his blog more attractive and stylish. So this Widget will 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.

Demo

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 for sure.

NOTE: Follow the instructions carefully

Step 1

• Go To Blogger
• Template > Edit HTML
• Ctrl + F
• Now find ]]></b:skin>
• Add this coding above it

/*------- Simple Pagination By BloggerJinni.Blogspot.Com------*/
.showpagePoint,.showpageNum a,.dotxpage,.showpage a {
text-decoration:none;
display:inline-block;
padding:5px 7px
}
.showpagePoint,.showpageNum a,.showpage a {
border-radius:2px;
margin-right:2px;
color:#FFF;
position:relative
}
.showpageNum a:visited {
color:#FFF
}
.showpageNum a,.showpage a {
background-color:#fff
}
.showpagePoint,.showpageNum a:hover,.showpage a:hover {
background-color:#f09903;
text-decoration:none
}
.showpageNum a:active,.showpage a:active {
top:1px
}
.showpageNum a,.showpage a {
color:#FFF;
text-decoration:none;
text-shadow:1px 0 1px #000;
padding:7px 14px;
background:none repeat scroll 0 0 #282C2F;
font-family:Oswald;
box-shadow:1px 2px 9px rgba(135,135,135,1);
border:4px solid #FFF;
margin:5px 2px
}
.showpagePoint,.showpageNum a:hover,.showpage a:hover {
color:#FFF;
text-shadow:1px 0 1px #000;
background:none repeat scroll 0 0 rgba(0,0,0,1);
border:4px solid #FFF;
margin:5px 2px;
padding:7px 14px;
box-shadow:1px 2px 9px rgba(135,135,135,1);
font-family:Oswald
}
.showpageOf {
display:none
}

Step 2

• Now find </body>
• 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=6;
var displayPageNum=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='https://mirocine.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->

• Now save your template
• 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!. Be in touch with us by subscribe us and liking our Facebook page. Happy Blogging and Keep Blogging!

• Tweet
• Share
• Share
• Share
• Share

About Admin

Syed Zaver Abbas is SEO expert in pakistan. he is web designer, web developer, software developer and graphics designer that means he is multi talented. he is also learning more about computer science.

Related Post