What will inspire you to create today?

Tuesday, June 7, 2011

Trying to Learn How to Make Blog Buttons

Over the past few months I have been trying to make a blog button; however have not been truly successful.  I am giving it another try with the help of one of my quilting friends.


Buttons


This is What I want it to look like
Making the button wasn't actually difficult, but there are a lot of steps involved. I'm hoping what I type here makes at least a glimmer of sense.

Here is where I began to make the button:
www.shortpumppreppy.com/2009/06/you-make-your-own-cutest-ever-blog-buttons-for-free/

I am a Mac user, so I used SeaShore to make my orange background.
I didn't have a photo or any clip art to use, so after I did the background, I used Picnik for the text and the tree. This tutorial explains using Picnik pretty well. You must make an account here, if you don't already have one. (It's free!)
www.picnik.com/app#/home/welcome
Once the button looks the way you want it to, you must save it to your computer. I'd recommend saving it to the desktop, so it is easy to find.

This next part is what freaked me out, you have to save the button to the internet. Well, I was baffled! This page explained it very nicely:
a-heart4home.blogspot.com/2009/04/blog-button-with-text-box-for-code.html

First you need to upload your button to Photobucket. Again, you have to register here, but it is free.
photobucket.com/
In the third paragraph of the tutorial you'll see this : "(for more information on how to get a web address for your button click here). "
Click that word, 'here', and it explains how to get the location on the internet of your blog button that is now stored in Photobucket.

Now--open up a Word Document (or whatever word processor you use) and copy and paste that code from Photobucket into a document. You'll need to use it a couple times, and it is much, much easier to cut and paste than to try and type it out!

After you have done this, the fourth paragraph of the tutorial looks like gobbledy gook, all that HTML code, you need to cut and paste that into your word document, too. Once you have done that, follow the directions to cut and paste your blog address (or flicker address) into the code, and you will do the same thing with the location code for your button. Once you've done that in your word document, save it, and next you'll be opening up blogger.

When you open up Blogger, go to the the DESIGN tab. Click on "ADD A GADGET" on your side bar. When the new menu pops up, click the + next to "HTML/JavaScript". Add a title, such as "Grab our Button" to the title box, and then go back to your word document. Copy and paste that HTML code into the box and hit SAVE. Then save your changes to your blog, and take a look at it. The new button with the code below should appear on the blog. Click the button to make sure it takes you where it is supposed to go.

It isn't as hard as it sounds when you break it down, but there are a lot of steps.

I'd be happy to help you as you work your way through the process. I think between the two of us, we can get your all fixed up! Please feel free to ask me any questions you'd like.


I did it!  You can grab it on the right!

No comments:

Post a Comment