Follow Us on FacebookFollow Us on TwitterRSS Subscribe Follow Us on YouTube

August 26, 2012

Design Your Own Blog Button














Interested in designing your own button to advertise your blog?

It's actually more simple than you think. Just follow this step-by-step tutorial and you'll have one in minutes.

1. Once you have a photo picked out that you want to use, you can add any words or designs using a photo editing program of your choice. I use PicMonkey religiously. You can resize, crop, add frames, words....etc. You must resize the photo. The standard size I use is 200x200. I've seen many buttons that are 150x150 or 125x125 also. It really depends on the size of the sidebar that you are placing the button in or the Sponsor spot you are buying. Once you are done editing the image, save it to your computer.

2. Now you got to upload it to an image hosting site. There are many to chose from. To name a few: Flickr, TinyPic and my personal favorite, Photobucket. Once you have the image uploaded locate the direct link to that image because you will need it in a future step.

3. From your computer open a New Text or Word Document. Copy and paste the below HTML code to the new document so you can easily edit and save it when you finish.



<a href="WEBSITE URL" target="_blank">
<img src="IMAGE DIRECT LINK URL" /></a>


(Please do not remove the Creative Common License)

4. To edit the code, you will need to change the Your URL to whatever link address you want people to be taken to when they click on your button. The target="_blank" does not need to be edited, this is just a code that tells the button link to open in a new window. If you do not want your button opened in a new window you can remove it. The Image Direct Link should be changed to the direct link you located earlier on your image hosting site. This is the direct link to your image. Once you are completely done editing your button code, it's always a good idea to name and save the file for future use or editing.

Example of completed button code:


<a href="http://www.alittleunhinged.com" target="_blank">
<img src="http://i1156.photobucket.com/albums/p571/smdgeunhinged/button250x250.jpg" />


* If you want to test your code or place it in your own sidebar follow these extra steps:


Depending on what blog platform you use, the steps will vary. In Blogger, which is what I use, go to Layout, Add a Gadget, HTML/Java Script, paste your button code then click save.

For other platform directions or questions, please e-mail me:

bfranks@alittleunhinged.com