Add Numbered Page Navigation in Blogger
Adding a numbered Page Navigation Bar in your blog can really help you in increasing looks of your blog and make it look more professional.A numbered page navigation bar will remove the traditional way of showing Older Posts link in blogger and will change it with the image given below.
To add this to your blog,simply follow the steps given below:
1.Login to your Blogger Dashboard--->Layout--->Edit HTML.
2.Search for following piece of code in your template:
]]></b:skin>
3.Now add the following piece of code just before above code:
.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}
.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}
.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}
.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}
.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
4.Now search for following code in your template:
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></b:section>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></b:section>
5.Now if you cannot find above code,then try searching for above code by changing value of yes to no.
Add this java script code after </b:section>
You will also have to change the value of no to yes in your template for this tweak to work.
Now you are done.Click save template and welcome new Numbered Page Navigation Bar in your blog!!!!!!!!
Now you are done.Click save template and welcome new Numbered Page Navigation Bar in your blog!!!!!!!!
Tags: Blogger Tricks, Blogger Widgets, Buttons, SEO
Previous Article
Subscribe to:
Post Comments (Atom)
Share your views...
6 Respones to "Add Numbered Page Navigation in Blogger"
thanks buddy for this post i have done this in my blog see www.desicracks.blogspot.com
November 29, 2009 at 9:16 AM
Didn't work on mine site! :(
December 7, 2009 at 7:32 AM
thanks it work for my blog http://ishowyouright.blogspot.com/
December 8, 2009 at 6:10 AM
check the link of javascript which s to be added can u plz reupload it ...........
June 28, 2010 at 5:14 AM
sorry buddy but i have stopped blogging for some undefined time period.will upload it when i will start blogging again.very sorry for inconvenience :-(
July 6, 2010 at 8:37 AM
you hotfile link is dead please relink it.
Post a Comment
You need not to login for making a comment.So please do comment about this post/trick.