Photobucket Photobucket
I am launching this site to go with our Bloggy Girls Club on Facebook.
I will be working on it in my "spare time" and hope to get it up & running where it should be within a couple of weeks! :-)

Tuesday, January 8, 2013

Make Your Own Blog Button and Grab Box!

You see blog buttons everywhere, but do you know how to make one of your own?
Do you even really need a blog button? In this tutorial, I will teach you how to construct the html for your very own blog button and blog button grab box. I will also discuss some of the reasons it is important to have your own gradable button.


Blog buttons are easier to make and put on your blog than you may think! And YES! You do need one!
Okay.. maybe it isn't absolutely necessary, but they sure are a lot of fun!
Blog Buttons:

  • Advertise your blog. You can place an ad or participate in ad swaps with other blogs. Other blogs can grab your button and add it to a list of blogs that they like, and think their readers will enjoy as well.
  • Branding. You can use your button as a branding tool... like a logo that tells who you are and what your blog is about.
  • Avatars.You can use your button as an avatar for your social media outlets.
You want to make one now, don't you?
The hardest part of making your blog button is choosing your design and constructing your picture. You can make your own or you can hire a graphic artist or another crafty blogger to help you.
If you choose to make your own, there are many free online and downloadable software options: Gimp and PicMonkey are two popular ones. Heck, you could even use MS Paint that likely comes with your PC. Just remember to make your button a manageable size. I don't like to make mine any bigger than 500x500 px. I typically make mine 200x200 px. They can always be re-sized in the html.

Once you have your image, the rest is easy!
Simply upload your image to an online hosting site and construct your HTML.
I like to use Photobucket for my image hosting. It's free and I can set my image to public, so that it is visible to everyone online.

When your image is uploaded online and had a direct image link, you are ready to construct your HTML.
Now, I could just give you the html to copy and plug in your info and paste, but what's the fun in that? Instead, I will break down the html for you, and explain what the different parts of it does.

The Button:
  • Here is what your button html will look (something) like:

<a href="YOUR BLOG URL HERE" target="_blank"><img src="DIRECT LINK TO YOUR IMAGE HERE" width="125" height="125" alt="YOUR BLOG NAME HERE"/></a>


  • Now, let's take it one piece at a time:

<a href="YOUR BLOG URL HERE" target="_blank"><img src="DIRECT LINK TO YOUR IMAGE HERE" width="125" height="125" alt="YOUR BLOG NAME HERE"/></a>

These are your opening and closing commands. Very important.


  • This tells where you want to go:

<a href="YOUR BLOG URL HERE" target="_blank"><img src="DIRECT LINK TO YOUR IMAGE HERE" width="125" height="125" alt="YOUR BLOG NAME HERE"/></a>

When you click the image, this is the url (your blog address) that it will take you to. You must remember to put your url address inside the quotation marks, or your computer won't understand the command.
The part that reads: target="_blank" tells the computer to open your page in a new tab. This part is optional, but I really like it. It is especially helpful if you are putting someone else's button on your page. It allows the reader to open the new page, while staying on your own.


  • Let's move on to the image part:

<a href="YOUR BLOG URL HERE" target="_blank"><img src="DIRECT LINK TO YOUR IMAGE HERE" width="125" height="125" alt="YOUR BLOG NAME HERE"/></a>

The highlighted area here, is what makes your image show up. Paste the direct link url of your image inside the quotation marks.
  • This is where you re-size your image:
<a href="YOUR BLOG URL HERE" target="_blank"><img src="DIRECT LINK TO YOUR IMAGE HERE" width="125" height="125" alt="YOUR BLOG NAME HERE"/></a>

Simply enter the pixel size inside the quotations.


  • What if your image isn't able to show up for some reason?

<a href="YOUR BLOG URL HERE" target="_blank"><img src="DIRECT LINK TO YOUR IMAGE HERE" width="125" height="125" alt="YOUR BLOG NAME HERE"/></a>

The alt command allows you to type your blog name (within the quotation marks, but you know that by now, don't you!) so that your blog name (or whatever you type in here) will be displayed in the event that your image host is down. It will also show up when you mouse over  the image. Cool, huh?

The Text Box:
Now that it is all broken down for you, your button should be fairly simple to make.
...but what about a grab box? Do you need one?
Yes you do! I can't tell you how many times I've gone to a site to grab a button and only see the button. No way to grab it. It's not only frustrating for those who want to grab it, but it is a missed advertising opportunity for you! So yes. you do want that grab box!

  •  Here's the html:

<textarea cols="12" rows="3"><a href="YOUR BLOG URL HERE" target="_blank"><img src="DIRECT LINK TO YOUR IMAGE HERE" width="125" height="125" alt="YOUR BLOG NAME HERE"/></a></textarea>

  • Here's a little secret:
<textarea cols="12" rows="3"><a href="YOUR BLOG URL HERE" target="_blank"><img src="DIRECT LINK TO YOUR IMAGE HERE" width="125" height="125" alt="YOUR BLOG NAME HERE"/></a></textarea>

The highlighted part is just your blog button html from above. Just paste the whole thing in there.

  • How do you size your text box?

<textarea cols="12" rows="3"><a href="YOUR BLOG URL HERE" target="_blank"><img src="DIRECT LINK TO YOUR IMAGE HERE" width="125" height="125" alt="YOUR BLOG NAME HERE"/></a></textarea>

cols= lets you choose how many characters wide you want your text box.
rows= lets you choose how many rows high you want your text box.

  • Don't forget your opening and closing commands.

<textarea cols="12" rows="3"><a href="YOUR BLOG URL HERE" target="_blank"><img src="DIRECT LINK TO YOUR IMAGE HERE" width="125" height="125" alt="YOUR BLOG NAME HERE"/></a></textarea>

All that's left to do is to plug in the html to your site, wherever you want it!

My Example:

<a href="http://bloggygirlsclub.blogspot.com/" target="_blank"><img src="http://i1251.photobucket.com/albums/hh547/EarningMyCape/BGCbutton1WIP.png" width="125" height="125" alt="Bloggy Girls Club"/>
</a>

Above is the html for my Bloggy Girls Club button.
Below is the html for my grab box.

<textarea cols="12" rows="3"><a href="http://bloggygirlsclub.blogspot.com/" target="_blank"><img src="http://i1251.photobucket.com/albums/hh547/EarningMyCape/BGCbutton1WIP.png" width="125" height="125" alt="Bloggy Girls Club"/>
</a></textarea>

Here is what it looks like:

Bloggy Girls Club


Have fun making your very own blog button!

~Susie~

17 comments:

  1. How I see what you mean about "once the graphic is done". I used your instructions to make a button for my blog, sans the lettering on the button itself and used your button above to link it back here! Thanks so much! Here's the link in case you want to go check it out. :O)

    http://backporchervations.blogspot.com/2013/01/introducing-my-blogs-button-v1.html

    ReplyDelete
  2. Thank you so much. I've read so many tutorials and tried many codes and yours was the first to work perfectly!

    Danielle
    Carolina Teacher


    ReplyDelete
  3. thank you.. I'll try it!!
    Thanks very much!! ^^

    ReplyDelete
  4. Hello, the actual button worked, however the text box didn't seem to work for me. The actual box shows up on my blog, but not the text inside of it. I click to edit it, and everthing for the HTML is deleted except for the information that "sizes" the text box. Can you help me?

    ReplyDelete
    Replies
    1. I am having the same problem as you. =/ Could it be something with Blogger? It's not working on any of my blogs hosted by blogger.

      Delete
    2. The TEXTAREA.../TEXTAREA code should work anywhere that accepts HTML. It works fine on my own blogger blog. I double-checked the code given in the original post, and everything seems to be in order.

      Try looking over your widget and code again, with these tips in mind.

      *Are you using an HTML/Javascript widget?
      *Is your beginning tag closed before your text starts?
      *Is the code in your text correct?

      In case a simple typo is your problem, and you can't see where it went wrong, I'm going to see if I can add the code for a working grab-box to the bottom of this post... inside a grab-box..... anyway, when adding your grab box, you could simply copy/paste the code onto your HTML widget, and replace my numbers and URLs with your own.

      Good Luck!

      Delete
    3. I'm having the same problem. I've tried to redo it a number of time, but the code keeps disappearing. Otherwise, very helpful info. Thanks!

      Delete
    4. I know quite a bit about html and this code worked for my own blog button, but when trying to help a friend with hers it doesn't work! It is very strange. When I click save it deletes all the code that should appear in the html box. I don't know if it is a weird glitch with blogger, but at the same time on my same page mine works! Very frustrating. I'm kind of at a loss!

      Delete
  5. Great instructions! I was looking for some to pass along to a friend. Thanks.

    ReplyDelete
  6. The Button Part is working, however the text box is not working.. =/

    ReplyDelete
  7. I am having the same problem with the text box showing up empty. Great instructions though, very simple and easy to follow. Any advice on the grab box part would be appreciated:)

    Michelle@ Big Foot Tribe
    www.bigfoottribe.com

    ReplyDelete
  8. Try: http://www.mycoolrealm.com/sandbox/gbgen/ I think it has something to do with the "text box" code. this site gives you the option to use something else and has worked for me.

    ReplyDelete
    Replies
    1. Oh my gosh, finally!!! I've been working on this for almost 2 hours and 6 tutorials later this generator worked. Yay, yay, yay! Thank you for sharing :)

      Little In Betweens

      Delete
  9. I am having the same problem as other where the text doesnt show up, and this has happened with every code that work good, the best two being this one and another Cheverons and the same thing happens with both just no text.

    ReplyDelete
  10. Thank you! This was the most helpful on-line information I found on adding a blog button. Success!
    website design

    ReplyDelete
  11. Wow I just loved your article on the beginners guide to starting a blog. I want to start one and I am now pretty clear after reading this post. This was very helpful for me and I am definitely going to mention you in my blog as soon as I start it. Thanks you so much.
    Regards: Eve Hunt

    ReplyDelete