1. Create Your Button
If you are not already using some image editing software, you need to familiarize yourself with some programs. Don't worry, you don't need to pay an arm and a leg...or anything for that matter! There are many online programs that are offered for free: Pixlr, Ribbet, PicMonkey, BeFunky and iPiccy. I use GIMP, which is a free downloadable open-source photo editing tool. It takes some time to get used to it (believe me, when I first started using it I thought I was going to throw my laptop out the window and be done with blogging! But now I consider my GIMP knowledge as intermediate).
Once you have found your go-to software, upload your image that you want to use as your button and re-size it to 125px by 125px. This is the standard size of buttons so it's advisable to stay within the 100-150px range. For my button, I simply used the same text, background picture and "eat live design" picture of my website header. This keeps with the theme of my blog. You can do whatever you want - include a pic of yourself or use images you normally use on your website. Be creative, but keep it professional - remember you want to attract new visitors to your site!
2. Upload Image to Server
Once you created your button, you need to upload it to a server. This way it is easily retrievable from any website that shares your button. You can use any image hosting site, such as Picasa, ImageShack, Imgur or Photobucket.
Once your photo is uploaded, you need to get the URL code for the image. Depending on your upload server you can simply right-click and select "Copy Image URL". I used Photobucket to upload my image, so I have to select "Share to Other Services" in the top right area (delineated with red box below).
From there you select"Links" and copy your HTML code.
3. Create Button Code
Now that you have the HTML code for your image, you need to create a code that other bloggers can copy and paste. The basic code the button is:
<a href= “http://www.yoursiteurl.com”><img src=“http://yourbuttonimageurl.jpg” /></a>
Make sure to replace the "yoursiteurl" and "yourbuttonimageurl" with your own links.
For my blog, my button code looks like this:
<a href="http://tasteofaugust.blogspot.ca"><img src="http://i1306.photobucket.com/albums/s574/tasteofaugust/TOA_Button_zpse4425eae.jpg" /></a>
And the image should appear like this once the code is copied
4. Add Your Code
In your Blogger layout page, go to "Add a Gadget" and click on "HTML/Java Script".
Copy and paste the following code, replacing the coloured font with your own info. This is the code that will show your button picture as well as the code that others will copy and paste:
<div align="center"> <a href="http://www.yoursiteurl.com" target="_blank"><img alt="YourBlogTitle"; src="http://yourbuttonimageurl.jpg" /></a> </div>
<div align="center"> <textarea><center><a href="http://www.yoursiteurl.com" target="_blank"><img alt="YourBlogTitle" src="http://yourbuttonimageurl.jpg" /></a></center></textarea></div>
Make sure to replace all purple text with the direct link to your blog, the pink text with the direct link to your button image, and blue text with your blog website name. Notice the target="_blank" in the code? It is simply a way to open up the link to your blog in a new window or tab. That way the user has both the previous (referral) site and new (your blog) site open. Win win for both!
This is what you will end up with:
Have a question? Feel free to ask in the comment section below. I will try my hardest to answer your questions :)