136 Create navigation buttons to enhance your blog
October 26, 2007 /

Many blogs and websites feature "navigation button" links like a menu at the top of the page or beneath the header. This can be really helpful for readers to navigate to areas of interest in your blog, such as the home page, about page and contact links.

In this tutorial, I'll explain a very simple (but effective) method of creating such a "navigation buttons" for your own blog, which you can use to add easily accessible links to your post pages.

Here is an example of the buttons you can create using this tutorial (though the links in these buttons all point back to this page!):


To create these buttons for your blog, we don't need to use any external images! With a little CSS styling, you can easily create navigation buttons which change color when your mouse hovers over them, making it easier to see that these are indeed clickable links. This style of button is helpful to your visitors and invites them to view the important pages you link to using these links.

There are two main steps to creating these buttons for your blog:

  1. Add some styling code to your blog's template
  2. Create a new HTML/Javascript widget, and create your links

You can use these links anywhere in your blog that you are able to place an HTML/Javascript widget, such as your sidebar, the header section, or above your blog posts.

Here are the steps in detail:

Add some code to the style section of your blog template

The "style" section of "layouts" blogs is contained between the <b:skin> and </b:skin> tags in your template. The simplest way to add extra styling code is to place this just after the closing </b:skin> tag (key CTRL+F to easily find this in your template).

The styling code used for the buttons featured above is as follows:

a.navigation {
background: #000000;
color: #ffffff;
margin: 1px;
padding: 5px 35px 5px 5px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
a.navigation:hover {
background: #5d5d54;
text-decoration: none;

If you copy and paste this code just before the closing </b:skin> tag in your blog template, you will easily be able to create your navigation buttons. If you prefer, you can change the color of the backgrounds (highlighted in red) to colors which better suit your blog. You can easily find the hex values for the colors you need by using the Color Calculator in the tools section of this site.

You will notice that there are two statements in this styling: the first defines what the buttons will look like as they appear in your blog, while the second (hover) statement defines the background color of the button when you place your cursor over the button (the "mouseover" effect).

Create your links in an HTML/Javascript widget

Once you have added this style code to your template, you should save your template and go to the layouts section of your blog (Template>Layout). Here you should create a new HTML/Javascript widget where you would like your buttons to appear.

In this new widget, you should add your links in the following format:

<a class="navigation" href="http://your-link-url.blogspot.com">Your link</a>
<a class="navigation" href="http://your-link-url.blogspot.com">Your second link</a>
<a class="navigation" href="http://your-link-url.blogspot.com">Your third link</a>

Be sure to replace "http://your-link-url.blogspot.com" with the URL of the post page (or link) you would like the button to link to, and replace the link text (eg: Your Link) with the text you would like to display.

Once you have created your links (you can add as few or as many as you like), save your HTML/Javascript widget, and take a look at the effect in your blog.

How this works

The styling code we add to the template creates styling rules for "anchor links" which are given the class of "navigation". We can use different "classes" to create different effects for elements which appear in your blog layout; the class we give for the navigation links does not affect other links in your template, only those which have the class of "navigation".

With a few tweaks, you can change the style of these buttons to completely blend with the overall appearance of your blog template, and create attractive clickable buttons to your important pages which your visitors will love.

Technorati Tags: | | | | | |

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.


  1. Thank you, thank you! I have looked everywhere for information this well written and with such easy to follow instructions - that worked the first time I tried it! Thanks again for great tips!

  2. Thanks, noe y have nav buttons on my blog :-)

  3. This looks like it would be neat. I'd love to use it to help readers navigate to certain posts in the sidebar. Unfortunately, those don't have URLs (you can't click on the headline).

    Does that mean it's not possible to use nav buttons to send people to those parts of the blog?


  4. For Kris: That's a tricky one... It may be possible to use links which would scroll to the part of the page where the posts appear. But unless these posts could have their own URL, it wouldn't be possible to send visitors to these different posts.

  5. thank u very much very easy to apply

  6. Hi amanda..nice tuts.. :D

    Is there any way to use flash buttons..those would look really nice.. :P

    hope there is.. :D

  7. Hi Amanda,

    I have been creating my new blog for a while and your page has proved absolutely invaluable, so thanks!

    Is there a way to use these navigation buttons to link to LABELS made in posts, eg: Art, Architechture, Fashion?

    Thanks for your help,


  8. it's not working...=(
    and how can i make my own template??
    i just can't do anything to improve my blog.. can you help me??

  9. If you have, say 6 links, is there a way to have two rows of links?

  10. How do I put the buttons going across and underneath the title?

  11. All my navigations turn out in LARGE LETTERS.. Why? :'(

  12. I'd like to have a red nav bar across the bottom of the header -- as well as another inside the header for "About Me" "Contact Me" "Shop My Store" very similar to yours as of July 24, 2008

    HOWEVER, all my link styling is tied together -- navbar, sidebar, post links.

    How do I separate those so that I can style each individually?

    I tried taking the a: styling off the "body" section. Everything went wonky on the sidebar.

  13. This comment has been removed by the author.

  14. Thanks....Great post !!

    I want to add 2 columns at the end of my page to display

    - Most Viewed Posts
    - Recent Posts

    How can I do so ?

  15. I don't want default black background buttons.
    I want to provide my own buttons.

    How is this possible ?

  16. Amanda, thanks heaps! Check out my testing blog and it's working, yay!

  17. you are really doing a wonderful job. thanking u 4 ur wonderful service.

    i am using blog since 6 moths but still i did not earn anything. can u help me on this purpose. Your suggestion will help me relly.
    please if you can, mail me: mdyousufchy@gmail.com.

    im looking forward to you...........tc

  18. Can anyone tell me how to center the text within each button? Thanks so much!

  19. I found a website where you could put your own background, tables, etc. in the layout as a set. My question is, there is a little flower button that can be added,like instead of the B square button in blogs I'm following, whatever. How do I replace these with my own little image for a button? It may be easier for you to look @ it:

    Instead of the blogger button beside every blog I'm following, I have my own little flower that goes with my page set. I would like to use. I seen it done with cups of coffee, whatever to match the page.

    Thanks, Jen

  20. Many Thanks Amanda!! You are the best in this field!! 2 pointers here:
    1) The simplest way to add extra styling code is to place this just after the closing b:skin tag (key CTRL+F to easily find this in your template).-MISTYPED "after the closing". "just before the closing" is mentioned after the code box.

    2) If you prefer, you can change the color of the backgrounds (highlighted in red) to colors which better suit your blog. -NOT HIGHLIGHTED.

    Thank again for your marvellous blog.

    Shrek from MyBlogLog

  21. I tried to ask my question but it was referring to the "skin" part. It wouldn't let me type the code in my comment... anyways..

    I am using the minima template. I have used the tutorials to add a 3rd column and a fixed background; and a background behind the content of the blog (text). Now I am trying to add the navigation buttons...

    I followed the instructions and there are no buttons on my blog. There are the two links (I put two breaks between them) which work and they change color when you hover over them, but they do not have actual buttons.

    I cannot find the opening "skin" code. I can find the "closing skin" code right after the footer information, but I can't find the opening skin code. So, I just pasted the above code underneath the closing skin. I don't know if that is the reason or not.

    If you can please help me I would appreciate it! Thank you in advance.

  22. hi,

    these are really great instructions. but my question would be, how i could use this navbar to create a section within my blog. like "home", "news", "music" etc. is it possible to make these sections appear like my blogs main page just empty until i post something in there?


  23. Thanks for the great and easy-to follow instructions. I am total dummy when it comes to designing my own blog but your tutorials are really very user friendly! Thanks a lot!

  24. Is it just me? I can't seem to be able to do it! I'm using the minima template and I can't find the < /b:skin> tag.

    I do see the < b:skin> tag which is near the top and I see the < /b:skin> which is near the bottom of my blog html. Is that it?

    Where do I paste the code?

    When I paste the code before the < /b:skin> tag, I click preview and I don't see it. But when I paste teh code after the < /b:skin> tag, after clicking preview I see the code at the top of my blog.

    Am I just stupid? Cause I'm really bad at this kinda stuff. :) Help?

  25. Is it just me? I can't seem to do it!

    The only < /b:skin> tag I see is somewhere near the bottom of my html. I use the minima template, by the way. The < /b:skin> tag is far away from the < b:skin> tag, which is near the top of the html.

    Is it the right one?

    If it is then here's another problem.

    When I paste the code before the < /b:skin> tag, and I click preview, I don't see it in my blog. And when I paste is right after the < /b:skin> tag and click preview, I see the code right above my blog!

    Help! I'm bad at this!

  26. how to do thiS in floating style?

    my bloG:

  27. hey! I've been looking for this for AGES... thanx a lot----
    I do have a question though... is there any tutorial about how to put these tags on a navigation bar right beneath (or next to) the header? I would like it to look pretty much like that widget u made showing side by side tags for recent posts/comments and favorites----
    thanx again!! hope u read this :)

  28. i got the same trouble as Yvart

  29. thank you so much amanda i have been looking all over for this tip, everything worked out perfect i changed the colors around, thank you again you have a wonderful site with lot's of great info!!

  30. I just have trouble. Period. lol First of all, thank you for all these incredible tutorials - you are incredibly awesome for taking the time to do all this!! I'm sending major karmic love your way. :)

    Secondly, I've done exactly what you've said...and I don't have "tabs", per se. Mine just show up as little words in my side bar. ??? Ok, I can deal - but what I'm trying to do is provide a link for someone to contact me. Email me. And everything I try doesn't work. I just want to make a button users can click on to email me at gmail. Can you please help me? Since I have enough kids, I'll name my next cat after you. I swear.

    Or I'll put you in my will. You can have my Tupperware collection. lol Just help me, please - I've been trying for over a month to do this.

    Thanks a ton,

  31. Hi Amanda

    Great tutorial it worked really well
    But I was just wondering hw you got the navigation buttons to go onto the red line on the header

  32. Thank you Amanda. This tutorial is well designed. I got myself something I was looking for. I got the navigation buttons was looking for. It is working well too.

  33. I created a linklist for a navigation and then styled it to my liking.

    Here's a link to my test site --

  34. I think you are going to be my best friend... I am joking.... I have a question like the one Kris had... I have thought to use links for two or three different blogpages I want to create and relate as well but some of the buttons I want to make I think it would be better to have particular posts as a target. I think I want to link them to labels of my posts... if it works in any way! I haven't experimment on that yet... Do you think you could help me on this?

  35. Thanks for nice sharing. It is very helpful me. Again Thanks.

  36. I made this nav bar. Thank you. It was fairly simple. However, why does the font or size/color of the font on the nav bar change when you change the font size/color for your blog? Can't this be made independent?

  37. Hi....where do I find the style section...or where do i find the layout?

  38. how do i remove the date of the post?
    it links to the post that i want it to link..but the date stays there...any idea how to remove it? because i want it to look like shop and not have dates and all..

  39. Thank You! Very much! It worked in first Try!!
    Nice Job..

  40. Love everthing about your blog! Thanks. Brilliant. Most useful blog I've seen for a long time!

  41. Thank you.very nice informations

  42. Thanks for you help. The best part of your wonderfully helpful blog is that you explain things clearly. Your blog is a special gem in a field of stones.

  43. Hey!
    I've had an art blog for quite a while and recently used GoDaddy to make my own domain for an online portfolio. I wanted a navigation bar to link to my images, artist info, contact, etc. on a separate page. I got all of that down, but when I click on the links I made, it sends me to blogger's "this page doesn't exist" page. What am I doing wrong? How do I make pages branching off my website?


  44. This has been most helpful. Thank you for your time, and for sharing this.

  45. Thank you for a great blog!

    I followed your instructions and it works perfectly.

    However, I can't get the blank space filled in with the menu color. IOW, the menu stops when I stop adding menu items instead of continuing to the right side of the page.

    Is there any easy fix?

    Here is my blog: http://www.drugchannels.net

    Thanks in advance!


  46. I answered my own question -- but I'm curious if it is correct. It works fine on windows computers but does not display correctly in mac.

    I added the following line as the last item in my menu:

    style="width: 357px; background-color: #445566;" class="navigation">&nbsp

    where "357px" is the extra space that needed to be filled in with my menu background color (#445566).

    On mac (both firefox and safari), the spacing is off so this blank item wraps to the next line.

    Any thoughts?

  47. Now thats what i needed to know...You have helped me out bunches.....And another thing,you have a kick butt website...
    Keep up good work,,i'll be watching

  48. I used this one on my site http://www.mzansitoday.co.za and it worked perfectly. Visitors told me that it is now easier to navigate my site...great stuff

  49. Hi Amanda!

    I admitted your neat tip and succeed.

    But here I faced a problem!

    I was using IE, I could not see the Navigation Buttons, I tried the latest IE version but failed again, then I installed AVANT Browser but here that trouble was waiting for me too!

    Atleast I installed Mozilla FireFox 3 and WOW i could see the Navigation Buttons!

    This all things I thought that should be acknowledged to you, so whenever someone ask you about this problem then instruct them to change their Browser.

    Thanx for the TIP!

    Lastly I have a question here!

    You instructed the method to show the Navigation Buttons below the BLOG TITLE, but you didn't tell about the procedure to show these buttons above the BLOG TITLE!
    I think (& suggest too) that EDIT your ARTICLE and include the complete procedure for placing the Buttons at appropriate places!

    Thanx again and Regard for you Effort (Infact the Great Effort)!

  50. Hello thanks for the tuto; however after having changed it all i have an error message in the page elements if i want to add widgets or reorganise things on the page. the template is not recognized and this message appears
    "Invalid data reference post.dateHeader: com.google.layouts.framework.widgetview.GoogleMarkupException: No dictionary named: 'post' in: ['blog']"

  51. I am having the same problems as Yvart & Isa aswell :-(

    Need help pls, ty

  52. Hi, thanks for this tutorial. I got the buttons up just fine and edited them. I then went on to make static pages, as in backdated blogposts. However when I enter the link to said blogposts in the HTML Java script I get the error code that the page does not exist. I checked and doublechecked the link is correct and works when entered directly into an address bar. I linked to my homepage (link ending in .com) and that works, but all the links ending in .html do not work.
    Can you help out, please???

  53. you are the perfect person for me! Thanks!

  54. For those like Yvart, i was having the same problem, till i realized i had been putting the given code in the #footer{}. Do make sure the footer is closed! It means, that u paste the code after the } is closed.

  55. Thanks for the post! I've added the buttons to my blog and it all works fine. I do have one question though. I've currently added the HTML/JAVA widget above my BLOGS widget. I would however would like to have the HTML/JAVA widget directly underneath my HEADER widget. Is there any way I can get it there? I've tried dragging and dropping, but it doesn't work. I'm using a hacked Minima template. You can view my blog here http://tjongolongo.blogspot.com
    I hope you'll be able to help me with this!

  56. thanks for the post! the tabs show up on my blog but, I am only able to link each tab to one post. How can I make more than one post show up when someone clicks on a particular tab?

    I tried inserted multiple URL's separated by commas but, I get an error message. Any help would be appreciated. Thanks!!


  57. I have been looking at other blogger helpsites for months, and yours is by far the best! I had no trouble creating and editing my nav buttons, but I'd like to make nav widget look like yours, with a continuous bar of color going across the page instead of discrete buttons. I'd also like the first button to start to the far right instead of in the center. My blog is www.able2able.com and I am using stretch denim which has been expanded to 3 columns. Thanks!

  58. To create a link to posts with certain labels you just type this:

    I am not sure. But I think that that capitalization also matters depending on how you typed out your labels.

    Hope this helps anyone.

  59. Oh and for those you are wanting to center the text. Its better to change the padding to this:
    padding: 5px 20px 5px 20px;

    Hope this helps anyone. =]

  60. I made this picture/graphic navigation buttons on my blogspot. My background graphic is not ready yet, but I love this navigation buttons I redigated in photoshop. And that now is on my blog.

    Just come and watch my blog: http://nyttighjelp.blogspot.com/

    Is there someone that have any idea on how I can get the picture to blink, or change colour when mouse move over the picture?

  61. dear friend iam one of the your feed burner subsriber.kingly guide me about cloud lable gadget like in your blog .
    how to change my blogspot.com to .com. how much money i have to invest/year

    how to change my blog archive like you

    how to add recent post gadget

  62. I want to add flash button in blogspot. but damm when I click on them they don't work.. :((( Help anyone plx.

  63. can you make alphabet navigation menu for blogspot?

  64. I have the buttons situated the way I want them on my blog.


    But I want the gradient bar that my link sit in to only stretch as far as my blog width. I've tried just about every fix my non-HTML brain can think of.

    Please help me if you can.


  65. benifits of Oats for skin
    Oats are also an amazing natural beauty enhancer. They soothe and heal the skin,

    while reducing inflammation. Inflammation is one of the number one causes of

    premature aging, and while it all starts on the inside, reducing outer

    inflammation is also necessary for gorgeously radiant skin.Because oats are

    slightly rough, they are one of nature's most amazing exfoliates. They soften the

    skin, making it super duper silky smooth. Oats have actually been clinically

    shown to help heal dry, itchy skin.Speaking of dry itchy skin, many people who

    suffer from eczema say that an oatmeal bath totally sorts them out! They are

    totally hypoallergenic unlike many of the ingredients that are given to people

    who have eczema by doctors.Oats can also soothe chicken pox, mosquito bites, and

    dry skin (caused by excessive central heating, pollution etc.) They soothe mild

    burns, any type of irritated skin.Whether you are choosing oats to eat for

    breakfast, to increase sexuality, or to enjoy soft smooth skin, make sure you buy

    just plain old (organic of course) oats.
    for more details:

  66. I am not sure what you mean by write your own URL to link the posts? I'm not sure how to do that, all of my posts are on my homepage... I want to make tabs for "about me", "Contact me" etc... Help! I'm soooo new to this and I'm suprised I even got this far! haha

  67. Well, blogspot really is user-friendy. All you gotta do is play around with it and you're an expert :) I took a look at blogspot and found really really handy tools which in a custom design would require intense coding and he2, headaches. Nice post btw. Simple and to the point. All tutorials should be like this. I just wanna add..Zen coding rocks \m/.

  68. This comment has been removed by the author.

  69. This comment has been removed by the author.

  70. I am thoroughly convinced in this said post. I am currently searching for ways in which I could enhance my knowledge in this said topic you have posted here. It does help me a lot knowing that you have shared this information here freely. I love the way the people here interact and shared their opinions too. I would love to track your future posts pertaining to the said topic we are able to read.

  71. Thanks for taking the time to discuss this, I feel strongly about information and love learning more on this. If possible, as you gain expertise, It is extremely helpful for me. would you mind updating your blog with more information

  72. How do I get "Home" from the new sub pages?

  73. Seems easy, but I don't know how exactly. Here is my site http://www.eshayaris.com/


  74. It is really very nice post i got informative post.You can also check the share market trends on
    Net Asset Value

  75. Thanks to this post. This helps me a lot in creating nav. in my own blog.

    More power!

  76. Thanks to share with us the information. I wish you good luck!

  77. Thank you for giving us the html and access to your knowledge of blog design. I know your customers walk away very happy!
    I was wondering how to do that menu.
    My blog is a work in progress.

  78. I'd love to learn how to do this navigation bar works with my blog!! Thanks. This was a great tutorial!

  79. WOHOO!!! I did it!! Thank you SO much! You are the "Blog Goddess!"
    I wish I could figure out how to move it down some, but other than that, WOOOHOO!

  80. Thank you so much! I just did this on my blog. However, I am finding that the left margin is still wider than the right. How do I fix this?
    Also, how can I remove the border or make it transparent? Thanks so much for your help!

  81. Thank u Aanda!It's exactly I was looking for.Thanks a lot.

  82. Thanks a lot for giving information about blogger menu buttons.
    Free CSS Tutorial

  83. Nice post here i impress to read this this story.

  84. I was looking for something like this, good job

  85. How can i add a short search box at the end of his navigation menu. is it possible please help i need your suggestions.

  86. Fabulous article writing. Your article delivers varied passion therefore I bookmarked this science system for future visit that i hope can get a current content from your post and every one content unit progressing to be pleasant to scan with some new things.
    web development dubai
    dubai web design

  87. I’m impressed. Very informative and trustworthy blog does exactly what it sets out to do. I’ll bookmark your weblog for future use.

  88. This is very essential blog; it helped me a lot whatever you have provided.bubblegum casting

  89. Pretty! It was really a wonderful blog. Thanks for the provided information. bubblegum casting reviews

  90. Awesome blog! Now In anticipation of a follow-up …. bubblegum casting reviews

  91. Quality stuff may be the key to invite the users to visit begin to see the blog site, that’s what this site provides. ny criminal defense lawyer

  92. Thanks for sharing out such a great informative content are extremely fastidious.

  93. How fine of you!!!! Really awesome efforts you have shown.
    click for more details

  94. Nice blog with awesome stuff!! Can you provide more information?? We are in fact waiting for you…
    Learn More Here

  95. Your contents are moving ahead with days persevere guys.
    sewa mobil

  96. Your composing is purely awe-inspiring that I desired to read such high quality material...phlebotomy classes

  97. Continue the good work; keep posting more n more n more.

    best remington shaver review

  98. It’s my first time to visit this site & I’m really surprised to see such impressive stuff out there.
    Braun Series 7 Shaver review

  99. I was searching for many blogs site and now finally I have got this cool place with lots of information. lung cancer

  100. I am truly keen of reading posts on the attention-grabbing topics n now I'm on the most effective place. resume tips 2012

  101. I don't think numerous websites offer these posts of collection.south beach diet

  102. Good blog along with the excellent quality stuff and I’m sure this will be greatly helpful.
    adt reviews

  103. Found your blog excessively interesting indeed. I really enjoyed studying it.
    protect america security reviews

  104. Thanks a lot


  105. What a great blog it is!!! You are in truth on your way to colossal success. Well done. Top Rated Electric Shavers

  106. It’s never too late to develop your data and your contents really excite me a lot. Panasonic ES-LA93-K/ESLA63-S Arc 4 review

  107. There is good collection of the articles with informative stuff. Flannel Duvet Cover Twin

  108. It's not my very first time to visit this blog; I’m visiting this daily and acquire superb info from here day by day.labia repair surgery

  109. This blog is further than my expectations. Nice work guys!!! How to burn belly fat

  110. lifeshield camera
    Having such type of incredible blogs provoking the people to come and visit this site and comment. Thanks for all

  111. credit repair
    Your blogs and its stuff are so notable and worthwhile it can make me return.

  112. Really amazing blog, I’d love to discover some extra information. Dylan O.

  113. write my essay for me

    It’s amazing in support of me to truly have a web site that is valuable meant for my knowledge.

  114. teluate
    I am truly keen of reading posts on the attention-grabbing topics n now I'm on the most effective place.

  115. Medical Negligence Solicitors
    That's a nice place of you; we have been polishing off there.

  116. cheap whole life insurance
    Thank you so much you have given the great blogs site by which we can get more advantage.

  117. Hmmm, Your writing and entertaining style is so awesome, keep it up buddies!

    car insurance

  118. life style
    I am truly pleased to visit the website; your blog carries a quite helpful data, with real facts.

  119. I didn’t have any experience about that, this blog has really built up my confidence.
    best citation

  120. After all, what an awesome site and enlightening posts, I would surely bookmark this!
    best security system

  121. Superb way of explaining, and great blog to get wonderful information.european watch company

  122. Of course, what a superb site with wonderful posts, enlightening issues has been discussed I like it. home security system

  123. Thank you so much for ding the impressive job here, everyone will surely like your post. umra packages

  124. I attach importance to reading this post that could make the people think. Furthermore, thanks for allowing me to comment! web 2.0 service

  125. This blog is absolutely useful; I love the piece of informative writing. High PR web 2.0


Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy