How to Make a Button for Your Blog Using Photobucket

While looking at the tons and tons of blogs that I follow and subscribe to I've seen that a lot of people don't have buttons for their blogs and I've also seen people asking how to make a button or where to get one from. I decided to write up another easy to follow guide for my fellow bloggers that are looking for a little bit of help. I'm using Photobucket, like always, so if you don't have an account you should set one up. It's free and easy and it'll really come in handy so you can save images online.

In order to make a button you need to have an image or a background that you can write the name of your site on. A very easy way to do this is to search google images for backgrounds, patterns, fabric backgrounds, purple images - whatever you want. A really good source for images is to do a google image search for free vector backgrounds or free vector images. You can spend a lot of time searching through the images, once you find the image that you want to use you will have to save it to your computer. Click on the image of your choice and once the page loads with the picture, right click it with your mouse, click on save picture as and save it to your computer in a place were you can find it easily.

I'll use this image for my example:

Once you have your image saved on your computer you need to upload it to Photobucket so that it will be online. Just log in to your account and click on upload images. Find your picture that you saved to your computer and double click it so that it will upload. Add the title and tags if you want to then return the picture to the folder. Now, click on edit in the left corner right above the image. This will take you to the editing menu for the image.

The first thing that you need to do is to crop the image so that it is 125 X 125. Click on crop at the top and then place your mouse on the image and click where you want to start cutting the image. You can drag the box around to cut the part that you want and it will say the size so just adjust the side and the top so that you have a 125 X 125 size image.

Here is what I cut out.



Now you can click on decorate at the top of the page and then click on text. Under text options, check transparent then type the name of your blog and any other text you want into the box and pick the font and color that you want and adjust the size until it looks the way that you want it to.


All that you need to do now is save your image, the save button is at the bottom of the page, and copy the HTML code from the Share This Image Box beside your new image. Now you have your very own, custom made button to represent your site.

In order to make your button clickable so that it will direct people to your site when they click on it you will need to add an extra piece of code to the HTML code that you copy from Photobucket. The code that you copy for your image is going to look something like this:

<img src="http://i813.photobucket.com/albums/zz53/mandz81/abstract_background-1-1.jpg">

To make your image into a clickable link that will open in a new window you have to add this piece of code in front of your image code:

<a href="URL of Your Site" target="_blank">

So, the entire code for your button will look like this:

<a href="URL of Your Site" target=_blank"><img src="URL of your image">

That's it, you have a fully functional blog button that you can use wherever you want to. Now you can read my other blog post, Display HTML in a Scrollable Box, so that you can display the code for your button on your blog so others can grab your button and add it to their site.

Click Here to Read Other HTML Guides I've Written for Bloggers