Home » » Numbered Page Navigation For Blogger a Simple Step

Numbered Page Navigation For Blogger a Simple Step

Written By Su Hadma on Sunday, August 25, 2013 | 7:57 PM

Webpage Navigation facilitates site visitors to explore our site and view page for every page. Blogger did not aid web page navigation. Webpage Navigation is a genuinely awesome and lengthy awaited attribute. Muhammad Rias of Techie Blogger experienced currently produced a web page navigation program for blogger.It really was an amazing trick which was created at a time when no person could even believe of implementing it on blogger.It experienced some small bugs and now Abu Farhan has perfected it and he has now provided us the perfect website page navigation remedy.

For WordPress users should previously be familiar with website page navigation. For Blogger consumers let's do this.

Below are the measures:

one.Login to Blogger Dashboard and navigate to Layout > Edit Html

2.Checkbox which claims 'Increase Widget Templates'

three.Now uncover

]]></b:pores and skin>

and change it with

.showpageArea 
padding:10px

.showpageArea a
textual content-decoration:underline

.showpageNum a
textual content-decoration:none
border: 1px sound #ccc
margin: 5px
padding:5px
history:#fff

.showpageNum a:hover
border: 1px reliable #ccc
qualifications-shade:#f0f0f0

.showpagePoint
coloration:#333
textual content-decoration:none
border: 1px strong #ccc
history: #f0f0f0
margin: 5px
padding:5px

.showpageOf
text-decoration:none
padding:5px
margin: 5px

.showpage a
text-decoration:none
border: 1px solid #ccc
padding:5px
track record:#fff

.showpage a:hover
text-decoration:none
track record:#f0f0f0

.showpageNum a:hyperlink,.showpage a:url
text-decoration:none
color:#333

]]></b:skin>

This is the CSS component which defines the seem and truly feel of the website page navigation.You can modify it in accordance to your want

four.Up coming is the JavaScript part. Find

</physique>

and replace it with

<!--Webpage Navigation Commences-->
<b:if cond='data:weblog.pageType != "item"'>
<b:if cond='data:website.pageType != "static_webpage"'>
<script variety='text/javascript'>
var pageCount=5
var displayPageNum=5
var upPageWord ='Previous'
var downPageWord ='Next'
</script>
<script src='http://bloggergadgets.googlecode.com/data files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
</physique>

5.Now Conserve

0 comments:

Post a Comment