Friday, March 13, 2009

How to make your own blog button

I spent my afternoon, literally the entire afternoon, creating a button for my readers. I am really shocked that I figured this all out, with a bit of help from this site and this one too. Basically, it took me awhile, longer than I'll be telling my hubby, shhhh!
I hope I can help save my Blogger pals some time so here's the run down. Here's the way I figured it all out, maybe there is an easier way but it works and that's all I care about.
Step 1: Design a graphic, I chose one of my own pictures and edited it in Picasa. You can use free clip art or design something, just make sure you own or have permission to use it. I saved my finished graphic on my desktop.
Step 2: Go into your blogger dashboard, select "New Post" as if you are going to write a post. Upload your image from where ever you stored it. I don't know if this matters, but I didn't select to align my picture, e.g. "None" and chose a small size.
Step 3: After it uploads, click on the image and then select the "Hyperlink" button from your Blogger toolbar, next to the font color option. Insert your homepage or blog address, e.g. http://sippycupsandfingerprints.blogspot.com/
Step 4: This is the part that I didn't know existed, see all those hours, I was educating myself. At the top right hand side of your post window you will see two tabs, "Compose" and "Edit Html". Click on "Edit Html", now you will see your HTML code for your button. Select the code and "Copy".
Step 5: Open a new browser window, go into your blogger dashboard and select, "Layout". Over to the side of your layout, you need to select, "Add a Gadget", then select, HTML/JavaScript. Paste your code into the window.
Step 6: At the bottom of the first code you pasted, on a new line, paste the same code again. I have to word this out rather than actually type it, because the computer just reads it otherwise. I am not computer smart enough to code it correctly to show you the code.

Type a less than symbol, "textarea"without the quotations, then a geater than symbol, and at the very end of your pasted code type, a less than symbol, a /, "textarea"again without the quotations, and then a greater than symbol.

This will show your code in a scroll box beneath your button , so your readers can display your button on their own site. Click save and you will be ready to arrange this gadget where ever you like on your blog.

If you have any questions leave me a comment and I'll try to help you out the best of my pea-brain ability. Oh, and don't forget you can now display my button if you enjoy reading Sippycups and Fingerprints.

3 comments:

Sweats, Nikes, and No Make-up said...

So, what's a button? I'm confused.

Miranda said...

It's the picture at the top of this post. People can copy the code from my sidebar and paste it into their blog. Then anyone who clicks on the picture will be directed to my blog. Make sense?

Sweats, Nikes, and No Make-up said...

Got it! :)