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.
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¤t=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:
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
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) =-.
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!
Thank you!!!! I cannot believe I finally figured this whole process out:) It’s a miracle-♥
.-= Dolly´s last blog ..Dinosaur Day =-.
This work very well, thanks for the instructions!
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 =-.
Thank you so much, I’ve been at for months. Luv Tons
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 =-.
Thank you! Slowly getting my new blog together and this really helped
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!
woow good tutorial..
i think i must try this tutorial for my blog
.-= pink mini fridge´s last blog ..Pink Mini Fridge Buyers Guide =-.
Thanks so much. Been looking for this for quite some time. Thanks for the easy tutorial!! ldvinyl.blogspot.com
Thanks for that tutorial! Very helpful and clear.
Thank you very much for this!
Aloha!
.-= JamericanSpice´s last blog ..Its All About The Benjamins! – WW =-.
WOW! Thank you so very, very much!!
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 =-.
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 =-.
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 =-.
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 =-.
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
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
Thank you, thank you, thank you!
Great step by step instructions!
.-= Becky´s last blog ..Reserve Your Spot Today – Design Event =-.
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 =-.
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 =-.
Thank you!!! Such an easy step-by-step tutorial…it seemed so difficult until I ran across you site.
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 =-.
Thanks so much for such an easy tutorial. It worked great!
Great tutorial. I just successfully posted my blog button using Photobucket. Thanks!
thank you this is a great tutorial!
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 =-.
This was wonderful! Thank you so much!!
Thank you so much, this is the only tutorial I could get to work for me! : )
.-= Kim V´s last blog .. =-.
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/
YAY!!! With your help I was successful in creating my first ever badge!! Thanks so much for such an easy to follow tutorial!
i use lamp shades with CFL ubls instead of incandescent lamps, they are much cooler and uses less electricity ~,;
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 =-.
Thank you so much!!! I finally got my button up and running…your tutorial is great!
itssewfun-julie.blogspot.com
couldn’t have done this without your help! thanks so much for the tutorial!
Thank you, I have to admit I was doubtful as I went…but it worked!
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.
Thank you so much for this tutorial!! I’ve tried several, and this is the first one that has worked!
what a wonderful post!thank you, so much for this tutorial. It’s the best one I have found. keep it up!
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!
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!
Thank you for helping me make a button.
Following you, stumbled in here by accident, lucky me. Love your blog and will be back.
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!
This is awesome! Thank you so much!
I refer to this all the time, and just linked to you on my blog. This is such a super tutorial- thank you!
C:)
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
Thank you so much for this. With other tutorials I couldn’t get the scroll box to work, but yours worked perfectly. Thanks!!!