Customizing Blogger post Navigation script

Blogger Blogs have default post navigation script which allows user to navigate between posts.It consists of ” older posts” , “Newer posts” and ” Home page” link. Since it’s default , no CSS codings are added for the navigation script. So in this post I will explain how to modify the script and to add background images and then aligning the older posts and newer posts links properly.

Know the script codes

Before explaining how to customize the codes , I would like to explain the tags involved in the blogger templates which control the blogger post navigation script.

CSS codes

Firstly, let us see the default code included in minima or Rounders blogger template.

#blog-pager-newer-link {
float: $startSide;
margin-$startSide: 13px;
}

#blog-pager-older-link {
float: $endSide;
margin-$endSide: 13px;
}

#blog-pager {
text-align: center;
}

instead of startside and endside we can have left and right respectively.
#blog-pager-newer-link : this code contains the css necessary for newer posts link
#blog-pager-older-link : this code contains the css necessary for older posts link
and #blog-pager controls the contains necessary for Home page links.

If you are using custom blogger template , then you will find something like this :
#blog-pager-newer-link {
padding-left : 20px;
border : none;
float : left;
}
#blog-pager-older-link {
float : right;
padding-right : 20px;
border : none;
}
#blog-pager {
padding : 0 15px 0;
text-align : center;
}
.blog-pager a {
color : #cc0000;
}
.blog-pager a:hover {
color : #cc0000;
}

XML tags which shows the post navigation links

Now let us see the default tags included in the blogger templates which shows post navigation links.To see this tag , you need to check ” expand widget templates” option in EDIT HTML page of the blogger template.

There you can find the following tag

<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;’ 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 + &quot;_blog-pager-older-link&quot;’ 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>
<div class=’clear’/>
</b:includable>

As mentioned in the CSS codes itself,

  • <b:if cond=’data:newerPageUrl’> contains the code to show newer post links.
  • <b:if cond=’data:olderPageUrl’> contains the code necessary to show older posts link.
  • <b:if cond=’data:blog.homepageUrl != data:blog.url’> will contain the code necessary to show Home Page Link.

Hope now you know about the code which controls the Older post and Newer post links for post navigation. Now let us see how to customize this script to suit our blogger template.

Adding background image along with text

Let us see how to add Background image to the text Older Posts and Newer Posts.
Go to EDIT HTML SUBTAB and then search this following code or similar.

#blog-pager-newer-link {
float: $startSide;
margin-$startSide: 13px;
}

#blog-pager-older-link {
float: $endSide;
margin-$endSide: 13px;
}

#blog-pager {
text-align: center;
}

Now replace the whole code with

#blog-pager-newer-link {
background : url(http://i43.tinypic.com/11bro1s.jpg) no-repeat left 0%;
padding-left : 20px;
border : none;
float : left;
}
#blog-pager-older-link {
float : right;
background : url(http://i44.tinypic.com/2n6dirp.jpg) no-repeat right 0%;
padding-right : 20px;
border : none;
}
#blog-pager {
padding : 0 15px 0;
text-align : center;
}
.blog-pager a {
color : #cc0000;
}
.blog-pager a:hover {
color : #cc0000;
}

In that you can change the background images and then customize the color of the text. That’s it now save your template , you can find something like this :
post navigation image

Replace Image with Background images

To replace the “older posts” , ” Newer Posts” and “Home” text with background images , follow these simple steps.

replace the css code for blog post navigation widget with this code

#blog-pager-newer-link {
padding-left : 20px;
border : none;
float : left;
}
#blog-pager-older-link {
float : right;
padding-right : 20px;
border : none;
}
#blog-pager{
padding:50px 10px 10px 10px;
text-align:center;
}
.blog-pager a{
color:#A10000
}

.blog-pager a:hover{
color:#15FFED
}

and then save your template. Now check ” Expand Widget Templates” option and now replace the

<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;’ 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 + &quot;_blog-pager-older-link&quot;’ 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>
<div class=’clear’/>
</b:includable>

with this code

<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;’ expr:title=’data:newerPageTitle’><img alt=’techieblogger.com’ src=’http://i69.photobucket.com/albums/i42/queenofdreamsz/NextIcon.gif’ title=’Newer Post’/></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;’ expr:title=’data:olderPageTitle’><img alt=’Techie Blogger’ src=’http://i69.photobucket.com/albums/i42/queenofdreamsz/BackIcon.gif’ title=’Older Post’/></a>
</span>
</b:if>

<b:if cond=’data:blog.homepageUrl != data:blog.url’>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’><img alt=’Techie Blogger’ src=’http://i85.photobucket.com/albums/k47/bongmalove/icon/home.gif’ title=’Home Page’/></a>
<b:else/>
<b:if cond=’data:newerPageUrl’>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’><img alt=’Techie Blogger’ src=’http://i85.photobucket.com/albums/k47/bongmalove/icon/home.gif’ title=’Home Page’/></a>
</b:if>
</b:if>

</div>
<div class=’clear’/>
</b:includable>

You can change the images included with your own blog navigation images. After that save your template and check your blog. You can find a blog navigation links something like this :


post navigation

Show blog post navigation above posts title

You can also show the blog post navigation script above post title too. In order to implement this hack , go to EDIT HTML page of your blog and check ” EXPAND WIDGET TEMPLATES” option. Now search this tag in your template.

  • <b:includable id=’main’ var=’top’>

Now paste the following code immediately below it

  • <b:include name=’nextprev’/>

Troubleshooting problems with blog post navigation script

Few might have noticed that the Blog post navigation links will be misaligned sometimes. Newer post , Older post and Home page links will get together. So it means that the CSS codes are missing for the file. To overcome this problem , just copy and paste the corresponding CSS code you need above ]]></b:skin> .

Blog post navigation missing

Sometimes the blog post navigation may be missing in your blog. It’s because the blog post navigation code may be missing in your template. To overcome this problem , search this tag in your template with ” expand widget templates” option enabled.

<b:include name=’nextprev’/>

if the tag is missing , then add the above tag in your template below <b:includable id=’main’ var=’top’> as shown in the image.

troubleshooting

Hope this post will be helpful for all blogger newbies. If you need any other customization then feel free to ask in comment form below.




If you like this article , then please help us by bookmarking

47 Responses to “Customizing Blogger post Navigation script”

  1. This is something I call quality and a rare post ofc, thanks for sharing buddy. Keep up.

  2. wow mohammed very cool post thank you bro
    could you please make a tutorial with sharing is wealth widget co it is very cool

    my greetings bro

  3. salam aliekom
    very nice tutorial Mohamed!
    I ll try it soon thank you brother.

  4. Hi,
    You have a very nice site with great information.
    for more check out…………….

  5. [...] Blogger Blogs have default post navigation script which allows user to navigate between posts.It consists of ” older posts” , “Newer posts” and ” Home page” link. Since it’s default , no CSS codings are added for the navigation script. So in this post I will explain how to modify the script and to add background images and then aligning the older posts and newer posts links properly. View post:  Customizing Blogger post Navigation script [...]

  6. Pretty good post. I just came by your blog and wanted to say
    that I have really liked browsing your blog posts. Anyway
    I’ll be subscribing to your feed and I hope you post again soon!

  7. once again thank my friend. I have learn more thing in here…
    I will try it

  8. How I Make $5000 a Month Posting Links on Google 25. Jun, 2009 at 5:26 pm

    Loved your latest post, by the way.

  9. You R The Best.. Thank You!

    Asallamualaikum ( Peace be with You)!!

  10. thank for the tip, I have find it to change the button navigation

  11. Thnx for the hack brother. Cheers

  12. I can finally understand this stuff after years of fooling around with blogger, but it was just gobledygook when I started. Thanks so much for the effort.

  13. Not sure that this is true:), but thanks for a post.
    Thank you

  14. Thanks friend, really good and informative post

  15. Hi
    i tried for my site its not working. let me try once again. Thanks for yr post.

  16. Hey this is great….BUT, can you help me figure out how to get the navigation thing at the bottom of the post, so when you read the posting and get to the bottom you can wish to continue from there without having to go all the way to the top…

  17. I’m looking for a way to display the title of the previous / next posts, instead of “Newer Post” and “Older Post”. Do you know how to do that?
    Thanks a lot!!

  18. Rare to see such a informative post !!!

  19. Thanks a lot Mohammed, this was very helpful ( I had implemented this on my other blog 0 but I couldnt remember how :) however , I would just like to tell you that I didnt have to go into the CSS to apply the code above – - expanding the widgets and simply inserting the images one wishes to use works just as well . Thank you again , I always enjoy passing through your site :)
    best wishes 2 u.

  20. lo que quieres decir es que la barra de navegacion, esa que va abajo, al final del post, en el que te puedes desplazar a la “paguina 2″ o 3 o 4 o la que sea, y asi no perder tiempo en ir de post en post como fue publicado, no esta en blogger contemplada???

  21. hmm nice tuti but… no screen shot as example ? i mean how it will be after everything is done.

  22. Got a problem. I have this template borrowed from the internet. It works fine, but the problem is that instead of saying ‘older posts’ it says the same thing but in a different language. How do I change the script to make it display in english? thanks :)

  23. I’m still confused how to keep the code exactly where?? :D

  24. I wish not approve on it. I think warm-hearted post. Particularly the designation attracted me to study the intact story.

  25. Hi,

    I’m looking for something like this for my website. I need it so that pages 1-5 are numbered, and also, that the titles, and a thumbnail image of each post, of posts on pages 1 & 2, are shown underneath it. There is an example at the bottom of the page of this website: http://www.gossiponthis.com. I would really like something very similar to go on my website if possible. I know this is a wordpress website, but mine is on blogger, so if it’s possible to get something like this using a code for blogger, that would be great.

    Thanks,

    Ben

  26. XML-Fehlermeldung: Open quote is expected for attribute “{1}” associated with an element type “id”.

  27. Nice post ,But I want Post title with Link instead of “newer post “older post”

  28. somehow i don’t understand this.

    i’m using a classic template, but i can’t find that code in the template. I use a skin from a website..

    do you have the link code to get to the newer / previous posts?

  29. hi,

    how to add newer and older post navigation on old blogger blog (blogger template) ?

    please…

    rgds,

  30. hi man , great post! everything should work on most templates, however it did not work on my template.

    my main page does not show the next / prev links. I DO have the blog post navigation code in the script, it’s all there but the navigation is just not showing up in the main page. any ideas?

  31. hi there,

    i want to show this type of view on my home page but nothing is showing onhomepage…it is showing only on sub page…chk it out…
    http://mostdownloads4u.blogspot.com/

  32. Hiii!
    I’m using blogspot.com and I have made my own customized layout and such (classic template version)

    The problem I have is I have no idea how to put my ‘new & old posts and comments’.
    I’ve tried your codes but for some reason it doensn’t showing up…

    Do you have any clue? Do you want me to mail my entire CSS codes?

    Thanks!

  33. Hey! Thanks. I have added it to my site
    http://www.gtarockstars.in But Can u give me some more good images that will suit my site’s design?

  34. nice post bro
    keep posting anyway

  35. Hi Mohamed, im using a custom template and my “older posts” links are not showing correctly. Link appears just next to my second post instead below last post on page. Can you please tell me how to fix this. Thank you.

  36. Dear Sir, i have a blog of Medical Centre, i just want that when i make a new post it do not appear on top of the last post,in other words I want that Older Posts remain on Top and whenever i create a New Post it will always remain at the bottom..Please help me for that..

    Warm regards..
    Saboor Ali

  37. Why do I always get the older/newer post links even when there are no other posts available? For example if I search for posts associated with a particular label and I know there are only 3 posts then those 3 posts are displayed with the older, home and newer post links at the bottom. When I click on the older posts link (like a reader would do of course) then no posts are displayed. Is there a “b:if cond” statement that will determine if the link should be displayed? Thanks.

  38. tnx for the post. i’ve used it.

    c”,)

  39. Thanks!
    I need to show comments in my blog.

  40. I am having a problem with my site. its http://www.accordingtorachel.com and I cannot get the links or words for older post. Can you help?

  41. Dicoba dulu bos.
    nice info, thank you.

Leave a Reply

You must be logged in to post a comment.