Creating a Blog Badge | {Mommy Bits}

Have you ever been on a blog and noticed the various blogger buttons promoting the blogs they read? Some of the ones you may have seen around town include “I support the Streetcar” and “My friends are Losers – Cincinnati Losers. “Well today I’m sharing with you the steps you need to create your own blog badge/button as well as those involved in creating a code box that will allow others to grab your badge/button and display it on their blog!

So here we go. If you end up creating a badge, let us know in the comments so we can check it out!

NOTE: If you use WordPress.com, you will not be able to display the codebox. WordPress.com does not recognize the code! To get around this I recommend doing a blog post announcing your new badge and providing the code to your readers that way. Then you could create a widget on your sidebar, linking to that post.

Step 1. Create the code for your blog button/badge (125×125; 72dpi):

1. Selected image and uploaded it to Photobucket or another image hosting service.

2. Copy the HTML code that appears below the image and paste it into a blank Word document.

3. Replaced the RED text below with the URL of your blog. (Where people will go when they click on the button)

BEFORE:
<a href=”http://s80.photobucket.com/albums/j181/sd_boyer/?action=view&current=CWBBadgeFinal.jpg” target=”_blank”><img src=”http://i80.photobucket.com/albums/j181/sd_boyer/CWBBadgeFinal.jpg” border=”0″ alt=”Photobucket”></a>

AFTER:
<a href=”http://www.cincinnatiwomenbloggers.com” target=”_blank”><img src=”http://i80.photobucket.com/albums/j181/sd_boyer/CWBBadgeFinal.jpg” border=”0″ alt=”Photobucket”></a>

4. Next, replace the RED text below with the name of your blog. (This will create the text people see when they “mouse” over your button/badge.)

BEFORE:
<a href=”http://www.cincinnatiwomenbloggers.com” target=”_blank”><img src=”http://i80.photobucket.com/albums/j181/sd_boyer/CWBBadgeFinal.jpg” border=”0″ alt=”Photobucket“></a>

Step 2. Creating the code box so readers can grab your button:

1. Copy and paste this HTML code into another section of your Word doc.

<textarea cols=”15″ rows=”4″ wrap=”VIRTUAL”>YOUR BUTTONCODE HERE</textarea>

2. Paste the code you created for your button in step 1 in the highlighted section below.

BEFORE:
<textarea cols=”15″ rows=”4″ wrap=”VIRTUAL”>YOUR BUTTONCODE HERE</textarea>

AFTER:
<textarea cols=”15″ rows=”4″ wrap=”VIRTUAL”><a href=”http://www.cincinnatiwomenbloggers.com” target=”_blank”><img src=”http://i80.photobucket.com/albums/j181/sd_boyer/CWBBadgeFinal.jpg” border=”0″ alt=”Cincinnati Women Bloggers”></a></textarea>

3. Creating your blog button/code box tool HTML for your site:

1. Copy and paste the blog button code you created in step 1 above the code you created for your code box in Step 2:

2. Finally, copy and paste the code into your HTML widget. It should look like this:

That’s it! It’s that easy (it takes a little time, but it really is easy).

If you’d like to add the Cincinnati Women Bloggers badge to your site, Simply cut and paste the code below (We are a WordPress.com site…..).

PS. If you have any problems creating your badge or code, feel free to shoot me an email at Shannanb(@)gmail.com — Shannan

PLEASE NOTE: PhotoBucket is having major issues this week and you may have to try a few times to add the code to your blog. You may see an X or even a image has been removed. This is not true! I used the code on Monday, May 18th to add the badge to my personal blog and it worked. I am sorry for the issue. I am chatting daily with PhotoBucket about the issue. Shannan

{Mommy Bits}

Documenting Life in the Testosterone-Filled Jungle I Call Home

Tag Archives: Creating a Blog Badge

Tutorial: Creating Your Own Blog Button w/ Code Box

Step 1. Create the code for your blog button/badge (125×125; 72dpi):

Step 2. Creating the code box so readers can grab your button:

3. Creating your blog button/code box tool HTML for your site: