Woo Us To Your Blog – Buttons and Badges – HTML

“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:

<a href="https://theredheadriter.com/" target="_blank"><img decoding="async" border="0" alt="The Redhead Riter's Woo Us To Your Blog" title="The Redhead Riter's Woo Us To Your Blog" src="https://i622.photobucket.com/albums/tt308/TheRedHeadRiter/2009%20TEMPLATE/ede18f33.jpg" /></a>

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.


Red

• 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>
  

Blue

• your blog URL

Orange

• discussed in depth here

Aqua

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

Purple

• discussed in depth here

Green

• 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.

Brown

• 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

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

• YOUR BLOG URL
• NAME OF YOUR BLOG
• URL FOR YOUR PICTURE


<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.

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!!!

• of Love
• Dorota Jewelry
• Three Wishes Studio
• La Belle Soul Jewels

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.