Tutorials, tips and tricks about Blogger

29 Nov

Customize the navigation feet to older or newer posts on Blogger

3 Comments | by in Design, Tips and Tricks | 2009

Español Português

New logger incorporates a navigation feet on main page, labels and individual posts. This navigation feet contains links to “Recent posts”, “Older posts” and “Main page” without format or style. On this article we’ll show you how to customize it.

  1. Go to “Layout” tab, also called “Design” from Desktop, and then to “Edit HTML”.
  2. Layout Blogger

  3. Check “Expand widgets templates” box, and in the text field, search the following code:
  4. <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"' 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>
    
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <A class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></A>
    <b:else/>
    <b:if cond='data:newerPageUrl'>
    <A class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></A>
    </b:if>
    
    </b:if>
    </DIV>

    This is the code that handles showing the navigation links. You can realize because of these links:

    <data:newerPageTitle/> – Recent posts
    <data:olderPageTitle/> – Older posts
    <data:homeMsg/> – Main page

  5. Customization:
  6. Change the text for another one. To replace the text for anyone you like, just have to replace the matching label on every link for our text. For example, for the newer posts link, we replace “” for “Newer posts”.

    Change the text for an image. To replace teh text for an image we can follow the last steps and replace every label for a matching image.

    Now we’re going to ofer you an example that you can use on your own blog.

    <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"' expr:title='data:newerPageTitle'> <img alt='data:newerPageTitle' src='http://bp0.blogger.com/_Zuzii37VUO4/Rf4lJS031KI/AAAAAAAAAfc/JItp8PeZF1U/s1600/botong_atras.gif' /></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'> <img alt='data:olderPageTitle' src='http://bp2.blogger.com/_Zuzii37VUO4/Rf4lEy031JI/AAAAAAAAAfU/iu3bL2eUbhM/s1600/botong_adelante.gif'/> </a>
    </span>
    </b:if>
    
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <a class='home-link' expr:href='data:blog.homepageUrl'>
    <img alt='data:homeMsg' src='http://bp1.blogger.com/_Zuzii37VUO4/Rf4lMi031LI/AAAAAAAAAfk/m7Qpa985MY0/s1600/botong_home.gif'/> </a>
    <b:else/>
    <b:if cond='data:newerPageUrl'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    </b:if>
    
    </b:if>
    </div>

    Format links. If you just want to give a better format to those links, just change the attributes to the following classes:

    #blog-pager-newer-link – For “Recent posts”
    #blog-pager-older-link – For “Older posts”
    #home-link – For “Main page”

Comments

3 Comments, leave a reply · Feed
  1. MadamLeung April 19, 2010

    it doesn’t work. I changed that part of the code to the one you had. And I still can’t see those link buttons at the bottom! Pleas help!!

  2. John King January 7, 2012

    Thanks a lot… It is working.

  3. Mulled Vine February 21, 2013

    Is there any way to change data:olderPageUrl so that it points to a single page and not a query. Adsense doesn’t work so well with the query.

Reply

You must be logged in to post a comment.

Tutorials, tips and tricks about Blogger