Header Ads

ad728
  • Breaking News

    Numbered Page Navigation Widget for Blogger

    Good evening,

    Today I will show you a Widget for your Blogger Template, which will help you get more structure and organization into your website. At first I considered it insignificant and I did not add it to the collection with my posts, but it seemed that many of you were the one you asked for and I thought I would spend some time closing this issue.

    You are the Numbered Page Navigation Widget for Posts which automatically numbers your posting pages at the end of each post page and allows the user to change them faster, more efficiently and with less effort. Follow these steps to add:

    1) Sign in to Blogger
    2) Template
    3) Edit HTML
    4) Click somewhere in the box that has the codes and
    with the help of CTRL (pressed continuously) + F we are looking for:


    ]]></b:skin>


    5) Once we find it right above we put:  #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
    .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
    #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
     .showpageOf{display:none!important}
    #blog-pager .pages{border:none;}
     

    6) Then, with the help of CTRL + F, find the following: </body>
    7) Once you find it, just add the following code: <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <script type='text/javascript'>
      /*<![CDATA[*/
        var perPage=7;
        var numPages=6;
        var firstText ='First';
        var lastText ='Last';
        var prevText ='« Previous';
        var nextText ='Next »';
        var urlactivepage=location.href;
        var home_page="/";
      /*]]>*/
    </script>
      <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
    </b:if>
    </b:if>

    7) Can someone change the red letters of the code according to their preferences.

    No comments

    Post Top Ad

    ad728

    Post Bottom Ad

    ad728