Today in this post i will be sharing a handsome number page navigation widget for blogger.


Firstly let's have a quick look at the appearance of this widget





And now lets move towards the guide.
                                                  Click here for : Image credits

Navigation widgets are essential for a good reader experience as it makes it easy for the reader to get across pages and in a nice and neat way.

Add Numbered Navigation Widget to blogger : 


1.Go to your blogger dashboard and select your blog.

2.Now head to the layout section of your blog in the extreme right corner of the screen.


Recommended Post :-Customize Newer Posts, Older Posts & Home Link In Blogger
Recommended Post :-Add Your Signatures Under Blog Posts
Recommended Post :-How to Figure Out Originality of a Content

 3.Now add the Html javascript gadget to your blog and paste the below code in it.

 <style> .showpageNum a {
background: #02ab68;
padding: 5px;
padding-left: 10px;
border: 1px solid #b9b9b9;
padding-right: 10px;
margin-right: 5px;
color: #000;
font-weight: bold;
}
.showpage a {
background: #02ab68;
padding: 5px;
padding-left: 10px;
border: 1px solid #b9b9b9;
padding-right: 10px;
margin-right: 5px;
color: #000;
font-weight: bold;
}
.showpageArea {
float: left;
}
.feed-links {
display: none;
}
.showpageArea a {
float: left;
font-size: 15px;
color: #fff!important;
padding-left: 15px;
padding-right: 15px;
}
.showpagePoint {
float: left;
font-size: 15px;
padding-left: 15px;
padding-right: 15px;
}
.showpageArea a {
text-decoration: none;
}
.showpageArea {
float: left;
width: 363px;
margin-top: 10px;
}</style>
<!--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='http://widcraft.googlecode.com/svn/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->

code credits: MBL


 5:Now hit the save icon and you will find the navigation widget in your blog.


Any suggestions any queries will be welcomed ,do tell us how useful you found this post and if it helped you so please consider sharing it.More like these will be coming in future so stay in touch with Eliteblogpress.
Was the content worth a share?
Posted by Hamza Posted on 02:40 3 Opinions
Categories:

3 comments:

Subscribe to: Post Comments (Atom)

Translate

Follow via: