DIY Buttons in Your Blog's Sidebar (doodle goes high-tech, heehee)

At long last, the DIY blog design tutorial you've been waiting for (or given up waiting for since this old post) or could care less about, ;O) LOL. Sorry, this took me way longer than it should have. I'm frazzled & muddy-headed lately so clarity is a stretch. I had a whole section on html that made it way too complicated and had to edit my brains out!

doodle done on patterned gesso cardstock

Remember this card from my gesso obsession days? It's a doodle in pencil that turned into the buttons you see in my side bar. I just scanned it and followed the steps in this wanna-be-geek tutorial to make linked photo headings in my blog design (see the sidebar if you're curious)...

This is written for blogger & It's a very basic tutorial on how to make a a homemade button that will link to sections of your blog. (I'm no pro) but please feel free to ask any questions you might have. :O)

ETA: the simple version:

1. Create a jpg image with text on it
2. Create a post in your blog to link to (if you want it to link) copy the URL
3. Upload the picture (in Layout > add a gadget)
   
4. Paste the URL where it says link (where you upload the photo as a gadget)
   

& the long version with step by step explanation & suggestions...

The Image:

Find or create an image that you'd like to be the button. You may wanna use:

• a copyright free image that you find online
• a photo, photocopy, or a scan of anything you like (your favourite stamped card or fabric you love, or...)
  

I used a scan made of the image on that card up there (doodle done on patterned gesso cardstock.)

Altering your image:

You might find that the image looks nicer if you manipulate it in photo software, depending on the look you're after. I toned down the colour in my scan & reduced the contrast.

You might like to have different sizes of buttons. I have two. A short one for headings like Welcome, Design Teams, About me, My Links...

Then a tall one for my Sistahs, Blog Roll, Shopping, etc...

To get two sizes...
...I just saved an extra copy of the image and cropped it shorter. I saved a copy of each for all of the headings I wanted to make and kept 2 images called "master background tall" & "master background short" So I'd always have a fresh one to copy if I messed up (which I love to do) :O)

ETA: No need to worry about pixel size, Blogger has a "Shrink to Fit" option that should be checked by default when you upload your picture in add a gadget. If the box is not checked just check it) :O)

The Text:

Add headings or subheadings to your image:

For ideas on headings, you can look at what you already have in your sidebar, or what other bloggers have. Some ideas: Welcome, Subscribe, About Me, My Links, Categories, Recent Posts, Design Teams, Blog Roll, Shopping, Awards...

Some aesthetic pointers:

• Keeping the titles short & fonts the same size for all your buttons seems to look the best.
• High contrast between the letters and the pucture may be a good idea too (light against dark or vice versa.)
• Of course the letters should be large enough to be easily readable.
• Maybe try out one picture button before you create them all to save yourself the task of changing them all over if you don't like the look on your blog.

I added words to my image using Photoshop (I am the world's newest and most basic photoshop user so if you have a better way to do this I'd love to hear about it.) :O)

1. Jot down a list of the headings you'd like & what sizes
2. I probably have spelling mistakes so this'll be extra funny, but you may want to double check your spelling first, heehee.
   
3. Open your image in Photoshop
4. Click on the text box tool (letter T)
   
5. Place the cursor over the photo & create a box by clicking & dragging
6. Type into the box (you can select font and colour as well)
7. Ratify the text (I find the fastest way to do this is to select a different tool and wait til the program prompts me to, LOL)
8. Save the file as a jpg (titled whatever heading it is for your blog) & you're ready for the final step...
   

Add your new picture to your sidebar:

A) Create a post with the information you'd like to have the photo button go to when your readers click it. Like a blog roll (which you can copy from your old sidebar. The links should stay intact) ... Please see this older post for more info on that.

You can date the post for a date way back if you'd like to bury it in your archives instead of having it current, but it will probably go out to your subscribers.

ETA: If you don't need a link in the image, skip to step C. :O)

B) To link the image...Copy the url of that post & keep it in your clipboard. The easiest way to do this (on a PC) is to use your mouse...or the hot key 'Control C': highlight the URL and hit the control button and the letter C

C) Lastly, add the photo to your sidebar & link it.

1. In the Layout section of your blog, click on "add a gadget" in the sidebar section.
2. Scroll down to add a picture (with the tree.)
   
3. Click on the tree thumbnail or the plus sign to add this.
4. Click browse to add the photo from your computer.
   
5. To link it, just paste the URL you copied earlier (Control V) into the section that says "Link"
6. There's no need for a title or caption since the button is replacing that. :O) ETA: BUT, if you'd like to, you can add something like "Click to go to..." so people know the image is clickable.
   
7. Check to see that the link works.

...and there you have it: a homemade button that will link to sections of your blog!


Please let me know if there are any sections that make no sense, or if you try this & run into trouble. I'll be delighted to help where I can. :O)



Quick links:
(the two other blog posts that relate to this topic):

-Interactive link lists & buttons in your sidebar
-Internal links in your posts & how to link up a photo in a post

ETA: P.S. if you'd like to know how to change the width of your sidebar (or your main wrapper) of your template by changing your html, just let me know; I have the html alterations written out in a post. :O)

P.S. I'd love to see your new subheadings/buttons if you try this. Please leave me a link? :O)