Every blogger knows the importance of having a blog button. It’s a simple, approximately 150×150 pixel image that tells the world you exist. The more places it’s put, the more people see you, the more traffic your site gets. It’s simple. But buttons are used for so many other uses too. Advertising, awards, events, and so many more possibilities.
Here’s the How:
1) Decide what you want to use your button for. What do you want to advertise?
2) Open up your choice of image editing software. My poison of choice is Photoshop. You can use a large range of programs from Photoshop to Paint.
3) Design your button using text elements, images, digital scrapbooking elements, ect. With a blog button, less is more. Only include information that is essential. Your blog name, event name, dates, a brief overview or slogan for example.
4) Save your image to your hard drive. You’ll then need to upload the image to an image hosting site. Flickr and Photobucket are a couple I use.
5) Once your image is uploaded to the internet, open up your blogger dashboard. Click on the Design tab. Click on the Add a Gadget option.
6) Once the new window opens, scroll down until you find the HTML/JavaScript option. Click on the blue plus sign to open this window.
7) Copy and paste this code into your HTML/JavaScript window:
<center><a href=”ENTER YOUR DIRECT LINK CODE HERE” target=”_blank”><img src=”ENTER YOUR IMAGE CODE HERE” border=”0″ alt=”Photobucket” /></a></center>
8) Ok, the red text in the code you copied will need to be changed. From your Photobucket (or whatever host service you are using) copy and paste the Direct Link Code. Paste it in place of the ENTER YOUR DIRECT LINK CODE HERE text.
9) Repeat with the Image Code and put it in place of the ENTER YOUR IMAGE CODE HERE text. You will need to take out the [IMG] and [/IMG] tags.
10) Your code should look EXACTLY like this, except with your code in place of the red text. Save your gadget and go check your blog. It should show up.
<center><a href=”ENTER YOUR DIRECT LINK CODE HERE” target=”_blank”><img src=”ENTER YOUR IMAGE CODE HERE” border=”0″ alt=”Photobucket” /></a></center>
In order to get the box with your code that allows others to copy your button, you will need to add another bit of code to your gadget. Go back to the gadget you just created.
1) Copy and paste this entire code underneath the code for your button image.
<center><div style=”border: 3px solid black; color: black; overflow: auto; width: 150px;”>
<a href=”YOUR DIRECT LINK HERE“> <img src=”YOUR IMAGE CODE HERE“></div></center>
2) Insert the same codes you did in the same places as you did for the button image code above. Save the code. Go check your blog and see if worked. you should have both the button image and the text box with your code in it.
If you would like some help creating a button, please contact me and we’ll discuss the options. whilehewasnapping[at]gmail.com
Krista
