17 May 2009 ~ 117 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: , ,

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

    1. Mel the Crafty Scientist 9 June 2011 at 5:17 pm Permalink

      Thanks so much for such an awesome tutorial! I’m sad I didn’t find it when I was making my buttons, but I included it in my little roundup of tutorials for making blog buttons here: http://www.thecraftyscientist.com/2011/06/roundup-blogging-resources-blog-buttons.html. Check it out if you want and thanks for posting such helpful stuff! : )
      Mel the Crafty Scientist´s last [type] ..Roundup- Blogging Resources – Blog Buttons!

    2. Jessica 9 July 2011 at 4:51 pm Permalink

      Thanks so much! I am glad I found this. I made my button and I am happy. Thanks for doing this to help us not so creative cookies out there.

    3. Lynn @thevintagenest 3 August 2011 at 11:09 am Permalink

      thank you soooooo much. This was the easiest tute around. xo

    4. James @Cheap Grow Lights 6 August 2011 at 11:57 am Permalink

      thank you for posting this kind of article. Now, a simple home mom cam make their on blog with the use of the different photos of their baby.

    5. Taryn 17 August 2011 at 10:18 am Permalink

      Thanks so much for the tutorial! I searched several different tutorials for the right code and yours was the first and only one that worked!

      PS – We have a few things in common…I’m a mom of boys AND I grew up in the Cincy area (NKY). We’ve since moved to Texas, but when I came across your blog, I loved seeing things I recognized!

      :)

    6. Babita 22 August 2011 at 3:16 am Permalink

      Thanks for the tutorial,Shannon..I’m a newbie here and I’m technically challenged ..This is a great post for beginners nad do you mind if I put a link of this on my blog? have no idea how to link this but I will copy paste ur link to my tab-helpful links.
      Do drop by and say hi..its a craft blog.

      big Blog Hugs,
      Babita.

    7. Alvin 14 September 2011 at 11:55 am Permalink

      That it is actually a nice and very helpful part of details. I’m glad that you just shared this valuable details along with us. Be sure to keep informed similar to this. Thank you for sharing.

    8. CJ 22 September 2011 at 5:41 pm Permalink

      Awesome tutorial! Just finished making my button for my blog cjandaj.blogspot.com!

      Thanks!

    9. Staci 11 October 2011 at 2:43 am Permalink

      Hello,

      I googled how to add the “html” link to my button. I came across your website. I have been trying to add this code for hours. I’m not sure what I am doing wrong but I cannot get it to work. I wondered if you would be able to help me, your instructions seem simple enough so I’m not sure where I am messing up.

      Thanks so much!

      Staci

    10. DeSire 15 October 2011 at 5:47 pm Permalink

      Thank you so much for this!!! I’ve been googling for days trying to find a user friendly generator, or simply instructions. Yours were by far the best!! Thanks again :)

      My button!!

    11. Trina 16 January 2012 at 12:55 am Permalink

      Your tutorial rocks!!!!!!!!!!!! I have wanted to figure this out for so long and this worked and was easier than I thought! THANK YOU!

    « Older Comments

    Leave a Reply

    CommentLuv badge