As a new blogger, I was overwhelmed by all the lingo; RSS, widgets, badges, blogroll, etc. and so on. Admit it, bloggers. We have our own language. (Note to Self: write a post entitled “Bloggy Definitions” very soon).
Anywho, if you’ve been scurrying around the blogosphere at all, you’ve come across blogs that display the code for their blog button, or badge. This is sometimes called a “link to me” or “grab my button” badge or button. Here, the code to add the button is displayed so people can copy it into their own sidebar. And adding this feature to your blog couldn’t be easier.
Here’s what you’ll do:
- Hopefully you have a 125×125 pixel button created for your blog. This is the standard size that fits nicely in most sidebars. First, upload your button to your blog or photo hosting account (such as PhotoBucket). Take note of the photo URL (the address where your button “lives”. It will look something like this: http://www.yourblogname.com/2009/07/yourbuttonname.jpg). Here’s mine:
- In your blog dashboard, be it TypePad, WordPress or BlogSpot, create a new text sidebar widget/gadget. You will be adding your own HTML code here.
- Now, insert the following code in the text widget, inserting your information in place of the red text:Link to me:
<br /><br />
<img src=”http://www.yourblogorservername.com/2009/07/
yourbuttonname.jpg” />
<br /><br />
<textarea rows=”3″ cols=”20″>
<br>
<a href=”http://www.yourblogname.com“>
<img src=”http://www.yourblogorservername.com/2009/07/
yourbuttonname.jpg” />
</a>
<br>
</textarea> - And that’s it! Click save and view your handiwork. The one thing you may want to fiddle with is the “rows” and “cols” numbers. They are just what they sound like…the number of rows and columns of text in the code. So, if you want more horizontal rows, or lines, bump that number up. If your text/code area is expanding beyond the width of your sidebar, change the “cols” number to something less than 20 until it fits.
I hope this was helpful…and simple. Check back in the next couple of weeks for a tutorial on creating that blog button, if you dont already have one (or you can always contact me to create one for you!).
OMG I think I love you! Anymore tutorials that you want to write, I will worship you for. I need all the help I can get.
[Reply]
How sweet are you!? Glad this was helpful…more tutorials are coming! Thanks for stopping by.
[Reply]
Thank you so much that was such a simple code!
[Reply]
[...] A while back, I mentioned doing a post on defining some terms that we bloggers like to throw around. Have you ever seen a word or acronym used over and over and never knew what it meant? Seemed like everyone else in the blogosphere (the wonderful world of blogs…first term defined) knew but you, right? I know I felt that way constantly when I first started blogging. [...]
[...] for people to copy and paste onto their blog. And if you’d like to know how to add that code, here’s [...]
Hy,
Can you help me with a good news blog template?
[Reply]
“1.Hopefully you have a 125×125 pixel button created for your blog.”
Um, no. How do I make one of those? Actually, I need a special button for a series called “The Ten Dollar Challenge” running in December. Can you help me?
[Reply]
Thanks a lot! I really appreciate it
[Reply]
Hi! thanks for this very helpful info!
[Reply]
You’re welcome! Glad it was helpful…
[Reply]
Thanks! It was easy and I made it a little bit longer. Great site!
[Reply]
Yay! Good for you…glad it was helpful!
[Reply]
Perfect. Thank you so much!
[Reply]
wow these instructions seem so easy and i finally got the button to post on my page but for some reason when i test it out if someone grabs the code it doesnt link to my page!!
[Reply]
Hi Zhanna, it looks like you have two sets of “” around your web address. That’s probably from cutting and pasting into Blogger. So just delete the more slanted looking quotes (some people call them “curly” quotes) on each end and you should be good to go!
[Reply]
THANK YOU! You’re a GENIUS!!
[Reply]
Thank you for the information on setting up a blog and how to add the code button.
[Reply]
Thank you so much for such clear, concise directions. Just what I needed.
[Reply]
Nicole Reply:
July 18th, 2011 at 2:40 pm
You’re welcome Jenn…glad it was helpful!
[Reply]
GORGEOUS! thanks for the tutorial!i couldn’t understand the previous research but this is simple and effective!thank you!
[Reply]
how did you get the textarea part of the html code to work in wordpress… it won’t work for me. I had to cheat it but it’s not all nice and neat in the side column… it runs over…
http://mommatipsforsinglegirls.wordpress.com/
[Reply]
Nicole Reply:
August 25th, 2011 at 12:55 pm
Hi Stacia,
Make sure you have the
< textarea > < /textarea >
tags in your code…I dont see them on your page. So, the whole thing should look like this:
< br />< br />
< img src=”image-url-here” />
< br />< br />
< textarea rows=”3″ cols=”20″>
< br>
< a href=”http://www.yourblogname.com“ rel="nofollow">
< img src=”image-url-here” />
< /a>
< br>
< /textarea >
(remove the spaces between the < and the text..I had to add those so this comment appeared correctly!)
That should fix the text spacing problem.
[Reply]
Can i hire you to help me build my site?
[Reply]
Thank you so much for your tutorial. I added your badge to my blog in appreciation.
[Reply]
Thank you so much for this…I’ve done this before but I just recently updated my badge and the whole blog. I don’t remember how I did it before..but thanks to these steps I was able to do it all over again. This one deserves a G+ . Have a great day!
[Reply]
Nicole Reply:
March 29th, 2012 at 5:07 pm
Thanks, Kaye! Glad it worked and great job on the badge.
[Reply]