In our little niche of the blogging world, one item that is consistently utilized is the Networking Badge, or “Grab Button” as some people call it. It is a great way for other bloggers to show their support of your blog. It is also a way to generate link backs, which push your SEO rankings higher.

Bloggers will “grab your badge” and place it on their site with a link back to your site. Showing support, or in exchange for you doing the same on your blog. It is a great and simple tool and can be easily implemented. Even if you do not have any graphics software at your disposal, you can easily create a JPG using WORD, Powerpoint or even free software like Google Docs.

TheButtonDesign suggestions when creating your badge:

  1. Make sure that it is no bigger then 300 pixels. I usually style mine at about 250px (mine over there to the right is set at 245px x 245px). You want to make sure it fits within the sidebar
  2. Style it in a stand-out color
  3. Make sure the text is legible
  4. You don’t have to put everything on the badge, just the basic info

 

Once you’ve created your blog badge graphic:

  1. Host the image on an image 3rd party image site, like flickr or just host it using your blog software, like I did:

    http://www.parajunkee.com/wp-content/uploads/2014/01/TheButton.png
  2. Once you get the URL you need to set up the basic image HTML and link the image to your blog. Here is the code:
    ย <a href=”http://www.parajunkee.com“><img src=”http://www.parajunkee.com/wp-content/uploads/2014/01/TheButton.png” /></a>
  3. Replace your URL with mine (in purple) and your image link with mine (in red).
  4. Don’t forget theย  “s, this is the number one reason HTML fails
  5. Now you need to set-up the text area code. Place the code above that you created, within a
    <textarea> code. Here is an example:

    <textarea><a href=”http://www.parajunkee.com”><img src=”http://www.parajunkee.com/wp-content/uploads/2014/01/TheButton.png” /></a></textarea>
  6. Place that code with an HTML widget on your sidebar for users to grab. Here is what it should look like in full:
    <a href=”http://www.parajunkee.com”><img src=”http://www.parajunkee.com/wp-content/uploads/2014/01/TheButton.png” /></a>
    <textarea><a href=”http://www.parajunkee.com”><img src=”http://www.parajunkee.com/wp-content/uploads/2014/01/TheButton.png” /></a></textarea>

The one issue that pops up a lot while using the Textarea tag is styling. You can easily change this by adding a STYLE tag to the Textarea tag.

  1. Figure out what you want your “textarea” box to look like. Pick a font size, background color, width, font color and even the padding (the space between the border and the font)
  2. This is how I styled my textarea:
    <textarea style=”font-size: 12px; background-color: #5e2d43; padding: 5px; color: #fff; width: 275px;”><a href=”http://www.parajunkee.com” target=”_blank”>
    <img src=”http://www.parajunkee.com/wp-content/uploads/2014/01/TheButton.png” border=”0″></a></textarea>
  3. I used the style tag style=” and then put the css styling within this area. You can style your textarea any way you want. I used the basics here, but you can always add interesting styles like adding a border-radius.
  4. To break it down:
    1. font-size tag is the size of the text in your text area
    2. background-color is the color of the box that surrounds the text, use the hexidecimal code of the color you choose. You can pick a hex color here: w3schools
    3. padding is the amount of pixels that will separate the content of the textarea from the border
    4. color tag is the color of the font. I’ve set it to have a white color. Again add a hex color
    5. width tag sets the width of the text area. Remember the padding increases the size of the width. So if you want your textarea to be 285 pixels wide, you would subtract the padding amount from the width. You are padding on both left and right sides at 5 pixels in the above code, so subtract 10pixels and make it 275px. ๐Ÿ˜€

Have fun and happy networking! Here is the full code:

<a href=”http://www.parajunkee.com” target=”_blank”><img src=”http://www.parajunkee.com/wp-content/uploads/2014/01/TheButton.png” border=”0″></a>

<textarea style=”font-size: 12px; background-color: #5e2d43; padding: 5px; color: #fff; width: 275px;”>

<a href=”http://www.parajunkee.com” target=”_blank”><img src=”http://www.parajunkee.com/wp-content/uploads/2014/01/TheButton.png” border=”0″></a>
</textarea>

 
And what it looks like: