Results 1 to 5 of 5

Thread: Add Number Page Navigation Widget in Blogger

  1. #1
    Join Date
    Feb 2008
    Location
    Islamabad, UK
    Posts
    88,507
    Mentioned
    1031 Post(s)
    Tagged
    9706 Thread(s)
    Thanked
    603
    Rep Power
    21474934

    Thumbs up Add Number Page Navigation Widget in Blogger

    pagenavigationnumberwidget - Add Number Page Navigation Widget in Blogger
    Page Navigation widget is the need of every blogger template.we see that different blogger templates have different styles of page numbering navigation bar.It commonly apperared below in all posts on the home page of a blog.This widget helps in jumping to previous posts of a blog or turning to newer posts by single click.However you might have noticed that some professional blogger using numbering pagination widget along with newer post and loder post button.This will only turn our blog desigh to professional looks but it will also helps to jump easily from page 1 to page 7 by single click.Previous day we have received several comments from our reader they want to know is there any way to add customize pagination widget with numbers along with the older post and newer post buttons.so to make them happy with best answer i was thinking why not to share a complete tutorial on adding customize numbering widget to bloggeer.So,in this article i will show you how to add number page navigation widget in blogger blogspost,

    Add Number Page Navigation Widget in Blogger

    follow the below simple steps to add this widget in your blog.Please follow all the steps to add this widget in blog.

    Step.1

    1. Go to blogger Dashboard.
    2. Go to template-Edit/Html.
    3. Now find for the below code.
      PHP Code:
      <b:includable id='mobile-index-post' var='post'
    4. Now past the below given code before the above line.

    PHP Code:
    <b:includable id='page-navi'>
        <
    div class='pagenavi'>
        <
    script type='text/javascript'>
        var 
    pageNaviConf = {
        
    perPage7,numPages5,firstText: &quot;First&quot;,
        
    lastText: &quot;Last&quot;,
        
    nextText: &quot;»&quot;,
        
    prevText: &quot;«&quot;
        }
        
    </script>

         <script type="text/javascript"  src="http://yourjavascript.com/815315225   /www.creatingablogsite.blogspot.in.js"></script>
        <div class='clear'/>
        </div>
        </b:includable> 
    Step.2

    1. Now find for this code
      PHP Code:
      <b:include name='nextprev'/> 
    2. Now Replace the above code with the below given code:
      PHP Code:
      <b:if cond='data:blog.pageType == &quot;index&quot;'>
          <
      b:include name='page-navi'/>
          <
      b:else/>
          <
      b:if cond='data:blog.pageType == &quot;archive&quot;'>
          <
      b:include name='page-navi'/>
          </
      b:if>
          <
      b:else/>
          <
      b:if cond='data:blog.pageType == &quot;item&quot;'>
          <
      b:include name='nextprev'/>
          </
      b:if>
          </
      b:if> 

    Step.3
    Now find for
    PHP Code:
     ]=]=></b:skin
    tag

    Now copy the below given code and past before
    PHP Code:
    ]=]=></b:skin
    NumberingNavigationWidget - Add Number Page Navigation Widget in Blogger


    3. Now past the below code as shown in the screenshots.

    PHP Code:
         #blog-pager, .pagenavi {
             
    clearboth;
             
    text-aligncenter;
             
    margin30px auto 10px;
        }
        
    #blog-pager a, .pagenavi span, .pagenavi a {
             
    margin0 5px 0 0;
             
    padding2px 10px 3px;
             
    text-decorationnone;
             
    color#fff;
             
    background#2973FC;
             
    -moz-border-radius2px;
             -
    khtml-border-radius2px;
             -
    webkit-border-radius2px;
             
    border-radius2px;
        -
    webkit-transitionall .3s ease-in;
        -
    moz-transitionall .3s ease-in;
        -
    o-transitionall .3s ease-in;
        
    transitionall .3s ease-in;
        }
        
    #blog-pager a:visited, .pagenavi a:visited {
             
    color#fff;
        
    }
        
    #blog-pager a:hover, .pagenavi a:hover {
             
    color#fff;
             
    text-decorationnone;
             
    background#000;
        
    }
        
    #blog-pager-older-link, #blog-pager-newer-link {
             
    floatnone;
        }
        .
    pagenavi .current {
             
    color#fff;
             
    text-decorationnone;
             
    background#000;
        
    }
        .
    pagenavi .pages, .pagenavi .current {
             
    font-weightbold;
        }
        .
    pagenavi .pages {
             
    color#fff;
             
    background#2973FC;
        



    4. Now Click On Save Button and you done almost.

  2. #2
    Join Date
    Jan 2011
    Location
    pakistan
    Posts
    9,092
    Mentioned
    95 Post(s)
    Tagged
    8378 Thread(s)
    Thanked
    2
    Rep Power
    429513

    Default Re: Add Number Page Navigation Widget in Blogger

    Thanks for sharing


  3. #3
    *jamshed*'s Avatar
    *jamshed* is offline کچھ یادیں ،کچھ باتیں
    Join Date
    Oct 2010
    Location
    every heart
    Posts
    14,586
    Mentioned
    138 Post(s)
    Tagged
    8346 Thread(s)
    Thanked
    4
    Rep Power
    21474858

    Default Re: Add Number Page Navigation Widget in Blogger

    thanks for sharing

  4. #4
    Join Date
    Sep 2013
    Location
    Karachi, Pakistan
    Posts
    7,416
    Mentioned
    507 Post(s)
    Tagged
    5438 Thread(s)
    Thanked
    359
    Rep Power
    874041

    Default Re: Add Number Page Navigation Widget in Blogger

    thanks.... to be honest.... didnt understand a word of this coding language.... I would rather need an enigma machine to translate these coding into words

  5. #5
    Join Date
    Sep 2011
    Location
    Jadoo Nagri
    Posts
    19,713
    Mentioned
    198 Post(s)
    Tagged
    8340 Thread(s)
    Thanked
    10
    Rep Power
    21474862

    Default

    36-yaqeenan yeh bht useful hogi lekin sachi baat to yeh hai kay mujhy ek lafz bhi samjh nahi aaya k yeh kia ha aur kion

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •