Tech Tuesday: Sharing Your Button Code

Here I go, starting another weekly feature. Honestly, I think I just like making up buttons. But seriously, it's a good way to keep me posting every week and giving me a consistent topic to write about.

Since I'm often asked by other bloggers, both newbie and seasoned veterans, about some tech-related issues, I thought I'd post something every Tuesday about how to improve your blog in a technical way. I designed my blog myself within Blogger, after some frustrating Google searches about widgets and HTML modifications that drove me nuts. It's truly a work in progress, and I'd like to share some of the things I've found with you so that you can tweak your blog to your liking. It helps that I'm married to a Unix administrator (computer guy), so when I really get stuck, I can bribe him (with sex) to fix what I've messed up.

Today, let's talk about buttons. Yes, I make them, you make them, but what do you do when you want to share them? You often see those little boxes of HTML text that you copy and paste into your blog layout, but how do you actually get that little box onto your blog? (here's my box below)

<img border="0" alt="button2" src="../../../albums/mm402/Katwalck/katydidbutton2.gif"/>

First, you need to set up an account with an online image hosting site like Photobucket (which I use) or ImageShack. Unless you have your own server, you need one of these sites to host your button image, so that anyone in the world can have your button on their blog without having to save your image to their computers (which can take up memory, depending on how many buttons you'd save).

After you've uploaded your button image, either in .GIF or .JPEG form, you'll see a section of HTML code under the image, at least this is the case in Photobucket
Here is my button (a .JPEG) on my Photobucket page. The HTML code I'm referring to is in the red box. This is your button code, which will eventually be what's inside that white box on your blog. We'll get back to this code later.

In order to get that box to appear on your site with the code for your button inside it, you'll need yet another string of HTML code. I use this one"

<textarea rows="8" cols="15" name="textarea" wrap="VIRTUAL"><a href="http://katydidandkid.blogspot.com" target="_blank"><img border="0" alt="button2" src="http://i318.photobucket.com/albums/mm402/Katwalck/katydidbutton2.gif"/></a></textarea>

There are many others out there that you can find via an online search, but this one is the shortest and sweetest that I've come across.

Rather than copy this exact code from me, you'll need to modify it, otherwise you'd just get my button to appear on your site. When you change this code, be careful of changing only what I tell you to. The omission of even a quotation mark can make this not work.

The first thing you do is copy the HTML code that is under your photo (see my screen shot above with the red box surrounding the place where the code is) and paste it in place of the section of the code below that is boldfaced

<textarea rows="8" cols="15" name="textarea" wrap="VIRTUAL"><a href="http://katydidandkid.blogspot.com" target="_blank"><img border="0" alt="button2" src="http://i318.photobucket.com/albums/mm402/Katwalck/katydidbutton2.gif"/></a></textarea>

The next thing you'll need to do is change is the URL address inside the first set of quotation marks. You'll see two URL addresses in the code, and you'll only be changing the first one. You will type your URL address there, making sure to keep the quotes around it. Your code will look something like this, with you URL typed in there where you see "YOUR BLOG ADDRESS HERE" typed in the code

<textarea rows="8" cols="15" name="textarea" wrap="VIRTUAL"><a href="http://YOURBLOGADDRESSHERE.com" target="_blank"><img border="0" alt="button2" src="http://i318.photobucket.com/albums/mm402/Katwalck/katydidbutton2.gif"/></a></textarea>

If you don't change this code in the HTML generated by Photobucket, it will just take your readers to your button image on the Photobucket site, and of course you want them to come to your site, not your Photobucket page!

Then leave everything else as is. In Blogger, you'll open up your layout page, and add a Gadget and choose HTML. Copy the entire code, paste and save. This will make that box with your code inside it appear on your blog. Then, from your blog's main page, copy the code from the box and add your button to your layout, just to make sure the code works.

So that's it! Good luck with it, and email me if you have any questions. Stay tuned next week for instructions on how to take a screen shot and use it as an image. Great for random number generator winners.