Get Latest Tweaks via Facebook, Twitter, Google+ & FeedBurner
    Subscribe:
    Subscribe Twitter Facebook

    Wednesday, February 29, 2012

    Page Navigation for Blogger - New script

    SOCIALIZE IT →

    Blogger page navigation

    Page navigation widget for blogger is most popular widget, and most bloggers are using this. because these players are only provided in the wordpress blogs hosted or blogs.But now his trick has been made ​​available to bloggers is also here that I am giving this Page Navigation Widget with different styles and options for full customization.

    This Numbered Page Navigation will show number of post to jump from main page and it's having previous and Next page buttons to move on

    1. go to Blogger > Design > Page Elements

    2. Add a Gadget and choose HTML/Java Script . Now simply copy the following code in it.

    <!--Page Navigation Starts-->
    <style type="text/css">
    
    /* Page Navigation styles */
    .showpageNum a {
    padding: 3px 8px;
    margin:0 4px;
    text-decoration: none;
    border:1px solid #371DA1;
    -webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius: 5px;border-radius: 5px;
    background: #fff;
    line-height: 7em;
    }
    .showpageOf {
    margin:0 8px 0 0;
    }
    .showpageNum a:hover {
    color:#fff;
    border:1px solid #6B6B6B;
    background: #6B6B6B;
    }
    .showpagePoint {
    color:#fff;
    text-shadow:0 1px 1px #333;
    padding: 3px 8px;
    margin: 2px;
    font-weight: 700;
    -webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius: 5px;border-radius: 5px;
    border:1px solid #371DA1;
    background: #371DA1;
    text-decoration: none;
    }
    
    </style>
    
    
    <script type='text/javascript'>
    var home_page="/";
    var urlactivepage=location.href;
    var postperpage=4;
    var numshowpage=6;
    var upPageWord ='Previous';
    var downPageWord ='Next';
    </script>
    <script src='https://bloggerknown.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'></script>
    <!--Page Navigation Ends -->
    

    3. Submit and you are Done :)


    0 comments:

    Post a Comment