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:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFHL6IfhYgepnku553LMH5_6TwLVlYd0Xs6NCBPLIkgmzN8FUtq7qB-j6ohhyoBeqyLwbiKcV_Bg29dfJaYVVQ-LRpDMh5fcW5vmUieXVjAtQ954r7HvIHTDGCbbqrPVABIoVfF3pGrbk/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFHL6IfhYgepnku553LMH5_6TwLVlYd0Xs6NCBPLIkgmzN8FUtq7qB-j6ohhyoBeqyLwbiKcV_Bg29dfJaYVVQ-LRpDMh5fcW5vmUieXVjAtQ954r7HvIHTDGCbbqrPVABIoVfF3pGrbk/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFHL6IfhYgepnku553LMH5_6TwLVlYd0Xs6NCBPLIkgmzN8FUtq7qB-j6ohhyoBeqyLwbiKcV_Bg29dfJaYVVQ-LRpDMh5fcW5vmUieXVjAtQ954r7HvIHTDGCbbqrPVABIoVfF3pGrbk/s270/cooltext606586176.png"/>
</a>
<a href="http://www.southernspeakers.net/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXYNa0qBcbN_Yt8nkdV9kCdCWXId8Vuytzoeuh1nyIJhzx2C5hRvxk5nIK4reoOpjlYcVB5vbNuoeDuvHaSxGhYAJ7lB5MSLZ9bK3DBUzpE618jXKaccwvkLf_he7s232QwIE5gFYCe6w/s200/cooltext606603004.png"/>
</a>
<a href="http://www.southernspeakers.net/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzB9nU21U3rz6IJWiDmAhc6RN1SEaBqo3AeFnTCpMt0QnwBD1dYBN1wnd2i4_a-PBktgpOHhuZyJVtjZHmM1J_cb5HZFCIYPtlAo5XnbuxNvZwADqXQu35TewKl58Et3w1I5BR_ukzkNc/s120/cooltext606603171.png"/>
</a>

Good luck and have fun.