Woo Us To Your Blog – Buttons and Badges – HTML

by Sherry Riter in Blog tips  ,Blogger,Woo Us To Your Blog,Wordpress

“Tell me and I’ll forget;
show me and I may remember;
involve me and I’ll understand.”
~Chinese Proverbs~

Today we are going to create the blog button or badge code so that your readers can grab and post it to their own sites. This is a blog button with the grab code and it is one that you keep requesting, so I made it:

The Redhead Riter's Woo Us To Your Blog

It is created by the HTML shown below except that I shortened the image link so it wouldn’t be so long for my visual example. Let’s take it a piece at a time so that you can understand the logic. I’ve color coded the programming code to enable easy recognition.
Blog button directions


  • centers the text and photo button on the page
  • the “preferred” code for centering is to begin the centering with this HTML

    <DIV ALIGN=CENTER> instead of <CENTER>

    and end the centering with this HTML

    </DIV> instead of </CENTER>


  • your blog URL

  • the URL for my blog


  • discussed in depth here


  • determines the size of the button picture
  • px is the abbreviation for pixel; pixels discussed in detail here


  • discussed in depth here


  • the URL of the photo stored somewhere like Flickr.com or Photobucket.com. These photo storage sites will provide the image code also known as the HTML code.
  • the image code for the photo


  • controls the size of the grab box that stores the blog button code
  • 15 columns usually fits a 125×125 button and 25 columns fits a 150×150 button to look like the “Woo Us To Your Blog” button grab box at the beginning of this post

  • column width for a text box

Rather than typing everything from scratch, you can grab the code below and plug in your own information for:


<center><a href="YOUR BLOG URL" target="_blank"><img style="width: 150px; height: 150px;" alt="NAME OF YOUR BLOG" title="NAME OF YOUR BLOG" src="URL FOR YOUR PICTURE" border="0" /></a></center>

<center><textarea rows="4" cols="25" wrap="VIRTUAL"><a href="YOUR BLOG URL" target="_blank"><img border="0" alt="NAME OF YOUR BLOG" title="NAME OF YOUR BLOG" src="URL FOR YOUR PICTURE" /></a></center>

Did you know I have a page for all my friend’s blog buttons called Special Blogs and it is found in my navigation bar at the top of my blog page? If you do not see your blog button and would like to be a special blog, please send me your blog button code and I will be happy to post it. Also, leave your URL below in the Linky so everyone else can grab your button too!

The last “Woo Us To Your Blog” post explored email and signature lines.. Do you remember the message or are you totally involved in trying to create a new blog button?

I received so many emails showing me the changes that were made to your email signatures. Let me just say that you did a great job!!! I wanted to share a few of them with you and I’m sorry that I can’t share them all. If you’re interested in visiting any of their blogs, I have linked their emails below to their sites.

Avant Garde Parenting

Ramblings of a Woman

Shelli's Sentiments

Shhhhh! Just betweetn u&me

I RANDOMLY DREW A NUMBER and then counted from the oldest to the newest email to get the winner of the prize.

Drum roll please…

And the winner of a $20 gift certificate at one of the following shops of her choice is Bernice of Ramblings of a Woman!!!

Bernice, send me an email letting me know where you want to spend the $20.

As always, attached is the weekly Linky to enter either the main URL to your site or add each post you publish throughout the week. You don’t have to do anything special, just drop your link in and get a little extra exposure to your site.

Until next week’s wooing post, create a blog button that expresses the message of your site.

The Redhead Riter

This post was written by...

Sherry Riter is also known as The Redhead Riter. Sherry is witty, intelligent and addictive as she writes about cooking, family, marriage, failures, blogging tips, art, humor, inspiration, travel, PTSD and aging. Her goal is to inspire, motivate, educate and to make her audience laugh. Sherry embraces being a redhead and helps others to see the redhead point of view…"In some eras redheads were worshipped while others thought us witches. Personally, I like the former and think every day is 'Love a redhead day!'" She can also be found on Facebook, Google+, Pinterest, StumbleUpon, Linkedin, tweeting as @TheRedheadRiter and you can subscribe to her free blog feed.

{ 11 comments… read them below or add one }

1 tlcfree2bme September 19, 2010 at 2:17 pm

Thanks again for your help and also for sharing my signature and link to my blog with your followers!!!


2 Anonymous September 19, 2010 at 2:51 pm

thank the Good Lord you do all this for me for this was like dropping me off in Germany and leaving me and telling me to find my way home, with my Carolina language!!!!!!!!!!!!!!!!!!!!!


3 Kate September 19, 2010 at 3:31 pm

Thank you so much! I'm not much of a graphics girl and I'm sure one day I'll shell out some money to have some design me something special for my blog, but thanks to you I was able to make my own!


4 lynda dmoch September 19, 2010 at 6:47 pm

Hey…..you rock, as always! Thank you so much for always paying it forward. I will too! Mywherehaus humbly says "thank you" for posting my blog site here. :^)


5 Lori September 19, 2010 at 8:57 pm

I am so totally book marking this page! And it's even color coded for those of us who are unique learners. Thank you!


6 Avante Garde Parenting September 20, 2010 at 1:17 am

Thanks for this post, for helping me with my blog button, and for featuring my email signature. You are just so kind. I can't even think of a better word. I am so glad I've gotten to 'know' you and I hope you know how much you are helping others. It is just amazing!


7 bernicewood September 23, 2010 at 4:54 am

Oooh, I get to go shopping! Thanks you so much redhead!
aka Ramblings of a Woman


8 katlupe September 25, 2010 at 5:15 pm

This post is something I come back to again and again. I think you do us bloggers a wonderful service and you explain things so well.


9 By Word of Mouth September 26, 2010 at 12:53 am

HaHaHa… love the color coding but think I will come back to it when I havn't had two glasses of vino 🙂


10 renee March 5, 2011 at 3:28 pm

This is a wonderful tutorial and the only one that I have ever been able to understand so that I could make my own! Thank you so much. I would like to add that the picture width and height needs to be specified in the second row also so that when someone tries to grab your button it doesn't blow up to some huge size when they copy and paste it.


11 Mel~ @ Lifestwistedstitches.com April 11, 2011 at 3:22 am

Red, H-E-L-P, P-pp-please! I have createda button for a Meme and I am trying to past the code to my sidebar, but I can not understand why the image is just giving me a red "x" (no pic) 🙁

Actually I'm trying to start my own Monday link, for people to write on the weekends. I'm not sure if the grab "button" is even the right tool. Should I be setting it up through "Linky Tools"?
Actually, what do I need to do to create one that will allow my readers to click the button and go to all posts with that Meme tag THAT would be great!

I'm going to email, this is just to complicated, lol.

Melody~ @ Life's Twisted Stitches


Leave a Comment

"How rare and wonderful is that flash of a moment
when we realize we have discovered a friend."

~William E. Rothschild~

Thank you for taking the time to share your thoughts.
I respond back to all comments.


Previous post:

Next post: