How To Add A Page
Navigation On Blogspot
by: Keith
In this tutorial if you wanted to create a free blog you need to consider this one in the design.
We’ll add not just one but eight styles of
Page Navigation.
Before you begin I highly suggest that you backup your
template. Once you’ve done that, login to your Blogger account and head over to
the “Edit HTML” option under “Layout” menu in your dashboard. There mark the “Expand
Widget Templates” check box.
Look for </b:skin> in the code and then insert this
script before it:
Step 1)
|
.pagenavi{clear:both;margin:10px
auto;text-align:center}
.pagenavi span,.pagenavi a{padding:3px;margin-right:5px;background:#fff;border:1px solid #c20c0c} .pagenavi a:visited{color:#c20c0c} .pagenavi a:hover,.pagenavi .current{background:#c20c0c;color:#fff;text-decoration:none} .pagenavi .pages,.pagenavi .current{font-weight:bold} .pagenavi .pages{border:none} |
Next, look for this code:
|
<b:widget
id="Blog1" locked="true" title="Blog Posts"
type="Blog">
|
Then insert this below it:
Step 2)
|
<b:includable
id="page-navi">
</b:includable></code> <div class="pagenavi"> <code><script type="text/javascript"> var pageNaviConf = { perPage: 5, numPages: 5, firstText: "First", lastText: "Last", nextText: "»", prevText: "«" } </script> <script src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js" type="text/javascript"> </script> |
Lastly, look for this:
|
<!--
navigation -->
<b:include
name='nextprev'/>
|
And replace it with this:
Step 3)
|
<b:if
cond='data:blog.pageType == "index"'>
<b:include name='page-navi' /> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <b:include name='page-navi' /> </b:if> </b:if> |
Save your template and see the result!
As for the eight (8) styles I mentioned above, here they
are. Simply replace the code indicated inside the box in Step 1).
Style 1
 |
|
.pagenavi{clear:both;margin:10px
auto;text-align:center}
.pagenavi span,.pagenavi a { font-size:12px;padding: 2px 4px 2px 4px;margin: 2px;border: 1px solid #dfdfdf;color:#000;} .pagenavi a:visited{} .pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #e81d1d;border: 1px solid #fb1515;text-decoration:none;} |
Style 2
 |
|
.pagenavi{clear:both;margin:10px auto;text-align:left}
.pagenavi span,.pagenavi a {background:#0e0f10;font-size:12px;padding: 3px 5px;margin: 2px;border: 1px solid #333;color:#fff;} .pagenavi a:visited{} .pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #33393f;border: 1px solid #444;text-decoration:none;} |
Style 3
 |
|
.pagenavi{clear:both;margin:30px auto
20px;text-align:center}
.pagenavi span,.pagenavi a{background:#24bde2;border:1px solid #4adcff;padding:3px 8px;color:#fff;margin:2px;font-size:12px} .pagenavi span{color:#3a3a3a} .pagenavi a:hover,.pagenavi .current{color:#fff;background:#ff6734;border:1px solid #ddd;text-decoration:none} .pagenavi .pages{display:none} |
Style 4
 |
|
.pagenavi{clear:both;margin:30px auto
20px;text-align:center}
.pagenavi span,.pagenavi a{background:-moz-linear-gradient(center top,#96aeba,#536a75) repeat scroll 0 0 transparent;border:1px solid #616e76;padding:4px 8px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:4px} .pagenavi span{color:#3a3a3a} .pagenavi a:hover,.pagenavi .current{color:#fff;background:#c70e0c;border:1px solid #782f28;text-decoration:none} .pagenavi .pages{color:#fff} |
Style 5
 |
|
.pagenavi{background:#3498b9;clear:both;margin:30px
auto 20px;text-align:center;border:1px solid #2f7a93;padding:4px 0}
.pagenavi span,.pagenavi a{font-weight:bold;padding:7px 8px;color:#fff;margin:1px;font-size:11px} .pagenavi span{color:#3a3a3a} .pagenavi a:hover,.pagenavi .current{background:#236e8f;color:#fff;text-decoration:none} .pagenavi .pages{color:#fff} |
Style 6
 |
|
.pagenavi{background:#f1f1f1;clear:both;margin:30px
auto 20px;text-align:center;border:1px solid #bfbfbf;padding:3px 0}
.pagenavi span,.pagenavi a{border:1px solid #f1f1f1;padding:1px 4px;color:#000;margin:2px;font-size:12px} .pagenavi span{color:#3a3a3a} .pagenavi a:hover,.pagenavi .current{border:1px solid #bfbfbf;background:#fffdf0;color:#000;text-decoration:none} .pagenavi .pages{color:#666} |
Style 7
 |
|
.pagenavi{clear:both;margin:30px auto
20px;text-align:center}
.pagenavi span,.pagenavi a{background:#1dc1ff;padding:6px 6px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:5px} .pagenavi span{color:#3a3a3a} .pagenavi a:hover,.pagenavi .current{background:#ff9200;color:#fff;text-decoration:none} .pagenavi .pages{display:none} |
Style 8
 |
|
.pagenavi{clear:both;text-align:right;margin:25px 0
10px 0;font-size:.714em;font-weight:600;line-height:1.4em}
.pagenavi span,.pagenavi a{background:#e1e1e1;border:1px solid #555;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 1px 0 #FFF;-webkit-box-shadow:0 1px 0 #FFF;box-shadow:0 1px 0 #FFF;color:#555;margin-left:5px;padding:4px 6px 3px;text-shadow:0 1px 0 #C2C2C2} .pagenavi span{color:#3a3a3a} .pagenavi a:hover,.pagenavi .current{background:-moz-linear-gradient(center top,#45bc3f,#1c6318) repeat scroll 0 0 transparent;border:1px solid #00203B;text-shadow:0 -1px 0 #00203B;color:#fff;text-decoration:none} .pagenavi .pages{background:none;border:none} |
No comments:
Post a Comment