Wednesday, February 2, 2011

Create Your Own Blog Button

Some of you might have noticed, or not, that I have added a blog button to the left sidebar. I decided to share some tips/instructions on how to make your own button. My day job is a web developer so if you have any questions feel free to ask.


1. The first thing you will have to do is create your button image. I used Photoshop but I know not everyone has access to this software. You could also use Paint, although it only has basic features, or you can download Gimp which is free. Since I am assuming most of you have a logo coming up with an image shouldn't be hard. My image is height 200 pixels and width 175 pixels.

2. Now that your image has been created you will need to upload it. You can use any of the online photo sharing sites such as PhotoBucket or Flickr.

3. Once you have upload your image to the site you will need to get the image url. If using Flickr then click on your button image from the main page. Click the Share This link at the top. Click Grab the HTML/BBCode link. In the code box you will see something like this:
<a href="http://www.flickr.com/photos/18855488@N04/5396848763/" title="button by joannacarrillo, on Flickr"><img src="http://farm6.static.flickr.com/5179/5396848763_c7145c3141_m.jpg" width="175" height="200" alt="button" /></a>

4. Copy the info in the <img src="" as highlighted above in red.

5. Now you will add your button to your blog. Using Blogger go to the Design tab. Click the Add Gadget where you want your button to appear. Choose the html/javascript box.

6. Put whatever title you want to appear above your button. In the textbox area you will copy/paste this code.

<a href="your blog URL/">
<img border="0" src="The image URL from Step 4" />
</a>
<textarea><a href="your blog URL/">
<img border="0" src="The image URL from Step 4" />
</a></textarea>

For my button the code looks like this

<a href="http://joannadoesitall.blogspot.com/">
<img border="0" src="http://farm6.static.flickr.com/5179/5396848763_c7145c3141_m.jpg" />
</a>
<textarea><a href="http://joannadoesitall.blogspot.com/">
<img border="0" src="http://farm6.static.flickr.com/5179/5396848763_c7145c3141_m.jpg" />
</a></textarea>

7. Click Save and you should see your button and the grab it code below it.

Leave a comment if you have any questions or problems.

1 comment:

  1. Hey, thanks for the tutorial. I need to get started on a button before I try to host giveaways. I tried doing it earlier with Photobucket, but it didn't look right. I have Flickr account. I will use that instead. Thanks!

    ReplyDelete