Lijit Search
Ad Network

<br/>
More parenting videos
Let’s Connect
Follow this blog
Proud to be a Member
Recent Comments
PostRank

Powered by Postrank
Recent Visitors
Archives
Blogger Fun

www.flickr.com

Shannanb aka Mommy Bits' Cincinnati Women Bloggers photoset

www.flickr.com

Shannanb aka Mommy Bits' Blogger Fun photoset
Meta

Tutorial: Creating Your Own Blog Button w/ Code Box

Posted on 5.17.09 at 6:53 pm

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.

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

Tell Your Friends:

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

Tags: Creating a Blog Badge, Creating a Blog Button, Creating a Blog Button with Code box

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

1.12.10 at 10:12 pm
Krista comments:

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
1.14.10 at 6:39 pm
Reagan Kaufman comments:

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
1.18.10 at 3:55 pm
hollywood housewife comments:

Thank you so much for this! Best tutorial I found, and I’ve been trying to do this for awhile.
1.18.10 at 5:21 pm
Jenny Yarbrough comments:

Just used your tutorial… Thank you!!!!!
Jenny Yarbrough´s last blog ..SIDAC, new and improved!
1.20.10 at 8:50 pm
Ashley comments:

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!
1.20.10 at 10:07 pm
Mama Laundry comments:

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
1.20.10 at 11:17 pm
Gena comments:

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!
1.22.10 at 7:41 pm
Java comments:

It Worked!!! Thank you so very much for your help!!
Java´s last blog ..Amish Pot Pie Soup!! Fill Your Tummy Friday!!
1.24.10 at 1:44 am
Karen Keith comments:

Thank you so much! I never could have done it without you!
1.25.10 at 1:46 am
Adventure Mom Janna comments:

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!
1.25.10 at 10:00 pm
Stephanie comments:

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!
1.26.10 at 7:14 pm
adrian comments:

My picture wont show up. any suggestions?
1.27.10 at 3:01 am
Lindsay comments:

Wow! Thank you so much! I feel so technologically savvy now.
Lindsay´s last blog ..The Poo Poo Chronicles
1.31.10 at 2:33 am
Adventure Mom Janna comments:

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.
1.31.10 at 9:48 pm
mindy comments:

Wonderful tutorial! I was able to follow it with ease. Thank you so very much!!
mindy´s last blog ..PAY IT FORWARD
2.2.10 at 4:55 pm
Katie comments:

This was a very helpful post! Thanks so much!
Katie´s last blog ..2 daddies and 1 mommy
2.2.10 at 6:39 pm
Kim Wolf comments:

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…
2.2.10 at 10:48 pm
Jamie Collins comments:

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
2.3.10 at 5:12 pm
Kim Wolf comments:

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…
2.5.10 at 11:31 am
aimee comments:

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!
2.5.10 at 3:10 pm
Rachel comments:

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…
2.5.10 at 7:30 pm
Shannanb aka Mommy Bits comments:

So glad this is working for everyone!

Rachel – I will investigate and see what I come up with.
2.6.10 at 3:58 pm
MageeBaby comments:

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!
2.8.10 at 12:52 am
Carrie comments:

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!
2.8.10 at 7:01 pm
penney comments:

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
2.10.10 at 2:10 pm
MandyP comments:

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
2.10.10 at 3:34 pm
Tina comments:

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
2.17.10 at 7:17 pm
Adhis comments:

what program do you recommend for creating an image in the first place? I have microsoft 7, and my images are lacking.
2.21.10 at 8:23 pm
LaVonne comments:

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!
2.28.10 at 12:37 am
Tiffanie comments:

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
3.2.10 at 9:38 pm
Noelle Olpin comments:

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!!
3.3.10 at 6:59 pm
Brittany comments:

You rock! Thank you sooo much, your explanation is the best I have found.
3.8.10 at 1:31 pm
Danica comments:

Thank You so much for your kind help and helping me finally understand how to do this ..
Love your blog
XO
Danica
3.10.10 at 1:01 am
Gina comments:

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
3.10.10 at 1:38 am
Adriane comments:

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.
3.20.10 at 5:56 am
Julie ~ jbulie's blog comments:

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.
3.29.10 at 5:16 am
Laura comments:

Awesome tutorial! Thank you!
3.30.10 at 9:41 pm
Erica comments:

Hey thanks so much this helped me a lot I was trying forever!
4.7.10 at 12:33 pm
SomeGirl comments:

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
5.18.10 at 8:14 pm
Lynn @ theVintage Nest comments:

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
5.21.10 at 4:23 am
Pam @ Sallygoodin comments:

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
5.21.10 at 2:48 pm
Amanda comments:

Thank you, thank you, thank you!! I would never have figured that out without your help.
Amanda´s last blog ..My very own button!
5.23.10 at 4:30 pm
Ahuva comments:

Thanks for your tutorial.
Ahuva
6.3.10 at 12:26 am
Katie comments:

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
6.11.10 at 2:58 pm
Teresa comments:

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
6.12.10 at 10:54 pm
Sylvia comments:

Oh. My. Stars!!! You ROCK!! The hardest part was choosing graphic and personalizing it. Awesome tutorial. Thank you Thank you Thank you!!
6.13.10 at 11:25 pm
Honey comments:

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)
6.24.10 at 6:50 am
Stacey comments:

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!
6.26.10 at 3:22 pm
Dolly comments:

Thank you!!!! I cannot believe I finally figured this whole process out:) It’s a miracle-♥
Dolly´s last blog ..Dinosaur Day
6.27.10 at 3:39 pm
Ms EM comments:

This work very well, thanks for the instructions!
7.2.10 at 11:22 pm
Cathe Holdenc comments:

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
7.12.10 at 12:22 pm
Lisa comments:

Thank you so much, I’ve been at for months. Luv Tons
7.13.10 at 4:24 pm
Sarah K comments:

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
7.14.10 at 11:29 pm
Crunchy Beach Mama :) comments:

Thank you! Slowly getting my new blog together and this really helped
7.16.10 at 3:32 pm
Keisha - Cupcake Wishes & Birthday Dreams comments:

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!
7.19.10 at 6:01 pm
pink mini fridge comments:

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.20.10 at 1:21 am
ldvinyl comments:

Thanks so much. Been looking for this for quite some time. Thanks for the easy tutorial!! ldvinyl.blogspot.com
7.21.10 at 1:16 pm
Alycia Wicker comments:

Thanks for that tutorial! Very helpful and clear.
7.28.10 at 4:41 pm
JamericanSpice comments:

Thank you very much for this!

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