Tutorial: Making Menu Buttons

     So, last time, I showed you how to make a header. Today, we'll work on making menu "buttons" to put on the side bar of your blog. This takes a little bit of HTML coding, but considering I didn't know any when I woke up this morning, I think you can handle it.
  Once again, this is a fairly easy thing to figure out, but it would have been much easier to do so if I had a tutorial to guide me. So, for the common good of beginning bloggers everywhere who loath the generic templates and widgets, here is a tutorial to jazz up your blog.

     In the tutorial, I am making a Pinterest button, but keep in mind that you can make your button link to anywhere you like, as you can see below.

     That being said, here is my tutorial for making menu buttons on Photoshop Elements (after the jump).

1. In the Elements editor, open a new file and make it fairly small. Mine are 150 pixels wide and 50 pixels high, but you can fudge this if you want a different size.

2. Once you have the file, fill it with color, text, pictures, or whatever you want.

3. Then, just like for the header tutorial, save the image as a JPEG or another Blogger compatible file.

4. Next, upload your photos onto your online Picasa account (this account is linked directly to your Google account, in case you are unfamiliar with it). Once it is uploaded, right click on your button image and click "copy image URL." You will need it later.

5. Now, go to your blogger dashboard and go to the "layout" menu. On the side (or where ever you want the button) click "add a gadget."

6. On the menu that pops up, select "HTML/JavaScript." Brace yourself, it's about to get kind of tricky.

7. In the content box of the menu that pops up, insert the following:
<a href="insert URL here">
<img src="insert IMAGE URL here">

     Note: The first URL you are entering is the URL of the site or page you want the button to link to, not the URL you copied in step 4!

8. Then click "save" and you are done!

     Now, you can make nice, simple buttons to link to your Facebook, e-mail, Twitter, Pinterest, Etsy shop... really, the sky's the limit.

      If this helped you, or you have questions, I would love to know!

Edit: If you want a horizontal menu, it is as simple as moving your HTML/JavaScript gadget from the side bar, to the top portion just under your header. You may have to fudge some of the sizes of the buttons to make it look good, but it really is a relatively easy modification.

No comments:

Post a Comment

Thank you so much for leaving me a note! I love hearing what my readers have to say--in fact, comments literally make my day.

Please be nice and don't use profanities or other negative language.