Reposition Navigation Buttons in Blogger! ~ Blogger Tricks & Tips

The 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.

Read: Create a StickyBar!

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 + "_blog-pager-newer-link"' title='Previous'>« 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 + "_blog-pager-older-link"' title='Next'>Next »</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 + "_blog-pager-older-link"'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsY6wAc8I-iIDcDxd7y4bjcwnCl3sILOk0vpnriWIUu3W74h6C6yzGEVqz4_oYLxe2Od5VejHL4Mi1S-SBf6hb9h8piKqRVrtGMLVyO9ea0VTc1gx2uh25V0RVVY9eBS4qklN_Ev7nPoYW/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 + "_blog-pager-newer-link"'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixlmhfO-frsao6A-vQCvHbz6ZhHR3qR7dYvUdd4zlV0ayYSdc_lqqn4MOKk6OSmAmKAWLD7f6rs_gNlLpw9dQIjg2BAoy8vZ8M0pkh3k-QOq4esLJifC86GrWbz4E7lMHK0dSjYYamuiEr/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 + "_blog-pager-older-link"'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJvify05FpZypLXiXWAN6ufa4Wt2hpIJijq8TRGGaxXYZvIMTMnegVkT6Y7h4aGfxe_-XAJouHQ1XeA3ptYom8bIeJ8GReVbSPqjhmuBLQWgfJARW0E8fVOvVUoXEhubA4UYFy5GfLR3Q_/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 will display newer posts

Next will display Older posts

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.

Menu

Blogger Tricks & Tips

Tuesday, November 27, 2012