Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Sunday, December 11, 2011

Blogger Picture Menu


A famous one for this week - how to add image buttons as menu in Blogger, instead of using text-based menus like Pages gadget and Linklist gadget. It's rather easy actually. Without further ado..

Note: If you're looking for a picture menu in Dynamic View templates, click here instead.

Step 1:


First thing first. Get your pictures ready. I'm not gonna show you how to create/design your buttons. But I'll share a cool website that lets you create image buttons easily. Click the link below, and get your buttons created:

CoolText

Once you've created your image, click on Download Image and save it to your computer.

Step 2:

Next, upload your image somewhere and get its direct link. Click here if you're not sure how to do this.

This is the direct link that I have gotten for my image:
http://1.bp.blogspot.com/-RkG2LfcNLOg/TuPyQ3MQ2pI/AAAAAAAAERY/4MYcz9hg0h8/s270/cooltext606586176.png

Step 3:


First, remove any existing menu gadget that you have, and replace it with an HTML/Javascript gadget.

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget (below your header) - HTML/Javascript.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget (below your header) - HTML/Javascript.

Paste the following code in your HTMl/Javascript gadget:
<a href="ENTER_LINK_ADDRESS_HERE">
<img src="ENTER_IMAGE_ADDRESS_HERE"/>
</a>

Step 4:

It is obvious that you need to modify the code given above. Replace 'ENTER_LINK_ADDRESS_HERE' with your link address. Link address is the address that you want your browser to open when you click on it. For example, if you want to have a link to your static page, your link address will be the address of your static page. You get the idea.

Also, replace 'ENTER_IMAGE_ADDRESS_HERE' with your image address --> the one that you've gotten in Step 2. This is what I have now.
<a href="http://www.southernspeakers.net/">
<img src="http://1.bp.blogspot.com/-RkG2LfcNLOg/TuPyQ3MQ2pI/AAAAAAAAERY/4MYcz9hg0h8/s270/cooltext606586176.png"/>
</a>
Click 'Save' when you're done.

Step 5:

You should already see your first button in the menu now. But a menu isn't a menu if it has only one single link. To add more buttons, simply pile on the code in Step 3 and 4. For example, to have three buttons, this is the template that you'll be using. Note that I've just been copying and pasting the code above, with the same code being duplicated three times. Nothing special here.
<a href="ENTER_LINK_ADDRESS_HERE">
<img src="ENTER_IMAGE_ADDRESS_HERE"/>
</a>
<a href="ENTER_LINK_ADDRESS_HERE">
<img src="ENTER_IMAGE_ADDRESS_HERE"/>
</a>
<a href="ENTER_LINK_ADDRESS_HERE">
<img src="ENTER_IMAGE_ADDRESS_HERE"/>
</a>
And the completed code with the addresses in place would look like this:
<a href="http://www.southernspeakers.net/">
<img src="http://1.bp.blogspot.com/-RkG2LfcNLOg/TuPyQ3MQ2pI/AAAAAAAAERY/4MYcz9hg0h8/s270/cooltext606586176.png"/>
</a>
<a href="http://www.southernspeakers.net/">
<img src="http://1.bp.blogspot.com/-4vLIIrq1gBQ/TuP-j7I47rI/AAAAAAAAERw/3ING2Oa1WEE/s200/cooltext606603004.png"/>
</a>
<a href="http://www.southernspeakers.net/">
<img src="http://3.bp.blogspot.com/-ROUqVt9LvnQ/TuP-jw2G4vI/AAAAAAAAERk/p-pE9DYu91g/s120/cooltext606603171.png"/>
</a>

Good luck and have fun.

17 comments:

  1. @SOFTECHNOGEEK: Thanks. Cheers :)

    ReplyDelete
  2. oh ............nice .....post great idea ....

    ReplyDelete
  3. @Stalin: Feel free to try it on.. Cheers :)

    ReplyDelete
  4. Good one- is it possible to do this trick in DV? Like say, I wanted a little facebook logo in the menu bar.

    ReplyDelete
  5. @John B: Well, technically it is possible, but we need to take a slightly different approach from the one shown on this page. I'll give it a whirl, and come up with a tutorial on this - very soon :)

    Cheers.

    ReplyDelete
  6. great tips!
    have done it with your great explanation of the tutorial.

    may i know how can i center it please. ^.^

    ReplyDelete
  7. Hi Yoga,

    Decided to leave the Dynamic view behind after the problems I've had and switch back to a classic style. However, when I use this formula to create images, I'm unable to keep the background of the pages tab. In your image, the grey background seems to remain.

    Because the images are white (the same as the background of the main page) they are seemingly invisible.

    Hope this makes sense and there is a solution.

    All the best.

    ReplyDelete
    Replies
    1. Hi Alan,

      Sorry for the late reply. I'm gonna have to take a look at your blog to see what's wrong. What's your blog's address?

      Cheers :)

      Delete
  8. Hi, thanks for this tutorial. Can you help me with something? Is there a way to have a different image appear on mouse hover and when the tab is active? Or is that too complicated?!

    ReplyDelete
    Replies
    1. We could pull of hover effect with relative ease compared to selector tab (the link with page that is active).. In any case, I'm gonna have to have a look at your blog to proceed further. What's your blog's address?

      Delete
    2. Thanks, this is it: http://www.sandinmytoes.tk/

      Delete
    3. Sorry it took ages to reply you. Since you already have an HTML menu in your blog, I could just give you the HTML template to add the hover effect. But the code will be lengthy, and it'll be best if we could bring this discussion to the forum. Go to Blogger Help Forum and create a discussion there, and let me know its link once it's published.

      Delete
    4. That's alright. Here's the link to my discussion: https://productforums.google.com/forum/#!mydiscussions/blogger/XWoCpCKUxIc

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.