Tutorial: Creating Your Own Blog Button w/ Code Box

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.

CWB BadgeFinal

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

Badge Code

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>

AFTER:
<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>

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:

<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 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>

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

Final Blog Badge

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…..).

<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>

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


119 thoughts on “Tutorial: Creating Your Own Blog Button w/ Code Box

  1. Thank you so much!!! I have been trying to add a button for ages, but every tutorial I tried went wrong somewhere down the line. Yours worked a charm! Thank you!

  2. Thanks so much. Been looking for this for quite some time. Thanks for the easy tutorial!! ldvinyl.blogspot.com

  3. I made the buttons and they are just adorable. Thanks for that…But, when I or someone else clicks it, it takes us to flicker (where I created it) not to my blog. Any ideas on how to fix this? Thanks!
    .-= Marty Vogel´s last blog ..Furry Friends Friday =-.

  4. Hi Shannan! I don’t meet other Shans very often. LOL So, nice to meet ya!

    I was looking for a tutorial exactly like this, so I was lucky to find yours so easily. I think it was about the 3rd one down on my search page. :-) Thank you so much for providing this!

    Have a great day!
    Shannon in WV
    .-= Shannon´s last blog ..Wordless Wednesday Aug 11 2010 =-.

  5. Thank you so much for this tutorial. I had everything but how to create the code box. I stayed up until 3:30 a.m. trying to fix this on my blog. Someone pointed me to your post and it was a great help. Please feel free to check it out.
    .-= Dorlita Jones´s last blog ..My Hubby’s Support =-.

  6. Thank you! Thank you! Thank you! I tried around five different sites trying to ‘help’ me make a button for my blog and shop. This tutorial was the only one that I could understand and follow!!!! THANK YOU!!!
    .-= Robin A´s last blog ..Wednesday SHOP Update =-.

  7. Thank you so much! I was following another tutorial, but it isn’t working anymore for me. I was able to create the grab box and display the button using your tutorial with no problem at all.

  8. Thank you, than you, thank you! I have been wanting to make a button for a while but all the instructions I kept finding were so complicated and I am a SAHM of two very active toddlers and didnt have time to through all that stuff other websites told me to do. Your instructions are simple I created one in less then 15 minutes! Thank you so much! I linked this on my blog so that everyone else can use your instructions!

  9. Great post! I was able to create the grab box and display the button using your tutorial with no problem at all.thanks for sharing!

  10. I can’t seem to get it to work right… I’m not sure what I did wrong… but when you click on the button…it says the page is not found?? but then you can click on my blog name on the error page and it will take you to my blog homepage… I’m confused, do you have any advice? Thanks,
    KT

  11. Thank you so much for this. With other tutorials I couldn’t get the scroll box to work, but yours worked perfectly. Thanks!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>