• Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Increase Website And Blog Traffic:latest article for Increasing Blog and website Traffic free gide.....
  • Create and Upload Site Map to Google:Google is fist largest Search Engine by upploading SITE MAP Google Easily Search Links from Ur site in Searching.......
  • Fix WEB SITE Errors:Google and other search engines always take those site in there fist page in searching which ha too less web Errors...
  • Top 20 Search Engine:Submit Ur site to top 20 Search Engines to Increasing Ur Site Traffic and making money top search engines like as Google, Yahoo, Ask, AOl, MSN...
  • Top Social Sites:Top 100 Social sites which real help U make a Affliate Marketer and in Pormoting ur Producdts...

New Posts

Beautiful Page Navigation for Blogger Blog [new script]

Posted by Mohsin On 8/03/2013 03:35:00 AM No comments

page navigation for blogger
Blogger Page Navigation is an awesome trick to navigate your Blogger Blog Pages.It allows your users to Navigate Blog pages like Book,By using this your blog visitors can easily go to an appropriate page.By default Blogger allows Older Posts and Newer Posts link to Navigate between Blog pages.It is very difficult for your users to navigate deeper into your Blog's Posts, so the Page Navigation helps us to solve this problem.
 Let's see how to install it.Follow the steps below.

1.How to install Page Navigation Widget

  • Log In to your Blogger Account
  • Go to Design-> Page Elements(Shown in the Picture)
  • In New Blogger Template Go to Layout -> Add Gadget
  • Click on Add Gadget (anyone) and look for HTML/Javascript take it.
  • Leave the Title as Blank(as shown in the figure)
  • Copy and paste the below code in it.
<style type='text/css'>
#blog-pager{height: 28px;
    padding: 10px 0 0;
.showpageArea a {text-decoration:underline;
font-size: 16px;
       text-align: center;}
.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}

.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}

.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}
.showpage a:hover {text-decoration:none;background: #cccccc;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style>
<script style='text/javascript'>var pageCount=7; 
var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script><a href="http://netoopsblog.blogspot.com" style="font-size:0pt">Blogger Widgets</a>
<script style='text/javascript' src='http://netoopscodes.googlecode.com/svn/netoops-page-nav-v2.js'></script>
you can change Red Highlighted texts when you need. pageCount=7;  determines how many Blog posts in each pages. you want to display in each pages.(Note:if you change this value '7' goto Settings->Formatting and change value of Show at most as you given in PageCount)
And displayPageNum=5 determines how many additional Page Navigation numbers display on the page.
  • Click on save,You are almost clear.
  • Then Change the position of the Widget ,place under the Blog posts.(shown in the figure)
  • Done..your blog had a page navigation bar.
The Page Navigation had been developed by Muhammed Rias and it was a good presentation.There are some bugs in that and Abu Farhan had solved it.Give them a big thanks for giving us a Beautiful Page Navigation Solution.


Post a Comment

All types of Comments are welcome