Saturday, November 27, 2010

How to Make a Button For Anything and Put it On Your Blog

Long title,isn't it?Ok,so I recently discovered how to make a button that I can put on my blog,and people can click on it and go look at my necklace on the Fire Mountain Gem website.
A lot of how I found out how to make one came from this post.But I found a bit of it confusing and decided to write my own.

1.First of all,what you're to do is find a picture you want to use for the button.What you want it to be will depend on whether you are going to make a button for your blog,your website,a picture,or whatever.
The size of the image should be no more than 150px wide,usually,so that you won't have a problem with the edges of it being cut off.But if you have more space and know how much wider to make it,then you can make it bigger.Mine is 150 x 150.I used picnik.com to crop and size my pic,then used the "create" page to add text.Save it to your computer(don't forget to add .jpg at the end of the file name if you change the name).
Then you need to put your picture somewhere to create a link.Either photobucket or maybe flikr.I tried both of them,and for some reason that picture would not upload,so i gave up,and made a blog post with that picture.Then I could click on the photo and there would be a link for me to copy and paste.So keep that window up so you can copy and paste later.

2.Now onto the hmtl.I was having issues with the html showing up,but I googled and now i have it all figured out. :)
Here it is.Copy:
<a border="0" href="yourblogURL" target="_blank"<>img src="yourimagedirectlinkURL"/<>/a>

3.Once you've got that,go to your blog,and go to "Design",and then just make sure you're on "Page Elements".Find "add a gadget".Just make sure it's in the right place,though you can move page elements around later if it doesn't suit you.Then once that box pops up,go to "HTML/Javascript",and click on the plus sign.Paste the hmtl there.
Now see where it says "yourimagedirectlinkURL"?Erase that,while keeping the quotation marks.Now it's time to go to where you have your image and copy that link.Paste it there instead.
Then go your blog,or whatever webpage you're wanting to direct folks to,and put it instead of "yourblogURL",while still keeping the quotation marks as before.
Hit save,and you're done!

If you want to show me yours once you're done,or need any help,comment here,or send me an email at jennystreasuresforu(at)gmail.com

And feel free to share this post with anyone who needs it.There are buttons on the bottom for twitter,myspace and such,too.

Now I just need to make a button for my blog and who knows what else.Maybe twitter,or facebook.Fun. :)

3 comments:

Jennifer said...

I need some help getting a button from my etsy page to my blog! I can't seem to get the code right. I don't know anything about code... this is what I'm entering and it says it is a java error. Maybe you can make some sense of it?

href="http://www.etsy.com/shop/beadobsession?ref=badge"><img src="http://www.etsy.com/images/community/resources/badges/findme.jpg"

Jennifer Vance said...

Hi,Jennifer. :) Are you wanting an etsy mini that goes right to any of the listings that your click,on the side,like i have,or an actual button?I can help you with either.
For the etsy mini,go to "Your Etsy".Then scroll down to the "Promote" section.There will be an Etsy Mini there.Click on that.Select the layout to fit your blog,and then copy and paste the first html code in the add a gadget section.
For some reason I'm having a hard time with the button thing...i'll mess around with it,and see what i can do. :)
But in the meantime,there's the etsy mini,and that works pretty well.

Tisha said...

Thanks for this info. I've been looking for simple instructions for a blog button.