Reposition Navigation Buttons in Blogger!

reposition navigation links in bloggerThe navigation buttons or links that are displayed at the bottom of each comment section in BlogSpot blogs enable visitors to switch between new and old posts or move from one post page to another ordered by date and time. These buttons become less of use when number of comments increase too much. Normally readers do not even observe the navigation deep down and this results in loss of precious pageviews. I have always emphasized that value pageviews more than unique visitors because it is indeed pageviews that turns into revenue generating page impressions both for AdSense or any other Ad Network.  You might have seen the More, Next and Previous button showing inside the top black sticky bar on MBT homepage and post pages. It is really not possible to shift a Post data item to any other widget section in blogger. Doing such results in "Data variable not found in dictionary" error or similar.

We played a work around and used Cascading stylesheet Position properties to allocate fixed positions to these buttons anywhere on the page. This is again a unique addition to Blogger Customization and being implemented for the first time. The tutorial today will not only help you change the position of navigation links but will also teach you to install a custom sticky bar just like the one we are using on our blog. We are pretty sure you will find today's tutorial really easy yet delicious!

PS: Tested with Chrome, Firefox, IE9 & Safari.

STEP1: Adding the sticky bar

First comes first. I have already shared a detailed tutorial on adding a stickybar to blogger. Please first install a stickybar on your blogs and then try step#2 of today's tutorial.

Note: The style that I am using on MBT is different from that of the tutorial so if you want a similar color theme then simply copy the stylesheet from MBT source file or let me know to help you.

STEP2:

Now comes the interesting part. What we will do here is simply shifting your current Newer, Older & Home buttons to the top left of the stickybar and replace them with more fancy buttons like the one we are using.  Follow these steps:

  1. Go To Blogger > Template
  2. Backup your template
  3. Click Edit HTML and then check "Expand Widget Templates"
  4. Search for the following CSS classes and delete them all: You will find three such classes or more starting with either #blog-pager or .blog-pager

#blog-pager {
------
}


#blog-pager-newer-link {
----

---

--
}

#blog-pager-older-link {
-----

---

 

--
}

 

   5.   Now after you have deleted them, add the following code in their place:

#blog-pager {
text-align:center;
}
#blog-pager-newer-link {
position:fixed;
z-index:9999;
margin-left:-320px;
top:0px;
margin-top:5px;
}

#blog-pager-older-link {
position:fixed;
z-index:9999;
margin-left:-290px;
top:0px;
margin-top:5px;
}

#blog-pager-more-link {
position:fixed;
z-index:9999;
margin-left:-20px;
top:0px;
margin-top:5px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
#blog-pager-newer-link {
position:fixed;
z-index:9999;
margin-left:-627px;
top:0px;
}

#blog-pager-older-link {
position:fixed;
z-index:9999;
margin-left:-597px;
top:0px;
}
}

 

What we did in step4 and step5 was simply replacing your old code with the new one.

    6.   Next search for the following chunk of code:

Note: You are only concerned with finding the two highlighted codes. The code inside them may look different for your template so just finding these two highlighted tags and then follow step7.

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Previous'>&#171; Prev</a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='Next'>Next &#187;</a>
      </span>
    </b:if>
<span id='home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</span>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
  <div class='clear'/>
</b:includable>

     7.  Replace the code inside them with the following code as shown below:

<b:includable id='nextprev'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-more-link'>
      <a class='blog-pager-more-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2EQ9pp-DQupnQYgORNQtMO4b2Y7peNMNPGV2d60B-ut97DTXBi1EIMtlyhMv-WwgJ5FqdSdv5STuIyPR36UREnN0zksJ8e7N-l-UBvAnz_zXXyEPlHSZKtP81oHRbV0mFzqACMMr7FkO3/s400/more.png'/></a>
      </span>
      </b:if>
</b:if>


<b:if cond='data:blog.url != data:blog.homepageUrl'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqbGxI8wRiPFAH1gxnnPZfpgJdnq-fdH7o6QQdmwQSF9w3hhvrfme-rJM_ZB58gpyoBLCFwA3YONeMHtRaltMYZlK71AftujY8wdYbmYUimxjgzRoQYtoR4tErsw4lSS2g9qHo_ZkL1B9Q/s400/Previous.png'/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmoTDmEyl7H6HAQjSrLJrG3g-Buty1OKqlEs0jWoRxL1gRkh6fkgzo8Hm9CYDt8F5cjD62E0J6vcI68Mt04IYhn2HdAFfsbpN0mtzh3BgP2CTMasOFZmEBSRXX418UYTgb5OhMLpftXKku/s400/Next.png'/></a>
      </span>
      <b:else/>
 
    </b:if>

  </div>
  <div class='clear'/> </b:if>

</b:includable>

It was that easy!

   8. All done! Visit your Blog to see it functioning just fine. :)

How it works?

Previous Previous will display newer posts

Next Next will display Older posts

more More will display on homepage alone.

  • Button More is responsible for displaying the next set of previously published posts. It will show a bunch of posts depending on the number of posts you allowed to be displayed on homepage.
  • The other two buttons will help the visitor to navigate between next and previous page. If the visitor is on your newly published post then the Previous button will not show up and Next will show alone.

Everything is operated using conditional statements provided by XHTML 1.0.

If you are looking for read more buttons then do check our Icons and buttons category that has been downloaded over thousands of times and found on almost every Blogger blog today: Download from here

navigation buttons

Questions?

I have one last paper on 29th Nov  after which I will be free for one month to help you all with every query you may have. The blog is being maintained by co-authors because I am not currently available. I am writing posts as soon as I get some spare time. You are most welcomed to ask any question you may have related to this post. Off-topic questions should kindly be avoided. I just hope you find this new addition useful to your overall Pageviews. Wish you more power buddies. Peace and blessings. :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

22 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. Thanks nd u knw i was waiting for it.

    I'll reshare it pn my blog with a credit of your name.

    Make Your Blog Like a Pro

    ReplyDelete
  3. bro i also have a query that I customize ur MBT template but I'm not able to see my HOME NEXT buttons on the home page. plz chk it once and give me solution for it.


    Widget Generators

    ReplyDelete
  4. Another great post Bro, this will definitely change the look of my blog. But by the way, between this and the animated one u shared early this year, which one increases pageview more? (Just being curious).
    Best of luck in your exam. Salam.

    ReplyDelete
  5. I am really excited to read this post thanks Muhammad keep it up your JOB. I am from
    Tips and tricks blog

    ReplyDelete
  6. very very nice bro. Can i guest post on your website?
    My email: technotweaksteam@gmail.com
    my website: www.mypremiumtricks.com

    ReplyDelete
  7. My text is mixing up with buttons. How to solve this problem bro?

    ReplyDelete
  8. Thanks for the nice post. But when I implement this code on my blog it doesn't comes exactly on the top of the page but slightly lower than it.

    USEFUL TRICKS

    ReplyDelete
  9. @azad
    Always welcomed pal. Inside your template search for mbt_bar and inside it replacing the padding property with this one:

    padding: 5px 0px 5px 55px;


    That's it. I must say you have installed it perfectly correct. :)


    @hemant
    I am glad you liked it hemant. For your problem perhaps you will find this as a great solution: Older, Newer, Home links not visible in blogger

    @Oguntayo Mathew Adekunle
    If this is the one we are using on MBT then it must be the best way in terms of increasing pageviews and attracting readers more! :)


    @Technononimous Tweaker
    Only co-authors can post at the moment pal and readers who are sincere to the community for more than two years. We often term them as loyal contributors. :)


    @Abhishek Kumar
    You may kindly first install it and then share your blog link. I will review it and will give you a modification that will solve the design issue. :)

    ReplyDelete
  10. @azad

    You will have to remove the page navigation widget so that the buttons may show up always. At the moment as long the page navigation widget is there the buttons will automatically get hidden.

    ReplyDelete
    Replies
    1. Bro m back to give u little trouble. Pleas check my stickybar and do you think its working perfect? One more thing bro ,how can i add footer like yours with menu. Did you made any tutorials on that. Waiting for your answer. Peace bro.

      Delete
    2. sry bro forgot to add link. Here is my blog www.azadfunclub.com

      Delete
  11. Bro The next and previous buttons not showing on a post???
    www.amaansheikh.org

    ReplyDelete
  12. @Amaan

    Why would you show it several times on a page? :)

    However you can show it as many times as possible by using classes instead of IDs but we dont recommend that. Keeping a page as light a possible is the best you could do to reduce bounce rate.

    ReplyDelete
  13. @Mohammad Mustafa Ahmedzai Hi Mohammad, i want to ask you on thing can i use linking a link into my blog post to some once site is Right or not as we bloggers always ad some links in our articles to some other site.

    Also do you know any thing about that, is Google really not accepting any technology related site or blog in adsense right now? www.cyberockk.com this is my blog every thing is going fine but adsense is not accepting this, i have an active adsense account right now and i want to connect this to my blog but when i applied from my adsense account by adding my site URL they rejected it and the reason was copyright materiel. I am not getting what is wrong with my site, should i remove my images or links which i have added in my blog posts? coz some of the iamges i have used are not original and i have given any credits to the images but now i am removing it by using creative common images. Please Mohammad give your reply on this topic really need your help if you can thanks a lot.

    ReplyDelete
  14. @Mohammad Mustafa Ahmedzai Hi Mohammad, i want to ask you on thing can i use linking a link into my blog post to some once site is Right or not as we bloggers always ad some links in our articles to some other site.

    Also do you know any thing about that, is Google really not accepting any technology related site or blog in adsense right now? www.cyberockk.com this is my blog every thing is going fine but adsense is not accepting this, i have an active adsense account right now and i want to connect this to my blog but when i applied from my adsense account by adding my site URL they rejected it and the reason was copyright materiel. I am not getting what is wrong with my site, should i remove my images or links which i have added in my blog posts? coz some of the iamges i have used are not original and i have given any credits to the images but now i am removing it by using creative common images. Please Mohammad give your reply on this topic really need your help if you can thanks a lot.

    ReplyDelete
  15. Friend, why next and previous buttons not showing on a post?
    I want him to look like a blog.
    Please check http://www.biluping.com/2012/11/daeng-ipul-mendadak-artis.html

    ReplyDelete
  16. @Mohammad Mustafa Ahmedzai

    SAlam brother

    i need a code for.. like when people click on view all comment after clicking on that, when new page opens in which comments are,

    so i mean that the page should auto scroll down to the comment area like yours..
    thanks

    id you email me with full details i ll be very thankful thanks.

    my email is rehan95gold@gmail.com

    ReplyDelete
  17. Unfortunately it is not comply with my template.

    ReplyDelete
  18. Salaaaam Mustafa Ahmedzai, my problem is.....
    when we clicking newer page or older page theres is no respons..
    this problem since couple week ago,
    i try your trick..........but, still no respons..
    help me friend
    hehehe.......
    ceck this.. http://bangjasmin.blogspot.com/2012/12/kloset.html

    ReplyDelete