17 May 2009 ~ 118 Comments

Tutorial: Creating Your Own Blog Button w/ Code Box

Technology Uncategorized

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

Print Friendly
    If you enjoyed this post, make sure you subscribe to my RSS feed!

    Related posts:

    1. Technology Tip: Adding a Print Button to Blog Posts
    2. Tyler at Pachinko.. AGAIN
    3. How Does A ‘Brady’saur Read A Book?
    4. The World Around Us
    Tags: , ,

    118 Responses to “Tutorial: Creating Your Own Blog Button w/ Code Box”

    1. Krista 12 January 2010 at 10:12 pm Permalink

      I’ve been trying for awhile now to create a button for my blog. I’ve been unsuccessful until I read and followed your tutorial! Thank you so much for the help! (I hope I did it right and people can grab it!)
      .-= Krista´s last blog ..Artsy Fartsy Christmas Pictures =-.

    2. Reagan Kaufman 14 January 2010 at 6:39 pm Permalink

      Thank you for this tutorial. I’m very new to this and not very tech-savvy and this was by the far most helpful button tutorial I found. And the proof is in the button–It’s on my page. Hip, Hip, Hooray!

      And thank you.
      .-= Reagan Kaufman´s last blog ..Rilda’s Kickin’ Chicken Corn Chowder =-.

    3. hollywood housewife 18 January 2010 at 3:55 pm Permalink

      Thank you so much for this! Best tutorial I found, and I’ve been trying to do this for awhile.

    4. Jenny Yarbrough 18 January 2010 at 5:21 pm Permalink

      Just used your tutorial… Thank you!!!!!
      .-= Jenny Yarbrough´s last blog ..SIDAC, new and improved! =-.

    5. Ashley 20 January 2010 at 8:50 pm Permalink

      Thanks for this tutorial! This made making a button and linking it correctly SO easy!! I only wish I had found it sooner before MANY unsuccessful attempts!

    6. Mama Laundry 20 January 2010 at 10:07 pm Permalink

      This is absolutely fabulous! I can’t thank you enough!

      I’ve searched several times for a good tutorial on this, and now I’ve found it.

      -Lauren

    7. Gena 20 January 2010 at 11:17 pm Permalink

      I had this one figured out but if you ever want to do a tutorial on how to number your comments, I’m all over it!
      Thanks!

    8. Java 22 January 2010 at 7:41 pm Permalink

      It Worked!!! Thank you so very much for your help!!
      .-= Java´s last blog ..Amish Pot Pie Soup!! Fill Your Tummy Friday!! =-.

    9. Karen Keith 24 January 2010 at 1:44 am Permalink

      Thank you so much! I never could have done it without you!

    10. Adventure Mom Janna 25 January 2010 at 1:46 am Permalink

      You are awesome!

      This made things so easy! I am still in shock at how easy and how well you explained the process.

      Do you have any other fabulous tutorials that I should know about?

      Seriously, you made my day and saved me $. Have a great day in Cincinnati!

    11. Stephanie 25 January 2010 at 10:00 pm Permalink

      Thank you! It took me forever to figure out how to do this before finding your blog. I really appreciate how clear your directions were. Thanks again!

    12. adrian 26 January 2010 at 7:14 pm Permalink

      My picture wont show up. any suggestions?

    13. Lindsay 27 January 2010 at 3:01 am Permalink

      Wow! Thank you so much! I feel so technologically savvy now. :)
      .-= Lindsay´s last blog ..The Poo Poo Chronicles =-.

    14. Adventure Mom Janna 31 January 2010 at 2:33 am Permalink

      Shannon,

      I’m getting this error code when I click on my button

      Safari can’t open the page “http://www.theadventureofmotherhood.blogspot.xn--com%20target=-3j3f”. The error is: “The URL can’t be shown” (WebKitErrorDomain:101) Please choose Safari > Report Bugs to Apple, note the error number, and describe what you did before you saw this message.

      Any tips on what I need to do differently?

      Thank you.

    15. mindy 31 January 2010 at 9:48 pm Permalink

      Wonderful tutorial! I was able to follow it with ease. Thank you so very much!!
      .-= mindy´s last blog ..PAY IT FORWARD =-.

    16. Katie 2 February 2010 at 4:55 pm Permalink

      This was a very helpful post! Thanks so much!
      .-= Katie´s last blog ..2 daddies and 1 mommy =-.

    17. Kim Wolf 2 February 2010 at 6:39 pm Permalink

      Thank you, thank you, thank you! I FINALLY have a button on my blog!

      Blessings from Miami County, Kim Wolf<
      .-= Kim Wolf´s last blog ..Hammered Dulcimer Demo Time… =-.

    18. Jamie Collins 2 February 2010 at 10:48 pm Permalink

      Thank You! This was a great post. The directions were easy to follow and now I have a new badge on my blog!

      Thanks for taking the time to post! – Jamie
      .-= Jamie Collins´s last blog ..Visit Disney World Parks At Opening To Beat The Crowds =-.

    19. Kim Wolf 3 February 2010 at 5:12 pm Permalink

      I’m wondering…my button came out really big, do you know of any way to make it smaller?

      Blessings, Kim<
      .-= Kim Wolf´s last blog ..Hammered Dulcimer Demo Time… =-.

    20. aimee 5 February 2010 at 11:31 am Permalink

      Thank you so much for showing me how to do this!! I just created a badge and I’m very, very excited. Again, thank you!

    21. Rachel 5 February 2010 at 3:10 pm Permalink

      Great tips! Does anyone know where to find some cute, free clip art I could use to make my button?
      .-= Rachel´s last blog ..I’m Lost… =-.

    22. Shannanb aka Mommy Bits 5 February 2010 at 7:30 pm Permalink

      So glad this is working for everyone!

      Rachel – I will investigate and see what I come up with.

    23. MageeBaby 6 February 2010 at 3:58 pm Permalink

      arrrgh! Me no smart with html!!! ugh. Must smack computer. Please help! :)

      (I can’t get it to work arrgh)
      .-= MageeBaby´s last blog ..Get my Button! =-.

    24. Carrie 8 February 2010 at 12:52 am Permalink

      This was awesome. Thanks so, so much for providing such an easy-to-follow (dare I say FOOLPROOF, if I could do it?!) tutorial.
      .-= Carrie´s last blog ..Introducing… The Stork Report! =-.

    25. penney 8 February 2010 at 7:01 pm Permalink

      Dude, you totally rocked my socks! Thanks a billion. I was lusting over these blog buttons, and with a quick google search I found YOU!

      Come and visit to see what you made happen…

      travelbunny.blogspot.com

    26. MandyP 10 February 2010 at 2:10 pm Permalink

      You are amazing! This certainly is a labor of love–creating a badge–but I am SO pleased with how it turned out!!! Thank you!!!!!!!!! =)
      .-= MandyP´s last blog ..Things I just don’t understand =-.

    27. Tina 10 February 2010 at 3:34 pm Permalink

      Hi! I really am enjoying this tutorial, but I am having some trouble seeing my text on the Button I created. Can you provide some troubleshooting?
      .-= Tina´s last undefined ..If you register your site for free at =-.

    28. Adhis 17 February 2010 at 7:17 pm Permalink

      what program do you recommend for creating an image in the first place? I have microsoft 7, and my images are lacking.

    29. LaVonne 21 February 2010 at 8:23 pm Permalink

      I did a google search about creating your own blog button, found your site and I am so happy. I was able to make a blog button in 10 minutes. Thank you Thank you Thank you! ;)

    30. Tiffanie 28 February 2010 at 12:37 am Permalink

      Thank you, thank you, thank you. I have been trying to do this for the last couple of days and was having a really hard time until i found you.
      thanks again

    31. Noelle Olpin 2 March 2010 at 9:38 pm Permalink

      I cannot thank you enough. After scouring the Internet for some useful info on how to make code boxes I finally found you! Worked beautifully & easily. One question- how do I change the size of the box? I tried changing the columns and rows but nothing happened. Is the size of the box set by the “wrap” or “virtual” part?
      Thanks a million!!

    32. Brittany 3 March 2010 at 6:59 pm Permalink

      You rock! Thank you sooo much, your explanation is the best I have found.

    33. Danica 8 March 2010 at 1:31 pm Permalink

      Thank You so much for your kind help and helping me finally understand how to do this ..
      Love your blog
      XO
      Danica

    34. Gina 10 March 2010 at 1:01 am Permalink

      Okay, I think I’m the only ding dong that can’t do this. I did everything you said, but the pic doesn’t come up. I’m using Blogger. I pasted the code into the HTML box gadget thing, but I only get the code and no pic. What am I doing wrong?
      .-= Gina´s last blog ..Over $11 In Coupons From Nestle =-.

    35. Adriane 10 March 2010 at 1:38 am Permalink

      Thank you, thank you, so much for this tutorial. It’s the best one I have found. I have attempted to do this before but to no avail.

    36. Julie ~ jbulie's blog 20 March 2010 at 5:56 am Permalink

      Awesome tutorial. Can’t wait to make it work on my site. I just started blogging four months ago on a wordpress.com blog. There are a couple of things I cannot put up on my blog for the life of me like you said, the code in the button box. What would you suggest? What’s my next step? Do I need to get hosted on another server or something like that? I’d appreciate any help. I also wanted to put up commentluv, but can’t do that either on wordpress.com. I’ll get things sorted soon enough hopefully.

      Thanks.

      Julie
      .-= Julie ~ jbulie’s blog´s last blog ..jbulie’s blog ~ I ♥ my readers giveaway contest. Enter by March 24th to win. =-.

    37. Laura 29 March 2010 at 5:16 am Permalink

      Awesome tutorial! Thank you!

    38. Erica 30 March 2010 at 9:41 pm Permalink

      Hey thanks so much this helped me a lot I was trying forever!

    39. SomeGirl 7 April 2010 at 12:33 pm Permalink

      Thank you!!!! That was an easy to follow tutorial! It worked the first time and now I have a button with code box, thanks to you!!! ♥ Michelle
      .-= SomeGirl´s last blog ..Where There Are No Oxen =-.

    40. Lynn @ theVintage Nest 18 May 2010 at 8:14 pm Permalink

      I was blog hopping this morning and ended up here at your wonderful blog and so glad I did. Your button toot was so easy. I did it in just a few minutes. Thank you…thank you. Come for a visit. :) Miles of Smiles ~ Lynn

    41. Pam @ Sallygoodin 21 May 2010 at 4:23 am Permalink

      OMGosh! THANK YOU! Your post was a life saver! Easy to understand even for a non techie like me. Pam
      .-= Pam @ Sallygoodin´s last blog ..Custom Lamp Shade On the Cheap =-.

    42. Amanda 21 May 2010 at 2:48 pm Permalink

      Thank you, thank you, thank you!! I would never have figured that out without your help.
      .-= Amanda´s last blog ..My very own button! =-.

    43. Ahuva 23 May 2010 at 4:30 pm Permalink

      Thanks for your tutorial.
      Ahuva

    44. Katie 3 June 2010 at 12:26 am Permalink

      I am trying to do some food blogging and wanted to make a button, I never could have done it without this tutorial! Thank you!
      .-= Katie´s last blog ..The Chilean Completo =-.

    45. Teresa 11 June 2010 at 2:58 pm Permalink

      After trying 5 other tutorials unsuccessfully I found yours and created my button with ease. Thank You!! I will be telling all of my blogger friends:)
      .-= Teresa´s last blog ..Wrigley’s =-.

    46. Sylvia 12 June 2010 at 10:54 pm Permalink

      Oh. My. Stars!!! You ROCK!! The hardest part was choosing graphic and personalizing it. Awesome tutorial. Thank you Thank you Thank you!!

    47. Honey 13 June 2010 at 11:25 pm Permalink

      Thanks for the blog button tut! I’m a Middletown mama

      http://mondorfment.blogspot.com/2010/06/say-no-to-blogiarism-blog-plagiarism.html
      .-= Honey´s last blog ..Say No to Blogiarism (…blog plagiarism) =-.

    48. Stacey 24 June 2010 at 6:50 am Permalink

      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!

    49. Dolly 26 June 2010 at 3:22 pm Permalink

      Thank you!!!! I cannot believe I finally figured this whole process out:) It’s a miracle-♥
      .-= Dolly´s last blog ..Dinosaur Day =-.

    50. Ms EM 27 June 2010 at 3:39 pm Permalink

      This work very well, thanks for the instructions!

    Newer Comments »

    Leave a Reply

    CommentLuv badge