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. Cathe Holdenc 2 July 2010 at 11:22 pm Permalink

      Thank you a million times over!! I have had a button like this before but always when someone else created it for me. I wanted so desperately to learn to do this myself. You are a superstar!!
      .-= Cathe Holdenc´s last blog ..Decal Penny Pendants- Group Project =-.

    2. Lisa 12 July 2010 at 12:22 pm Permalink

      Thank you so much, I’ve been at for months. Luv Tons

    3. Sarah K 13 July 2010 at 4:24 pm Permalink

      Awesome! Just followed your tutorial to make my blog button and it worked perfectly! Can’t thank you enough.
      .-= Sarah K´s last blog ..Project Life Tuesday – July Week Two =-.

    4. Crunchy Beach Mama :) 14 July 2010 at 11:29 pm Permalink

      Thank you! Slowly getting my new blog together and this really helped :)

    5. Keisha - Cupcake Wishes & Birthday Dreams 16 July 2010 at 3:32 pm Permalink

      Thank you, thank you, thank you!!!! I’ve been trying to load a button onto my blog for days using some other tutorial – I finally gave up on that one – and your’s was next on the Google list – and it’s a gem!!!! Thanks!

    6. pink mini fridge 19 July 2010 at 6:01 pm Permalink

      woow good tutorial..

      i think i must try this tutorial for my blog :)
      .-= pink mini fridge´s last blog ..Pink Mini Fridge Buyers Guide =-.

    7. ldvinyl 20 July 2010 at 1:21 am Permalink

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

    8. Alycia Wicker 21 July 2010 at 1:16 pm Permalink

      Thanks for that tutorial! Very helpful and clear.

    9. JamericanSpice 28 July 2010 at 4:41 pm Permalink

      Thank you very much for this!

      Aloha!
      .-= JamericanSpice´s last blog ..Its All About The Benjamins! – WW =-.

    10. Amy @ MomsToolbox 30 July 2010 at 5:49 pm Permalink

      WOW! Thank you so very, very much!!

    11. Crazy Coupon Lady 30 July 2010 at 8:54 pm Permalink

      Wow thanks for the info! I got it to work for me… sort of, my button’s pretty lame. How did you make yours so cute? I am happy none the less, thanks again!
      .-= Crazy Coupon Lady´s last blog ..Free Blockbuster Express Rentals =-.

    12. Asashia 5 August 2010 at 6:32 am Permalink

      Thank you, thank you, thank you!
      I finally did it! So glad people are willing to share!
      .-= Asashia´s last blog ..In Honor of Hubby =-.

    13. Asashia 5 August 2010 at 6:32 am Permalink

      Thank you, thank you, thank you!
      I finally did it! So glad people are willing to share!
      .-= Asashia´s last blog ..In Honor of Hubby =-.

    14. Marty Vogel 7 August 2010 at 12:26 am Permalink

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

    15. Julie 9 August 2010 at 1:03 am Permalink

      All I can say is thank you so much! I’ve wanted to add a button to my blog for a long time but I thought it was too hard for someone who understands nothing about html. Thanks for taking the time to post your tutorial. I linked to you from my blog just now while introducing my new blog button! Everything looks to be working just fine :)
      http://vibrant-designs.blogspot.com/2010/08/introducing.html

    16. Kelle 29 August 2010 at 12:15 am Permalink

      Thank you I’ve been trying to figure it out by myself and it was NOT working. Your step by step instructions were such a blessing, thank you.

      Feel free to see my farm blog button at http://www.kellesneverdonefarm.blogspot.com

      Thank you again

    17. Becky 2 September 2010 at 3:28 pm Permalink

      Thank you, thank you, thank you!

      Great step by step instructions! :)
      .-= Becky´s last blog ..Reserve Your Spot Today – Design Event =-.

    18. Shannon 5 September 2010 at 10:52 pm Permalink

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

    19. Lisa Ladrido 6 September 2010 at 8:14 pm Permalink

      Thank you so much, I was working on this the whole day and couldn’t get it to work until I found you!! Now I am your newest follower!! Lisa
      .-= Lisa Ladrido´s last blog ..Back to School Tips for Parents- by Kathryn White- Author of Rubys School Walk =-.

    20. Priscilla 9 September 2010 at 4:36 am Permalink

      Thank you!!! Such an easy step-by-step tutorial…it seemed so difficult until I ran across you site. :)

    21. Nicky 14 September 2010 at 4:18 pm Permalink

      Does it matter if I want to change the size of the image… Does that affect the code you provided? Thanks,
      Nicky
      .-= Nicky ´s last blog ..Longing for some weather =-.

    22. MommyJ 18 September 2010 at 10:44 pm Permalink

      Thanks so much for such an easy tutorial. It worked great!

    23. Sandy 19 September 2010 at 11:39 am Permalink

      Great tutorial. I just successfully posted my blog button using Photobucket. Thanks!

    24. Lorajean 29 September 2010 at 5:13 pm Permalink

      thank you this is a great tutorial! :)

    25. Dorlita Jones 9 October 2010 at 12:22 pm Permalink

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

    26. Jessie 16 October 2010 at 11:32 pm Permalink

      This was wonderful! Thank you so much!! :)

    27. Kim V 20 October 2010 at 6:22 pm Permalink

      Thank you so much, this is the only tutorial I could get to work for me! : )
      .-= Kim V´s last blog .. =-.

    28. Shondra Walker 25 October 2010 at 5:46 pm Permalink

      Thank you so much for this tutorial. I’ve read other how-to guides that make absolutely no sense! Yours is perfect, concise and understandable. I will definitely recommend it to my friends.

      Here’s a link to my button-it’s in the sidebar. It’s basic for now, but I like it. :)

      http://shoni-walkwithme.blogspot.com/

    29. Thearica Burroughs 8 November 2010 at 12:49 am Permalink

      YAY!!! With your help I was successful in creating my first ever badge!! Thanks so much for such an easy to follow tutorial!

    30. Pine Cupboard %0A 16 November 2010 at 1:54 pm Permalink

      i use lamp shades with CFL ubls instead of incandescent lamps, they are much cooler and uses less electricity ~,;

    31. Robin A 26 November 2010 at 5:24 pm Permalink

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

    32. Julie 17 January 2011 at 8:54 pm Permalink

      Thank you so much!!! I finally got my button up and running…your tutorial is great!

      itssewfun-julie.blogspot.com

    33. Danielle 21 January 2011 at 5:33 pm Permalink

      couldn’t have done this without your help! thanks so much for the tutorial!

    34. Amanda 22 January 2011 at 11:43 pm Permalink

      Thank you, I have to admit I was doubtful as I went…but it worked!

    35. Emy 27 January 2011 at 5:53 pm Permalink

      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.

    36. Mo'Betta 5 February 2011 at 8:07 pm Permalink

      Thank you so much for this tutorial!! I’ve tried several, and this is the first one that has worked!
      Mo’Betta´s last [type] ..A Pleasant Surprise and Facebook Friday

    37. natalie 21 February 2011 at 10:24 pm Permalink

      what a wonderful post!thank you, so much for this tutorial. It’s the best one I have found. keep it up!

    38. stephen 25 February 2011 at 6:03 am Permalink

      Thank you so much! I was able to create the grab box and display the button using your tutorial with no problem at all.thanks for sharing!
      stephen´s last [type] ..Allen &amp Heath Releases V18 iLive Software

    39. Kayleigh Sheehy 7 March 2011 at 2:47 pm Permalink

      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!
      Kayleigh Sheehy´s last [type] ..I have a button!!!

    40. Carrie 12 March 2011 at 5:52 pm Permalink

      Thank you for helping me make a button.
      Carrie´s last [type] ..A Vigilant Muse

    41. Siv Maria 25 March 2011 at 5:40 pm Permalink

      Following you, stumbled in here by accident, lucky me. Love your blog and will be back.
      Siv Maria´s last [type] ..Adventure Friday Continued

    42. sarah 31 March 2011 at 10:10 pm Permalink

      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!

    43. Amy @ A Little Nosh 1 April 2011 at 3:36 pm Permalink

      This is awesome! Thank you so much!
      Amy @ A Little Nosh´s last [type] ..Double Doozies

    44. MBC scrapbooking 7 April 2011 at 8:15 am Permalink

      I refer to this all the time, and just linked to you on my blog. This is such a super tutorial- thank you!
      C:)
      MBC scrapbooking´s last [type] ..Best blog button tutorial ever

    45. Katie L. 7 April 2011 at 12:26 pm Permalink

      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
      Katie L.´s last [type] ..Senior in the City

    46. Gloria 19 April 2011 at 2:18 pm Permalink

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

    47. Tabitha 20 April 2011 at 6:53 pm Permalink

      Thanks a bunch for this tutorial! I used it today to add a button code box to my blog and then blogged about it, linking your tut. It’s here if you want to check it out: http://happycakecrafts.blogspot.com/2011/04/new-button-header.html
      Have a great day! :-)
      Tabitha´s last [type] ..New button &amp header!

    48. Sarah from practicalpraise.blogspot.com 13 May 2011 at 8:39 pm Permalink

      I have got to say, Thank you!!!! I am so pleased with myself right now! :) Thanks for the easy tutorial!

    49. Steven@ Stink Bugs 24 May 2011 at 4:52 pm Permalink

      Thank you for the easy tutorial! You should show us some more trick like this, I feel like if you did my blog would look like a professional designed it haha.

    50. Q 27 May 2011 at 9:13 am Permalink

      The coding part of this tutorial is the best I’ve found, thank you so much!

    « Older Comments
    Newer Comments »

    Leave a Reply

    CommentLuv badge