Adding Numbered Page Navigation For BloggerPage Navigation is a feature that really long mengagumnkan, besides that this model also has been eagerly awaited by Blogger Mania. Above I have provided the screenshot:
Well, if you're interested! If yes, then let us execute the way ^ _ ^ Just follow the simple steps.
1. Dashboard> Layout / Layout> Edit HTML "
2. If so click the Expand Widget Templates
3. Then find this code by pressing CTRL + F on your keyboard:
]]></b:skin>
Place this code above ]]></b:skin> :.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
CSS codes above you can customize to your tastes, and do not alter the code if you do not understand because it will cause undesirable.
5. Back to the trick, now looking for the code and replace with the code below:
<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://die-silver.googlecode.com/files/blognavigasi.js' type='text/javascript'/>
</b:if>
<!--Page Navigation Ends-->
</body>
Consider the following code
var pageCount=5;
Figures in the code is to display the number of posts that will be visible on every page navigation. Save and your done. DEMO
Do you find this article useful? Share it via Retweet, Share. Any suggestion, question or comment? Please post it in the comments below.
