Spread Bloggy Love |{Day 9-Living With Lindsay}

Isn’t this such a fun “Spread Bloggy Love” series that Kristi has put together? There has been so much great information shared so far, and I can’t wait to see what else I get to learn here this month!

Today, I’d like to share with you a tutorial on how to put together your own “Grab My Button” widget for your blog. I know you’ve seen these all over Blogland. Having a blog button your readers can easily grab and put on their own blogs is a great way to spread your name via word of mouth. Here’s what mine looks like:

Now, before I delve into the code, I want to calm your fears if you don’t consider yourself a techie. This is easy, copy and paste stuff. HTML may not look like English, but it is nothing more than instructions about how you want the information on your blog to be displayed.

How to Create “Grab My Button” Code for Your Blog

1. First, you will need the actual .jpg, .gif, or .png of the image you want to display. A popular size button is 125×125 pixels, which how mine is sized, but it doesn’t really matter. If you don’t already have a button and don’t know how to create one, you can hire a fabulous graphic designer, such as Kristi herself, to create one for you.

2. Next, you will need to upload the image into the media files of your blog or to a photo sharing service such as Photobucket or Flickr. Once uploaded, you need to know the location of the file (i.e. http://www.photobucket.com/lindsay/button.jpg).

3. Add a new space for your button on the sidebar of your blog. If you are on the Blogger platform, go into your Dashboard and click Design –>Add a Gadget –>HTML/JavaScript. If you are on the WordPress platform, go into your Dashboard and click Appearance –>Widgets –> and then slide a Text widget into your sidebar.

4. Enter the following code in your new widget box. You will need to replace the highlighted green text with your information. If you want to center your button and grab code within your side bar, put <center> and the beginning of the code and </center> at the very end.

<div><a href=”http://YOUR_BLOG.com”><img src=”http://YOUR_BUTTON_IMAGE.jpg” alt=”YOUR BLOG NAME” /></a>

</div><br/><div>

<form>

<textarea cols=”15″ rows=”6″>

<center>

<a href=”http://YOUR_BLOG.com” target=”_blank”><img src=”http://YOUR_BUTTON_IMAGE.jpg” alt=”YOUR BLOG NAME“/></a>

</center>

</textarea>

</form>

</div>

5. Save your code, and you should have your new grab button!

Troubleshooting: If the code doesn’t work for you immediately, check out the quotation marks. HTML requires that quotation marks be the straight up and down kind. If you see what’s called a curly or slanted quote, you will want to replace them with the regular quotes. Sometimes when you copy and paste a section of code as we did above, the font will turn the regular quotes into the curly or slanted ones. Just delete the erroneous quote and hit shift+” on your keyboard. That should solve the problem, since the font used in your Blogger or WordPress dashboard is different than what you see on your blog.

Other problems with the grab code? Let me know below in the comments. I have a basic understanding of HTML, and I will try my best to help (but reserve the right to cry uncle when I just don’t know!).

********************

While we’re spreading bloggy love, I’d like to bring Jenna at SAS Interiors to your attention. Her blog is a treasure trove of goodies, including tutorials and inspiration. Jenna is a real-life Interior Designer, and I highly recommend you add SAS Interiors to your blog bookmarks immediately!

Lindsay is a stay at home mom of two who never needs the employees at Home Depot to help her find anything, as much as they keep asking. However, she couldn’t find her way around a kitchen if her life depended on it. Lindsay can be found at Living With Lindsay, a DIY home decor blog that chronicles her paint drips, glue gun burns, and everything in between. And she’s very lucky to have a husband who can cook.

Have you missed a day of Spread Bloggy Love? (Remember it goes from June 1st-June 30th) Click here to find all the posts!

Have a happy day,

If you like what you just read please Subscribe so you don’t miss a thing!

Follow me on Twitter & Facebook for updates in between blog posts & also sneak peaks!!