How To Put A Button In Your Sidebar

This tutorial is for Typepad but I imagine the basics are pretty similar for other blogging platforms.  For my example, I'm going to be using my Crafty Crow button. 

You need two things:

*the button image (or any image for that matter as long as it is the right size - my button is 120 x 120)

*the url (web address) that you want to go to when someone clicks on the button; i.e. http://belladia.typepad.com/crafty_crow

~ Let's begin! ~

• upload the image to the files section of your blog (click Control Panel tab then Files tab)

• where it says Upload A New File click Browse and find the image on your computer - then click Upload (I usually put the image that I am going to use on my desktop so it is easy to find.)

• after it is uploaded, find the filename (in the column to the left on the same page) and click the link icon (looks like a little chain link)

This is the url for your image - keep this window open!

• now open the Typelists tab in a new window

• click on Create A New Typelist

• in #1 choose a Link list

• in #2 choose a name for your list

• then click Create New List

• in the Title field put the url of your image (copy and paste it from the window you left open)

Now this is the trickiest part - you'll have to change the html a bit.

• remove the part show in red:

<a href="http://belladia.typepad.com/CCButton2.gif">Download CCButton2.gif (8.4K)</a>

• and change it to this (new part in blue):

<img src=
"http://belladia.typepad.com/CCButton2.gif">

Make sure the quotes are in there because they make all the difference!

Tricky part done!

• now in the URL field put the web address that you want to go to when the image is clicked, for example:
  

http://belladia.typepad.com/crafty_crow/

• now click Save

This new Typelist has to be added
to your blog.

• go to your blog's Design tab and click Select Content

• click on the box next to your new Typelist and click Save Changes at the bottom

Click on Order Content if you'd like to change where the button is located on your sidebar.

Be sure to click on the button from your blog to make sure it works and you're done!

I have to assume there are other ways of doing this but this is how I do it and it works :)  If any of you more experienced computer people out there have any tips please leave them in the comments!  Thanks, I hope this helps someone :)

Comments

[mrmonkeysuit]

Hi Cassi,
Just to let you know I always use this tutorial. Ever since you first put it up I keep coming back to it because every time I go to put in a new button I forget.
Thank you for this great resource!

[Andrea @ The Train To Crazy]

Thanks for this tutorial. I use it all the time!

[Lorajean]

Thanks so much for the how to on this, I had been wondering how to make one for a while now!

[Lauren]

I just tried it and I got the link but no cute button. What did I do wrong?

[katy]

if anyone out there can write up blogger directions, i'd be so very grateful! got the button up, but no link. boo.

[Carrie]

Thank you!
Hope you have a swell Mom's Day!

[Nan]

Thank you a million times over! I have been hiring a high school kid to come and add buttons for me but now I'll be able to do ti myself!!! I'm bowing down to your brilliance this very moment! Nan

[Letty]

Hi, thanks for this tutorial, I finally have a button in my sidebar!

[Jennifer]

Thank you!

[carolyn]

I tried to ass your button tonight but it was huge in my side bar...what did I do wrong?
It's funny that you put up this post as I was telling someone about crafty crow today and wanted to send your link to her.

[Renna]

I wish I were computer literate enough to know how to translate that to Blogger. I've been wanting to pick up some buttons for my sidebar, but can't seem to figure it out. I've seen a couple of people give instructions, but they were not basic enough for me.

Now, if I could find a "children's guide to placing buttons in sidebars in Blogger", that would be peachy! ;-)

[Berlinswhimsy]

Oh, good! I do the same exact thing but every time I changed the html code I wondered why I had to do that---is there an easier way? I've often wondered why it's such a hastle... I always update my blog by trial and error---lots of error!! ;-)

[Morgan]

Got it! Thanks!

[Nevis]

Very cool. However, it doesn't work with Wordpress.

[Robyn]

Hi! I just wanted to tell you that I love your blog and am inspired by you and your creative ideas. I am a big fan and supporter of SMART, CRAFTY women like you!! I also wanted to let you know that I just featured your idea about Embroidering Children's Artwork on my own blog yesterday. I think it is so cute and clever and have had it bookmarked for quite some time so I could include it in a Mother's Day gift ideas post.
Thank you for your blog and for not only seeking out new ideas for yourself, but for also being generous enough to share them with others like me! :)
Have a great day!
~Robyn

[kristin]

i feel like you wrote this for computer incompetent me! thanks!

erin's question confuses me though...do you need to email us the button?

[Angie]

Thanks, I wish more people would post these kind of things and help the computer illiterate like ME!! :)

[Ellen]

Thanks for sharing this tutorial - I'll have to double-check mine to make sure all my buttons are accurate (and not stealing bandwith - a new and confusing thing to me!).

[erin]

this is how i do it too. could you re-email me the button? that email got deleted and i would love to put it up. thanks, cassi.