Pages Navigation for Blogger (Blogspot) Previos Number Next

Pages Navigation for Blogger (Blogspot) Previos Number Next
Page Navigation is a feature that really long, 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. Note: Before you change Html codes, Download your template for the Back-Up.
4. Then find this code by pressing CTRL + F on your keyboard: ]]></b:skin>
5. 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;
}

Note: 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.
6. Back to the trick, now looking for the code </body> and replace with the code below:

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&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://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

0 comments:

Post a Comment