Thursday, March 15, 2012

How to Create A Button for Your Blog! - You're Welcome.

I am simultaneously irate and ecstatic.  Yes, the conflicting emotions are making my head explode, but it's all good in the hood.  Because I am a superstar!  Actually, I'm more of a regular star, but because it has taken me eight-ish months to accomplish what most of you figured out within the first five minutes of becoming a blogger I am calling myself a SUPERSTAR!

I finally, FINALLY figured out how to create a code to add nifty button thingies to my blog AND I figured out how to create the code to add a "Grab My Butt(on)" Image and the little box with the code beneath it.

I mentioned a week or so ago that my dear friend Just Jennifer created a button for my blog (because she knows what an inept idiot I am).  You're gonna wanna go ahead and grab it if you haven't done so.  It will change your life. Maybe.  Probably not.

Without going into the twisted hows and whys thought process that takes place in my demented mind, I added a Follow Me on Twitter and Follow Me on Pinterest button thingy.  Look!  They're right there at the top right of my blog.

Ooh ahh! Yes, I sure did draw those all by myself.

In related news, I abandoned my dream of becoming a writer and am pursuing an artist drawer painter artistic career cuz clearly I have the skillz.

In the process of adding those, I figured out how to create a Grab My Butt(on) thingy too (even though Jen already made me one, it irritated the crap out of me that I didn't know how to do this).

I know that the majority of you know how to add all these nifty bojiggity (huh?) things to your blog, but as I was venting my frustrations to twitter I learned I was not the only one who was still having fits over these things and so...I'm going to share all my secrets in case there are others of you lurking about in frustration and confusion.

YEEEEEEEEEEEAAAAAAAAAAAAAAAYYYYYYYYYYYYYY

Wow.  Your excitement is palpable.

Today, I'll tell you how to add a button/badge thingy with the code to your blog and my next post will tell you how to add twitter, pinterest, facebook, etc. badges.

Please note: these are instructions for BLOGGER bloggers.  I'm not sure how well this translates to Wordpress. I'm also going to explain things in excruciating detail because I HATE when I'm trying to learn how to do something and the instructor assumes I know how to do even basic steps (when explaining things to me, it is best to assume I am a colossal idiot; however you cannot make me feel like an idiot cuz then I will hate you. just kidding. not really.).

Here we go.

Step One: Upload your image to Photobucket
If you don't have Photobucket account, create one.  It takes seconds.  Next, upload the image you want to use as your button.

Step Two: Go to your Album and Select your image to edit it.
The only editing I have ever done here is change the size.  If you don't need to do any editing to your photo you can skip this step.

If you hover over your image, the little menu will appear below.  Click the "edit" button.

I honestly have no idea what the standard size is (maybe someone can tell us in the comments), I just fiddle with it until it's the size I like.  To give you some idea: the twitter and pinterest icons on my blog are 86 x 75; you'll most likely want your badge to be larger than that.  Make sure the "Keep Proportions" box is checked when you're changing the size

Step Three: Grab your code
Once you've saved your image, go back to your album.  Make sure you are working with the new image and not the original.

There are two ways you can grab your code.  You can hover over the image and select it from the menu below.

Or you can click on the image and select the code at the bottom left of the screen.


This is where my advice differs from every other explanation I have ever seen, which say to copy the Direct Link code.  THIS HAS NEVER WORKED FOR ME (thus the hair-pulling and knife-throwing that has been my life for the last eight months).

You want to copy the HTML code and paste it into Word (I paste everything into Word, make the changes and then copy and paste into blogger).

For example, your code will look like this:
Next, replace the first part of the code (in bold) with the URL of your blog.

Example:
You now have the code for the IMAGE of your button.  (Make sure when you do this, you copy the actual HTML code of YOUR image from Photobucket.  If you simply use my code above and insert you blog URL in place of the bold code, you will have my image.)

Step Four: Grab the code for the little box below your image
This is the code:

Where it says YOUR CODE HERE, insert your code from step two.
It will look like this 


 Step Five: Add codes to blog
You now have two codes: the one from step three and the one from step four.  You're going to copy both of them into blogger.

Go to the DESIGN tab, ADD A GADGET, select the HTML/JAVA SCRIPT gadget and copy and paste both codes, one right after the other, with the code from Step Two first.

It will look like this:

Save and you are done!


One thing to note: the part of the code that says cols="40" rows"4" is the size of the box under your image.  Change the numbers (40 and 4) to change the size of the box.  Cols is the length of the box and rows is the height.

I seriously hope this helped.  If you have any questions, hit me up on twitter @sarcasmgoddess

Happy button making!

Don't forget to take my poll on the sidebar: How many blogs do you comment on daily?

Quote of the Day
  The time to begin writing an article is when you have finished it to your satisfaction.  By that time you begin to clearly and logically perceive what it is you really want to say.  
~Mark Twain

Word of the Day
rutilant: glowing or glittering with ruddy or golden light.

39 comments:

  1. Wow, I think all I ever did was just click on the image and then go to the link icon and input a link.

    ReplyDelete
  2. I remember this taking me FOREVER to figure out! And I kept getting it wrong!

    Re-sizing the image is key, unless you want a big sore-thumb sticking out. There are other ways to re-size an image in the coding, but this is the easiest way.

    Bravo!

    ReplyDelete
  3. Watch out world! Sarcasm Goddess is on a roll.

    ReplyDelete
    Replies
    1. Bahahaha! In two months this will make no sense to me and I'll be back to shouting at twitter for the answers.

      Delete
  4. Cool! So does this make that sort of button box where people can copy the code for your button and easily add it to their site?

    I should probably make a button for myself... eventually... =\

    ReplyDelete
    Replies
    1. Thank you so much for this tutorial! I just used it to make a fancy double-button badge to spread the word for a contest I entered. (If I win I'll get to fly into space!)

      You're awesome! =D

      Delete
  5. You know what? You are awesome! (Like you didn't already know, pfft!)

    I've been meaning to make a button link thingy and someone told me once how to do it but that was AGES ago (at least a week) and I have no idea where I put those instructions. SO THANK YOU! Your instructions were perfect! I did it in about 5 minutes! (Yeah, it shocked me too!)

    ReplyDelete
  6. Good job! Didn't I help you with this last summer??

    ReplyDelete
  7. Dang. I was all excited to go and finally make a button, after like a year of blogging. But this looks like a lot of work. No wonder I never did it. I'm too lazy.

    ReplyDelete
    Replies
    1. My eighty bajillion steps makes it seem, really daunting, I know. The most time consuming part is creating your image. After that it really is super easy. I laugh as I say that because for eight months I thought the exact opposite.

      Delete
  8. Yippee! I think this makes you quite rutilant today.

    Happy seeing beautiful!
    http://seeabeautifulworld.blogspot.com/

    ReplyDelete
    Replies
    1. I think it does! And that makes me quite beautiful, doesn't it? :)

      Delete
  9. This is confusing. Can you dumb it down. . . or. . . you know what? Just swing by after work and do it for me?

    ReplyDelete
  10. I never did know how to do this! And I still don't! Ha! But one day when I feel I have the patience, I will come back here and try, becuase YOU ARE AWESOME for trying to teach an idiot such as myself.

    ReplyDelete
  11. What can I say except...I'm glad I'm on WordPress. *snicker*

    ReplyDelete
  12. Thank you so much!!! I did it, I actually did it!!! You are so freaking awesome!!! :) :)

    ReplyDelete
  13. Thank you SO MUCH for this tutorial! I finally figured out how to make the button and post on my blog, thanks to you. Yay!

    ReplyDelete
  14. I can't find the second code :-(

    ReplyDelete
  15. Okay got the button to work but with one problem and it is a major problem. The photo is HUGE. No matter how much I resize it the photo is still the same size. I give up.

    ReplyDelete
    Replies
    1. I used this website first, to edit my image and adjust the size. It's super easy! After it was complete I uploaded it to photobucket to get the code. www.fotoflexer.com

      Delete
    2. Thanks, Dani Sue! JeanElaine - did it work for you? If you need help, email me at kawilliams082 at yahoo dot com. (Hopefully you subscribe to the comments and can read this!)

      Delete
  16. Thank you thank you! I've tried 3 different instructions from other places that did not work! You're awesome! Check it out! danisuedreams.blogspot.com Yay!

    ReplyDelete
  17. OH MY ALL I CAN SAY IS THANK YOU, I have been searching 100 sites trying to work out how to make and add a button and yours is the only one to make sense. Your a legend!
    Im at http://www.kidsactivitiesandtipsforeveryday.blogspot.com.au/

    Thank you, I now have a cool octopus button :-)

    ReplyDelete
  18. FINALLY... someone who speaks our language! I feel like I am computer savvy until I attempt this blogger stuff! I have been struggling with a signature... and divider... but at least I have a shiny new button - thanks to you! SARCASM GODDESS ROCKS!

    ReplyDelete
  19. thanks for the tip! except now the box where you grab the code goes all the way into my actual blog post and wont stay on the side bar! dammit! Idk wtf im gunna do because your blog was the only blog I found that it actually worked! lol! thanks anyway!

    ReplyDelete
  20. ahhhh! i figured how to make that code box smaller! oh yeah! you change the cols="40" rows="4" to cols="25" rows="4" !

    thank you!!!! i am not joking when i say i have tried 10 other peoples methods. nothing ever worked. so thank you! if anyone else is having my same problem, here yah go! and also, if anyone's into button trading, im your girl now (:

    ReplyDelete
    Replies
    1. Yay! So glad it worked. I have to admit, I just re-read the instructions and I am thoroughly confused! Hopefully I'll never have to make a new badge!

      Delete
  21. THANK YOU!!! Oh my goodness - I have been looking for EASY instructions like this! Now going to follow you just because you rocked my night!

    ReplyDelete
    Replies
    1. Yay! Awesome!! I'm so glad it worked for you!

      Delete
  22. I did exactly what you said, but when I add it to my gadgets it keeps showing up with two of the pictures, but no box with the code.

    ReplyDelete
    Replies
    1. Oh no! If you want to email me, I'll try to walk you through it. My email is kawilliams082 at yahoo dot com.

      Delete
  23. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. WoW! You rock! I am techno stupid, but with your step by step guide I got it right first time! Thank you!
      Charri

      Delete
  24. Thank you so much for this tutorial! I tried several others before I found yours. Your directions were easy to follow, and so helpful!
    website design

    ReplyDelete

I had to change my comment settings because I was getting too much spam. You can no longer comment anonymously. (I don't think anyone besides the spammers were doing this.) But I don't want to block the rest of you from commenting! If you're having trouble, tweet me at @sarcasmgoddess or email sarcasmgoddess at ymail dot com and I'll see what I can do to fix it.