Friday, March 23, 2012

How to make buttons change color on blogger

Hello everyone! 
Today I'll show you how you can create a navigation bar like the one we have. With images that change upon mouseover. I had to look around the web a lot to find something that actually works so I decided to show you what I've learned, to make your own easily :)

First of all you will need:
Account in Photobucket or a similar site
Illustrator (optional)

1) Now you must decided how big you want your navigation bar to be. Mine is 900x87
The best way to figure out what size you want is to make a quick sketch right beneath your title and then crop that area with the wonderful "crop tool"

Alternative: Go to the "Desing" window on blogger and select "Template Designer". There, click on the "adjust widths" button. This will give you the yardstick by which you will decide your navigation bar.

2) Next draw your navigation bar.
like so:

Now, you must understand that when the navigation bar change upon mouseover it's basically two images saved on top of the other as one.

So what you need to is in a new layer draw small lines to define the space between the buttons.
After that create a new layer and draw the images you want to show after the mouseover.
like so:

Ok.  navigation bar is basically a series of images next to each other.

3) Start cropping and saving each image and uploading them on Photobucket.  If you have 4 categories like us you should end up with 8 pictures saved in photobucket.

4) Now, go to design --> Page elements and add a HTML gadget.

Cope and paste the following code:


<a href="href=" LABEL">< img src='YOUR FIRST IMAGE URL HERE' onmouseover="this.src='YOUR SECOND IMAGE URL HERE" onmouseout="this.src='YOUR FIRST IMAGE URL HERE" border="0"/></a>


The purple code is the main one (between the <center><ul> and </center></ul>) Whenever you want to add a new image just copy and paste the main code. 

I hope i explained this briefly. 
If you have any questions please contact me :)

video tutorial that really helped me, check it out ;)



  1. Thanks for your comment on my blog, yours is so colourful! =D

    A big hug!

  2. this is definitely helpful, i was just thinking about making one yesterday!


  3. Thanks for stopping by my blog, can't wait to check out the rest of your posts!

  4. This is great idea, thank u for sharing your knowledge!:) And thank u for your comment on my blog, I hope I'll see u soon again!
    Kisses from the newest follower!;)


  5. Thanks for sharing this tip, maybe I'll use it too someday :) xoxo ♥

  6. Ευχαριστούμε που το μοιράστηκες μαζί μας!! Θα μου φανεί χρήσιμο σίγουρα :)

  7. THanks for stopping by my blog and for your comment!

    This is a very helpful tip! Great post!

  8. I love your blog :) This is a great post I have been wondering how to make navigation bars like this for a long time so thanks for the advice!I am now a follower!

    I would love it if you'd take a look at my blog and maybe follow me too!


  9. This is very helpful!! Thank you so much for sharing :)

  10. This is so useful!! Thank you so much for this!!

  11. Hello There. I discovered your weblog thee use of msn.
    This is an extremely well writen article.

    I will be sure to bookmark it and return to read mopre of
    your helpful info. Thanks ffor the post. I'll definitely comeback.

    My blog post ... m88


Related Posts Plugin for WordPress, Blogger...