How to Create a Blog Button

Update - if you were attempting to make your own blog button, the HTML below has been updated & you should have no issues creating to your heart’s content!

Creating your own “button” can be an important aspect to branding and promoting your blog. A “button” is a hyperlinked image or logo that when clicked on, takes that person to your blog (typically your homepage). Buttons are a great way to cross promote, and are typically used by fellow bloggers as a way to advertise their favorite sites in a “blog roll”, or a list of other blogs they promote. It is also an easy way for your readers to promote your blog on their own websites, blogs, etc (anywhere that HTML can be added, your button can be placed). Creating one is fairly simple.

Here are a few steps to guide you, but first let’s map out the HTML with which we’ll be working. This HTML will create a “Grab My Button” image that includes the hyperlinked logo and a text box with the HTML so that others can copy and paste it as desired.

* HTML:

<a href=”http://savingsandstewardship.blogspot.com/“><img border=”0″style=”width: 125px; height: 125px;” src=”http://lh3.ggpht.com/_34kb4a3F00I/S-oEuRK3g-I/AAAAAAAAAzQ/css0BtL3jsA/s128/125%20S%26S%20Logo.jpg” /></a>

<textarea id=”code-source” style=”width: 125px; height: 75px;” name=”code-source”><br /><a href=”http://savingsandstewardship.blogspot.com/“><img border=”0″style=”width: 125px; height: 125px;” src=”http://lh3.ggpht.com/_34kb4a3F00I/S-oEuRK3g-I/AAAAAAAAAzQ/css0BtL3jsA/s128/125%20S%26S%20Logo.jpg” /></a><br /></textarea>

* Example of Finished Product:

* Easy Steps to Create Your Own Button:

1) Pick an image. You’ll need to decide on a small image that will become your logo. It is best to keep it simple and be sure to include the name of your blog so that the image itself is an advertisement. The easier to read and more unique your image, the more eye-catching it will be. If you do not have an image with text that suits this specific need, you can create your own. All of the ones that I have created, I have done “old school”, using Microsoft Word and Paint, copying & pasting, grouping, cropping, and tweaking to my liking. Whatever you do, make sure that your image is easy to read even on a small scale. Most buttons are 125 x 125 in size (though not all of them) and the HTML above is specified for this sizing. To make this easy, you can start with an Image or Text Box in Microsoft Word and set the box size to 1.25 x 1.25 – then just make your image & text fit inside that box. Be sure that when saving your image, you save it as a “picture” that ends with .jpg or .bmp (for example).

2) Create a URL for your image. Once you have your image created and saved to your computer, you’ll want to upload it to the World Wide Web so it will have an image URL (if you are choosing an image already located on the web, skip to step “g” below). If you have a Google account, or are on Blogger, this can be done easily.

a. From your Google (or Gmail) homepage, click on “more”

b. Select “Photos” from the drop-down box:

c. Click “Upload” (small button located to the top right)

d. Select an Album

e. Choose the image from your computer & start the upload

f. Scroll to find your newly uploaded image

g. Hover your curser over the image and right click on it – select “Copy Image URL” (wording will vary depending on your browser: “Copy Image Location” for FF, “Open Link” for IE – and then copy & paste the web address)

3) Paste the Image URL into BOTH of the BLUE highlighted areas in our HTML above, replacing the blue highlighted text inside the quotation marks completely.

4) Link the image to your destination page – typically this is your blog homepage, but you can link it anywhere you would like, your “About Me” page is another good option, or if you are creating a custom button for a specific purpose (a special group of posts on your blog, like “The Savings Experiment”, for example, then you can link it to that tag URL or initial post). Whatever you decide, you will need to copy the URL for your destination. To do this for your homepage, go to your homepage, highlight the URL in the web address bar on your browser, right click and “Copy”.

5) Paste the destination URL into BOTH of the GREEN highlighted areas in our HTML above, replacing the green highlighted text inside the quotation marks completely.

6) Copy the ENTIRE HTML above and paste it into an HTML box on your site – typically bloggers place the “Grab My Button” boxes in their sidebars, but you can be as creative with yours as you like!  If you have issues with it not displaying correctly, go to the “HTML view” and make sure there are not extra characters or symbols – you can go through, symbol by symbol and compare it to the HTML here to be sure.

7) VOILA! Now you can start “swapping buttons” with fellow bloggers, pasting your button into other areas around the web, and allowing others to show off how much they love your site.

Alecia blogs at Savings & Stewardship. She shares how her thrifty family of four love stretching their dollars. They feel it is their duty to be good stewards of the blessings the Lord has given them. They hope you will join them in these endeavors. She is looking forward to “stewarding” with you soon!