This tutorial about "How To Add The Best Numbered Page Navigation In Blogger Blog". Read this tutorial to add Pagination to any BlogSpot / Blogger based blogs with just three steps. The pagination numbers are completely customizable. Page Navigation is not inbuilt into Blogger, but can be achieved with a easy trick. With the help of "Page Navigation" visitors can easily navigate your blog.
How To Implement It Into Your Blogger Blog
- Go To Blogger Dashboard > Design > Edit HTML (For New Interface Templates > Edit HTML)
- Backup Your Template Before Making Any Changes
- Click (Ctrl + F) Search For ]]></b:skin>
- Just Above It Paste The Code Given Below
.pagenavi{
position: relative;
display: block;
width: 400px;
height: 40px;
overflow: visible;
margin: 50px auto;
border: 10px solid rgba(255,255,255,0.5);
/*border-radius*/
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
/*box-shadow*/
-webkit-box-shadow: inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff;
-moz-box-shadow: inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff;
box-shadow: inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff;
}
.pagenavi span,.pagenavi a{
font: bold 20px/30px Tahoma, Arial;
cursor: pointer;
text-decoration: none;
color: #464646;
display: block;
float: left;
margin-left: 2px;
/*box-shadow*/
-webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, rgba(0,0,0,0.3) 0 3px 0;
-moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, rgba(0,0,0,0.3) 0 3px 0;
box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, rgba(0,0,0,0.3) 0 3px 0;
padding: 2px 10px;
min-width: 10px;
text-align: center;
position: relative;
text-shadow: #fff 0 1px 0;
background: #cdcdcd;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.8)), to(rgba(200,200,200,0.9)));
/*linear-gradient*/
background: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0.8)),to(rgba(200,200,200,0.9)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9));
background: -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9));
background: -o-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9));
background: linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9));
}
.pagenavi a:after {
content: '';
position: absolute;
bottom: -3px;
height: 100%;
display: block;
width: 100%;
left: 0;
/*box-shadow*/
-webkit-box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0;
-moz-box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0;
box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0;
}
.pagenavi a:first-child::after {
/*border-radius*/
-webkit-border-radius: 500px 0 0 500px;
-moz-border-radius: 500px 0 0 500px;
border-radius: 500px 0 0 500px;
}
.pagenavi a:last-child::after {
/*border-radius*/
-webkit-border-radius: 0 50px 50px 0;
-moz-border-radius: 0 50px 50px 0;
border-radius: 0 50px 50px 0;
}
.pagenavi a.current:after {
height: 1px;
bottom: -1px;
}
.pagenavi a:before {
content: '';
position: absolute;
top: 1px;
height: 100%;
/*box-shadow*/
-webkit-box-shadow: rgba(0,0,0,0.4) 0 3px 0;
-moz-box-shadow: rgba(0,0,0,0.4) 0 3px 0;
box-shadow: rgba(0,0,0,0.4) 0 3px 0;
width: 1px;
display: block;
background: rgba(0,0,0,0.4);
right: -1px;
}
.pagenavi a:last-child::before { display: none !important }
.pagenavi a:first-child {
/*border-radius*/
-webkit-border-radius: 50px 0 0 50px;
-moz-border-radius: 50px 0 0 50px;
border-radius: 50px 0 0 50px;
font-family: 'WebSymbolsRegular';
}
.pagenavi a:last-child {
/*border-radius*/
-webkit-border-radius: 0 50px 50px 0;
-moz-border-radius: 0 50px 50px 0;
border-radius: 0 50px 50px 0;
font-family: 'WebSymbolsRegular';
}
.pagenavi a:hover {
/*box-shadow*/
-webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, inset rgba(255,255,255,1) 0 0 15px, rgba(0,0,0,0.2) 0 3px 0;
-moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, inset rgba(255,255,255,1) 0 0 15px, rgba(0,0,0,0.2) 0 3px 0;
box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, inset rgba(255,255,255,1) 0 0 15px, rgba(0,0,0,0.2) 0 3px 0;
}
.pagenavi a:active {
/*box-shadow*/
-webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.2) 1px 0 0px, inset rgba(0,0,0,0.2) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.2) 0 2px 0;
-moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.2) 1px 0 0px, inset rgba(0,0,0,0.2) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.2) 0 2px 0;
box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.2) 1px 0 0px, inset rgba(0,0,0,0.2) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.2) 0 2px 0;
top: 1px;
text-shadow: #fff 0 0 15px;
}
.pagenavi a:active:after { bottom: -2px }
.pagenavi a:active:before {
/*box-shadow*/
-webkit-box-shadow: rgba(0,0,0,0.4) 0 3px 0;
-moz-box-shadow: rgba(0,0,0,0.4) 0 3px 0;
box-shadow: rgba(0,0,0,0.4) 0 3px 0;
top: 0px;
}
.pagenavi a.current {
/*box-shadow*/
-webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.3) 1px 0 0px, inset rgba(0,0,0,0.3) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.3) 0 1px 0;
-moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.3) 1px 0 0px, inset rgba(0,0,0,0.3) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.3) 0 1px 0;
box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.3) 1px 0 0px, inset rgba(0,0,0,0.3) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.3) 0 1px 0;
top: 2px;
text-shadow: #fff 0 0 15px;
}
.pagenavi a.current:before {
/*box-shadow*/
-webkit-box-shadow: rgba(0,0,0,0.4) 0 3px 0;
-moz-box-shadow: rgba(0,0,0,0.4) 0 3px 0;
box-shadow: rgba(0,0,0,0.4) 0 3px 0;
top: -1px;
}
.pagenavi a.current:active:after { bottom: -1px }
The JavaScript Installation
- Search For The Below Line
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
- After The Above Line Paste The Below Code
<b:includable id=’page-navi’>
<div class=”pagenavi”>
<script type=”text/javascript”>
var pageNaviConf = {
perPage: 5,
numPages: 6,
firstText: “First”,
lastText: “Last”,
nextText: "»",
prevText: "«" }
</script>
<script type=”text/javascript” src=”http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js”></script>
<div class=”clear” />
</div>
</b:includable>
- Now Find This Code
<!– navigation –>
<b:include name=’nextprev’/>
- Now Replace It With
<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>
- Now, Save Your Template & Its Done
Hope you like this post. We will come with another useful tutorials soon. Keep checking Blogs Daddy for latest blogger hacks. Thank you..
0 comments:
Post a Comment