Thursday, July 26, 2012

Thursday Review—The Easy Way to Make a Blog Button for Your Site

Today I'd like to share a fun addition to your blog. Besides being cool, it's also a great way to let others advertise your site for you. Where does the fun begin?


With a Blog Button, of course!


This is mine. (You can also see it in the sidebar on the left) 

The Write Conversation


The key to a blog button is to have the code listed so someone else can copy it and add it to their site. Although you do have to generate a little bit of HTML code, it's not as hard as you may think.
  • The first thing you'll need is an image that represents you or your blog. This image needs to be fairly small, so it can fit on a sidebar. Once you have your picture picked out, use your photo program (I used my Microsoft Office Picture Manager, but you can also use iPhoto for Apple) to resize it. Mine is resized to about 160 x 147 pixels. This is the email - small predefined selection in my program.
  • Once you have the image resized, you'll also need this picture to hosted somewhere on the Internet so others can access it. Don't panic, this isn't hard, I'll walk you through it. 
If you have a WordPress, Typepad or Blogger site, go into the compose window and paste the picture in there. Then save the post as a DRAFT. Don't publish it and don't accidentally erase it or you button won't work. I titled mine Blog Button pics to help me remember. Minimize this window because you'll be returning to it in a moment.


Now open a blank document  and copy the following code into it.
*Special Note: Because this is live HTML code, I had to use a jpeg of the text, instead of typing it into this document.
Once you have it copied into your blank document—no need to highlight the text, I did that just so you would know what parts to change—you'll need to customize it for your site. 
  • First replace all the Blue highlighted text with the Title of your blog (mine says The Write Conversation).
  • Next replace the Pink highlighted text with the EXACT URL of your blog. The best way to get this is to open a window and go to the main page of your blog. Copy the URL and paste it into your code document in place of what's there.
  • Now you need to go back to the draft post where you pasted your image. Change the draft mode to HTML and copy the address of the picture. It's easy to find, it begins with HTTP and ends with JPEG. Once you have that copied you'll need to paste it into TWO places in your code document. You'll want to replace the text highlighted in Yellow. 
  • Finally you need to check your code. Each of the replacements you made should be INSIDE quotation marks. Once you've checked everything, your code should be complete and ready to copy and paste into your sidebar using the HTML gadget (or widget).


Now I'd like for you to check back in after you generate a button of your own. Please leave a comment and I'll visit your blog and collect your button. I'll put everyone's buttons in a special list on my sidebar for others to see.


Also be sure to leave any questions you have and I'll do my best to answer them.


Don't forget to join the conversation!
Blessings,
Edie




19 comments:

  1. Uh...gonna have to work through this one...

    Thanks!

    ReplyDelete
    Replies
    1. That's what I thought. But I wanted one SO BAD! And it wasn't nearly as hard as I thought. Blessings, E

      Delete
    2. I'm with you, Vonda. Duh....This is a middle of the night I can't sleep project but now I want one too!

      Delete
  2. Can't wait to try this later...I've so wanted a Button. Gotta find a picture first, then I'll try! I hope it will work! I hope, I hope!!

    ReplyDelete
    Replies
    1. Let me know how it works for you! Blessings, Edie

      Delete
  3. I'll have to check this out, Edie. You always do such a good job of explaining things. Thanks.

    ReplyDelete
    Replies
    1. Ellen, thank you! It's a fun addition to a blog. Blessings, E

      Delete
  4. This may be over my head, but I'm highlighting it in hopes I can elicit help from my husband. Thanks, Edie, for trying to keep us dinosaurs up to speed. : )

    ReplyDelete
    Replies
    1. Believe me, if I can do it so can you. HTML code is WAY over my head. Blessings, Edie

      Delete
  5. I have a question...when making a button for your blog, do you think a photo of yourself is better than a photo that has more to do with your topic? I LOVE your button!! (I would normally be very resistant to using a picture of myself but I do have some headshots to play with thanks to Mary Denman!)
    And...I have made a few blog buttons before for specific topics on my blog and I have *never* heard of putting the photo in a draft post. That is GENIUS!
    I'll be back with a button...this is going to be such fun! Thanks for a wonderful - as always - post!

    ReplyDelete
  6. Good post, Edie. Way to tackle html code! I put my button code on this page:
    http://susanstilwell.com/random-stuff/

    I usually "center" justify the buttons on my sidebar, but I set mine to "left." Easy change at the beginning of the code.

    ReplyDelete
  7. Edie, you are a genius! This is awesome!

    ReplyDelete
  8. Edie, how can I copy the HTML code you show as an example in a way that I can edit it? Because it's a live link, it won't let me highlight and copy it. The only way I can copy it is to copy the image, but then I can't edit it to replace the highlighted parts with my own information. I tried typing the whole code in by hand, but I"m sure I missed a space or inserted one where there wasn't, because when I put it onto my site, instead of getting my nice button picture, I just got the characters I had typed. Help!

    ReplyDelete
  9. Hi Edie,
    Me again. Slogging away at hand typing the code. I finally got it -- wooohooo! Success, except that my code doesn't show up in a nice neat little box like the one on your site. All I've got is an ugly string of HTML code that takes up a lot of space. Will that lesson be Part II? At least now you can head to my blog and capture my button :)

    ReplyDelete
  10. Lori, I think your button looks great! Here's another option for creating a button from Susan Stilwell, if you want to play around with it. http://susanstilwell.com/random-stuff/. Hope this helps. So sorry for your frustration. Blessings, E

    ReplyDelete
    Replies
    1. So, is there a way to cut and paste the code you display in order to edit it, or is the only option to hand type it all in? Just wondering if there's a shortcut.

      Delete
  11. Lori, email me and I'll send you the code. I should have thought of that sooner. ediegmelson@gmail.com. I can't put the code directly into the blog post because it treats it as code and does what it says to do. That's why it's inserted as a picture.

    ReplyDelete
  12. Edie! Thanks to your expertise, I just created a button for a book I'm helping promote. I wanted something on my blog sidebar, and your instructions made it so easy. Many thanks to you.

    In Christ's love,
    Emily

    ReplyDelete