Thursday Review—The Easy Way to Make a Blog Button for Your Site

Today I'd like to share a fun addition to your blog. Besides being cool, it's also a great way to let others advertise your site for you. Where does the fun begin?


With a Blog Button, of course!


This is mine. (You can also see it in the sidebar on the left) 

<div align="center"><a href="http://www.thewriteconversation.blogspot.com" title="The Write Conversation"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEDDM3tuccS5XAHsDDK0ttFRQW_DelwpSwptZDe3VXqjJdj1D5FbMbFnIKDwrDozpybvj3K61U3HjwOuu81YlS1K2cI8tJ8f8BCSwEREJdEOwlcDE901XQj6TOaqGt0y1pSWUI9A9JSqSW/s1600/IMG_0725.JPG" alt="The Write Conversation" style="border:none;" /></a></div>

The key to a blog button is to have the code listed so someone else can copy it and add it to their site. Although you do have to generate a little bit of HTML code, it's not as hard as you may think.

• The first thing you'll need is an image that represents you or your blog. This image needs to be fairly small, so it can fit on a sidebar. Once you have your picture picked out, use your photo program (I used my Microsoft Office Picture Manager, but you can also use iPhoto for Apple) to resize it. Mine is resized to about 160 x 147 pixels. This is the email - small predefined selection in my program.

• Once you have the image resized, you'll also need this picture to hosted somewhere on the Internet so others can access it. Don't panic, this isn't hard, I'll walk you through it. 

If you have a WordPress, Typepad or Blogger site, go into the compose window and paste the picture in there. Then save the post as a DRAFT. Don't publish it and don't accidentally erase it or you button won't work. I titled mine Blog Button pics to help me remember. Minimize this window because you'll be returning to it in a moment.


Now open a blank document  and copy the following code into it.
*Special Note: Because this is live HTML code, I had to use a jpeg of the text, instead of typing it into this document.

Once you have it copied into your blank document—no need to highlight the text, I did that just so you would know what parts to change—you'll need to customize it for your site. 

• First replace all the Blue highlighted text with the Title of your blog (mine says The Write Conversation).

• Next replace the Pink highlighted text with the EXACT URL of your blog. The best way to get this is to open a window and go to the main page of your blog. Copy the URL and paste it into your code document in place of what's there.

• Now you need to go back to the draft post where you pasted your image. Change the draft mode to HTML and copy the address of the picture. It's easy to find, it begins with HTTP and ends with JPEG. Once you have that copied you'll need to paste it into TWO places in your code document. You'll want to replace the text highlighted in Yellow. 

• Finally you need to check your code. Each of the replacements you made should be INSIDE quotation marks. Once you've checked everything, your code should be complete and ready to copy and paste into your sidebar using the HTML gadget (or widget).

Now I'd like for you to check back in after you generate a button of your own. Please leave a comment and I'll visit your blog and collect your button. I'll put everyone's buttons in a special list on my sidebar for others to see.


Also be sure to leave any questions you have and I'll do my best to answer them.


Don't forget to join the conversation!
Blessings,
Edie