Numbered page navigation for blogger
Here is a completely new and working script for Numbered Page Navigation (i.e. Panigation) for Blogger. The pagination widget for blogger make it simple for your visitor. Its a must have widget for any blogspot blogs.This new script allows you to add numbered page navigation to blogger/ blogspot blog with page numbers starting(1, 2, 3, 4 ….) like those of a book.Instructions To Follow:
STEP 1
Log in to Blogger >go to>Design -> Edit HTML
and mark the tick box "Expand Widget Templates"
STEP 1
Log in to Blogger >go to>Design -> Edit HTML
and mark the tick box "Expand Widget Templates"
Now find this code in the template:
</body>
And before it, paste this code:
<script type='text/javascript'> var home_page="/"; var urlactivepage=location.href; var postperpage=7; var numshowpage=4; var upPageWord ='Prev'; var downPageWord ='Next'; </script> <script src='http://sites.google.com/site/testsajasite/pagenav.js' type='text/javascript'></script>
Here you can change Prev and Next Text.
var postperpage=7;
var numshowpage=4;
Postperpage : How many Posts you want to show on one Page of blog.
Numshowpage : how Many number will show in Your page Navigation
Now find (CTRL+F) this code in the template
]]></b:skin>
paste this CSS Style Code to Your template Before It.
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}
.showpageArea a {
color: #000;
text-shadow:0 1px 2px #fff;
font-weight: 700;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #919106;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgogx4aDUy-FEQIpyAxwOF7Se6GpjzDscMTJKc4jSoO_JICuU3NgictYCN-pa5FiB_9J0eChOk0yLjOiKQZ8L0IFDA-PJ3gW8JMtBg8f6VIIkYXR98ljEgTtDW6gX7kVv8-Ksm-QPvpZ9EX/s1600/01.jpg) 0 -50px repeat-x;
}
.showpageNum a:hover {
border:1px solid #aeae0a;
background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgogx4aDUy-FEQIpyAxwOF7Se6GpjzDscMTJKc4jSoO_JICuU3NgictYCN-pa5FiB_9J0eChOk0yLjOiKQZ8L0IFDA-PJ3gW8JMtBg8f6VIIkYXR98ljEgTtDW6gX7kVv8-Ksm-QPvpZ9EX/s1600/01.jpg) 0 -25px repeat-x;
}
.showpageOf{
margin:0 8px 0 0;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #919106;
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgogx4aDUy-FEQIpyAxwOF7Se6GpjzDscMTJKc4jSoO_JICuU3NgictYCN-pa5FiB_9J0eChOk0yLjOiKQZ8L0IFDA-PJ3gW8JMtBg8f6VIIkYXR98ljEgTtDW6gX7kVv8-Ksm-QPvpZ9EX/s1600/01.jpg) 0 0 repeat-x;
text-decoration: none;
}
TO change the CSS Style of Navigation just replace the above code with anyone of the bellow codes
.showpageArea {
font-family:verdana,arial,helvetica;
color: #fff;
font-size:11px;
margin:10px;
padding:8px 20px;
background: #333;
}
.showpageArea a {
color: #fff;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
background: #666;
}
.showpageNum a:hover {
background: #888;
}
.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #da6100;
text-decoration: none;
}
.showpageOf{
margin:0 8px 0 0;
}
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}
.showpageArea a {
color: #fff;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
background: #333 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp5.jpg) 0 -50px repeat-x;
}
.showpageNum a:hover {
background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp5.jpg) 0 -25px repeat-x;
}
.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #06a2b9 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp5.jpg) 0 0 repeat-x;
text-decoration: none;
}
.showpageOf{
margin:0 8px 0 0;
}
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}
.showpageArea a {
color: #fff;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
background: #363636 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 -25px repeat-x;
}
.showpageNum a:hover {
background: #044697 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 -50px repeat-x;
}
.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #e30000 url(whttp://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 0 repeat-x;
text-decoration: none;
}
.showpageOf{
margin:0 8px 0 0;
}
0 comments:
Post a Comment