If you are not using numbered page navigation, your template
consider to old style. Many of the webmaster use numbered page navigation to
their site template to make it easier for their visitor to find their desire
page in no time. Many of the users are using older and newer post option
instant of numbered page navigation. Numbered page navigation is more user
friendly, SEO friendly and attractive. Most advance Blogger user used page
navigation to make their template more beautiful.Add CSS code to Blogger/HTML Blog:
- Go to your Blogger account and open the template tabs right of your Blogger dashboard.
- Click on the edit HTML and open it. The new window appears with your template codes.
- Now press Ctrl + F the new light box will appears and put this ]]></b:skin> code in the box and just above this code ]]></b:skin> past the below code.
.showpageNum a {
background: #02ab68;
padding: 5px;
padding-left: 10px;
border: 1px solid #b9b9b9;
padding-right: 10px;
margin-right: 5px;
color: #000;
font-weight: bold;
}
.showpage a {
background: #02ab68;
padding: 5px;
padding-left: 10px;
border: 1px solid #b9b9b9;
padding-right: 10px;
margin-right: 5px;
color: #000;
font-weight: bold;
}
.showpageArea {
float: left;
}
.feed-links {
display: none;
}
.showpageArea a {
float: left;
font-size: 15px;
color: #fff!important;
padding-left: 15px;
padding-right: 15px;
}
.showpagePoint {
float: left;
font-size: 15px;
padding-left: 15px;
padding-right: 15px;
}
.showpageArea a {
text-decoration: none;
}
.showpageArea {
float: left;
width: 363px;
margin-top: 10px;
}.
|
Now you can change color and size of widgets. with your own.
You can use this widget to help you out more further.
Once you complete the above step them make your move toward this below step.
- Go to your Blogger account and open the template tabs right of your Blogger dashboard.
- Click on the edit HTML and open it. The new window appears with your template codes.
- Now press Ctrl +F the new light box will appears and put this </body> code in to it to find the correct code.
- Past these showing code just above to this </body> code.
Numbered Page Navigation Code:
<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType !=
"item"'>
<b:if cond='data:blog.pageType != "static_page"'> <script type='text/javascript'> var pageCount=6; var displayPageNum=6; var upPageWord ='Previous'; var downPageWord ='Next'; </script> <script src='http://widcraft.googlecode.com/svn/blogger_pagenavi_min.js' type='text/javascript'/> </b:if> </b:if> <!--Page Navigation Ends --> |
Now save your template and refresh your blog and when you
revisit your template you will be able to see the numbered page navigation.
About Post Author:
This post is fruit of pen-clipping of Mohammad Hamza, poineer of ProFeedLinks. He likes to shear about his thought and experience with others.
Read more about Mohammad Hamza »
0 comments:
Post a Comment
Share your Feedback and suggestion with us. Any question or need some please contact us and get instant help. Do not post Spam or Back links comments. If spam or post backlinks comments on this blog, your comment will be deleted.