How to Create a Blog Button in WordPress

IMPORTANT UPDATE!

For whatever reason, WordPress automatically changes every quotation mark to a fancy quotation mark or a “smart” quote.  Those don’t work in code.  Be sure to change he fancy quotation marks to plain old quotation marks before copying and pasting your code into a widget, page, post, or whatever.  You can even do a simple find and replace in NOTEPAD that will accomplish this.  Good luck.

Here are seven easy steps to creating your own blog button in WordPress.  Hopefully, you will find this helpful.

1. First, you need to create an image file and that means you need a graphics editing program. You can use Photoshop, Fireworks, or Paintshop if you have them. Or, you can try a freeware version of GIMP which you can download from here and which works much like Adobe Photoshop if you don’t have your own graphics editing program.

2. You need to limit the color pallet as much as possible. This will make your button load faster via the web. Try to stick with “web safe” colors in your graphics editing program.

3. You need to limit the size of your button. Most buttons are 125 pixels x 125 pixels square. Some are 150 x 150 square. The 125 x 125 is the best size because that fits most blog sidebars and works instantly with most “ad” tools if someone wants to put your button on a scrolling banner or whatever.

4. Save your image to your hard drive.

5. Now, upload your image from your hard drive to your website. I would not recommend uploading it to Picasa, Flicker, or Photobucket because doing so will consume bandwidth. You can post it to your own blog website by posting it in a post, or on a page on your blog; or by uploading a new media file. If you are savvy, you can use FTP to put it in any of your content folders you choose. A good freeware FTP application is Filezilla which you can download from here and you will need to get an FTP account and the ftp information from your ISP.

The important thing is that you will need the URL of where the file is uploaded.

6. Time to create the code. You need to know 5 things.

A) Your Website URL

B) Text Message in case the Image doesn’t load

C) Mouseover Message

D) URL to your button image file

E) How many rows tall you want your code box to be

NOTE: This assumes that your button is 125 x 125 pixels. If it isn’t then change the 125 to whatever the actual pixels are to avoid distorting your button.

7. Replace items “A” through “E” above into the code. Make absolutely certain you don’t delete any quotation marks or greater than or less than symbols.

Here are our values on this website:

A) http://www.halleethehomemaker.com/

B) Hallee the Homemaker Blog

C) Hallee the Homemaker

D) http://www.halleethehomemaker.com/wp-content/uploads/images/HalleeButton5-bev.jpg

E) 4

And here is the button code for the Hallee the Homemaker blog button:

8. Create a test page or test post for your button code. Select the HTML tab. Copy and paste the code into it. Now look at it in Visual and see how it looks. Change the values around if you like to see if adding more or less rows gives you the look you want and so on. Once you have it perfected, copy and paste the code into a text widget and you are all done.

*

<center><a href=”http://www.halleethehomemaker.com/” mce_href=”http://www.halleethehomemaker.com/” target=”_blank”><br /> <img alt=”Hallee the Homemaker Blog” title=”Hallee the Homemaker” src=”http://www.halleethehomemaker.com/wp-content/uploads/images/HalleeButton5-bev.jpg” mce_src=”http://www.halleethehomemaker.com/wp-content/uploads/images/HalleeButton5-bev.jpg” style=”border: 0px solid ; width: 125px; height: 125px;” align=”middle” hspace=”0″ vspace=”0″></a></center>

Hope this helps.

God Bless,

Gregg