Customizing Blogger post Navigation script

23. Jun, 2009 32 Comments


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 Customizing Blogger post Navigation script

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.

Mohamed Rias - has written 94 posts on Techie Blogger

I am Mohamed Rias , admin of Techieblogger.com. Basically I am Engineering student but still blogging is my passion. My areas of interest are HTML , CSS , Jquery , Javascript and PHP.

Visit Authors Website  |  All Articles From This Author
0
hits

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

32 Responses to “Customizing Blogger post Navigation script”

  1. Bariski Reply 23. Jun, 2009 at 6:10 am

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

  2. Mohamed.Yousef Reply 23. Jun, 2009 at 8:19 am

    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. mohamed Reply 23. Jun, 2009 at 12:10 pm

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

  4. A.S. Reply 23. Jun, 2009 at 3:43 pm

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

  5. Customizing Blogger post Navigation script | Adobe Tutorials

    [...] 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. Katy Reply 23. Jun, 2009 at 6:11 pm

    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. One-4-All Reply 25. Jun, 2009 at 10:49 am

    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 Reply 25. Jun, 2009 at 5:26 pm

    Loved your latest post, by the way.

  9. Diaz Reply 01. Jul, 2009 at 5:15 am

    You R The Best.. Thank You!

    Asallamualaikum ( Peace be with You)!!

  10. flashplayer Reply 04. Jul, 2009 at 10:22 pm

    Nice!

  11. AnisBlog Reply 06. Jul, 2009 at 11:59 pm

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

  12. Rosmana Apolla Putera Reply 07. Jul, 2009 at 12:53 am

    Nice Post!

  13. Blogal IT Reply 09. Jul, 2009 at 3:25 am

    Thnx for the hack brother. Cheers

  14. pc laptops wiz Reply 09. Jul, 2009 at 3:54 pm

    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.

  15. Zoran Reply 14. Jul, 2009 at 4:10 am

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

  16. Hakan Reply 15. Jul, 2009 at 3:06 pm

    Thanks friend, really good and informative post

  17. Karthikeyan Reply 15. Jul, 2009 at 5:18 pm

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

  18. Chris Reply 16. Jul, 2009 at 5:03 pm

    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…

  19. mélanie Reply 17. Jul, 2009 at 2:32 pm

    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!!

  20. kostenlos downloaden Reply 19. Jul, 2009 at 8:18 am

    Great post!

  21. Friend4u Reply 27. Jul, 2009 at 9:15 am

    Rare to see such a informative post !!!

  22. Script Reply 27. Jul, 2009 at 2:16 pm

    nice tutorial

  23. Mia Reply 10. Aug, 2009 at 8:29 pm

    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.

  24. Carlos Reply 15. Aug, 2009 at 12:53 pm

    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???

  25. Andy Reply 27. Aug, 2009 at 10:25 pm

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

    • Mohamed Rias Reply 30. Aug, 2009 at 6:19 am

      @Andy

      i have included a screenshot.. Please check back

      If you need any other modifications then let me know :)

  26. emeline Reply 22. Sep, 2009 at 11:01 pm

    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 :)

  27. asep canda Reply 30. Sep, 2009 at 2:55 am

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

  28. Generic Viagra Reply 08. Jan, 2010 at 7:36 pm

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

  29. Andres Reply 12. Jan, 2010 at 4:42 pm

    great!!

  30. Ben Reply 24. Jan, 2010 at 10:49 pm

    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

  31. Prashant Reply 23. May, 2010 at 5:13 am

    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/

Blogger Hack, blogger tutorials