Stylize Older, Newer and Home Navigation Links

6/25/2015
1 comments
Stylize Blogger Navigation Links

Visitors like that blog which are well decorated because it helps them to navigate easily throughout the blog. All professional bloggers always try something new to decorate their blog in a unique way. Blogger navigation links are also part of that decoration. Although by default blogger provides some styles for these links but those are so dull and boring. This tutorial will show you different ways of changing the appearance of newer (or next), older (or previous) and home navigation links. This is very simple but useful trick for blogger blog.

Before you make any changes, it is recommended to backup your blog template if anything goes wrong.
Let's proceed.
  1. Sign in to 'Blogger' dashboard.
  2. Click the drop-down arrow adjacent to 'Go to post list' icon and select 'Template' form the drop-down menu list.
  3. Click 'Edit HTML'.
  4. Search for (Ctrl+F) data:newerPageUrl. You'll find a code similar to the following.
  5. <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"" expr:title="data:newerPageTitle"><data:newerPageTitle/></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"" expr:title="data:olderPageTitle"><data:olderPageTitle/></a>
      </span>
    </b:if>
    
    <a class="home-link" expr:href="data:blog.homepageUrl"><data:homeMsg/></a>
  6. In that code, <data:olderPageTitle/> is responsible for older posts link, <data:newerPageTitle/> for newer posts link and <data:homeMsg/> for home link. Stylize those texts as follows.
  7. Modify those texts with your own

    Replace those texts with your own texts. For e.g. if you want to insert 'Read My Next Post' as newer navigation link, replace <data:newerPageTitle/> with 'Read My Next Post'.

    Convert special-characters (e.g. <) to escaped-characters (e.g. &lt;).

    Replace those texts with images

    Replace <data:newerPageTitle/> with <img src="url of image for newer link" />.
    Replace <data:olderPageTitle/> with <img src="url of your image for older link" />.
    Replace <data:homeMsg/> with <img src="url of your image for home link" />.


    Switch the positions of those texts

    Search for (Ctrl+F) </b:skin> and paste (Ctrl+V) this before </b:skin>.

    #blog-pager-older-link {
      float: left;
    }
    #blog-pager-newer-link {
      float: right;
    }

    Remove those texts from blog

    Search for (Ctrl+F) #blog-pager and paste (Ctrl+V) display:none; within #blog-pager. If you didn't find that, search for (Ctrl+F) </b:skin> and paste (Ctrl+V) the following before </b:skin>.

    #blog-pager {
      display: none;
    }
  8. Click 'Save template'.

If you face any problem with this post, let me know.
Happy Blogging.
Join the Conversation

Comments left on this site will be moderated. Note that all comments with abusive, disruptive or explicit content and comments with links will be deleted immediately.

Comments so far on 'Stylize Older, Newer and Home Navigation Links'

  • 1 comment on Blogger
  • on Disqus
  1. Give a demo on your floating new and old posts....

    ReplyDelete

© 2016 Bloganalyzer. All rights Reserved. Designed By meNight Fury. DMCA.com Protection Status