Friday, August 14, 2009

BLOG BUTTON TUTORIAL!!

YAY! I made a blog button. I feel so official--finally!--after 2 1/2 years of blogging. haha! I decided I really love the cupcake, but I agreed with some of you who said there are LOTS of cupcakes out there in blogland--not very original. So, the mailbox had to be a part of it. And having the mailbox associated with my blog is just cute because, when you read my blog, hopefully I deliver something sweet! (Cheesy, I know.)


UPDATE: I realized after making my mailbox design that I might come across some problems due to the fact that it's not squared design. (Due to some size restrictions on certain blogs or sites?) So you now have a choice of 2 buttons.

After I created the image, I saved it---& that's when it went all pixel-y on me. I hate that, but don't know how to correct it. Anyway, it's a start. I can always clean it up later.

On the right sidebar you will see the image & then the html code you can copy & paste to your website or blog. It'll be so exciting when I see it appear 'round the www!

And, as promised, here are the instructions for creating your OWN badge/button!!

The original instructions can be found HERE. But my helpful badge buddy Julie, of Creations with Heart put the instructions in her OWN easy-to-understand words & sent them to me. (Thanks again Julie!)

These are directions for blogger, but it can be tweaked to use wherever! You will be opening two windows/tabs to make the copying & pasting easier.
A typical button is 150 x 150. This image should already be re-sized before uploading into your online image host.

I use Photobucket for my image hosting - it's super easy! If you aren't storing your photos online, you may want to create an account there like I did. OK. Here we go...

1. Upload your image to your online image host such as Photobucket. In another window/tab, open a text editor/notepad and copy the DIRECT LINK code underneath your image. Just click on it and it will be copied. Now paste it into your editor/notepad. You'll be coming back to this later.

2. Open blogger and click on LAYOUT

3. Click on ADD A GADGET

4. Click on HTML/Javascript

5. Copy the code below and paste it into the HTML/Javascript window in blogger that you just opened.


[center][a href="http://YOUR WEB ADDRESS/" target="_blank" title="TITLE NAME"][img alt="TITLE NAME" src="http://IMAGE WEB ADDRESS"/][/a][center] [/center] [center][textarea id="code-source" rows="3" name="code-source"][center][a href="http://YOUR WEB ADDRESS/"][img border="0" src="http://IMAGE WEB ADDRESS"/][/a][/center][/textarea][/center]

***All of the front brackets [ will need to be replaced with < & all the back brackets ] will need to be replaced with >
6. While you're still in blogger, insert your WEB ADDRESS where it says "http://YOUR WEB ADDRESS/" in the code you just pasted. The web address will be the site you want the button to link back to.

7. You're still in blogger, now give your TITLE NAME a name, for ex. "blogbutton", "blog", title of blog, name of your company, etc.) and insert it where it says "TITLE NAME".

8. Now, take the DIRECT LINK code from the image in Photobucket you pasted in your texteditor/notepad, and paste it into the code where it says "http://IMAGE WEB ADDRESS"/> .

9. Click SAVE and you're done! You should now have your image with a text box underneath it for people to copy and paste!

You can copy & paste this code to put on your website too! Now you have your very own button!!

20 comments:

  1. I think you very clever ! I will take your button hopefully when I have no kids around and I will even "try" and make my own . I love your design , go girl!
    verification word is polite , hope I am ....

    ReplyDelete
  2. Way cool!! just added it our blog!

    ReplyDelete
  3. thats so cool. it looks great!!!!

    ReplyDelete
  4. that is so great!
    i'd love to try it some day :O)

    ReplyDelete
  5. Thank you!!!! you blog totally helped me get my button up on my page!

    www.k9kreationsbykara.blogspot.com

    ReplyDelete
  6. thank you for this - you made it INCREDIBLY EASY!

    ReplyDelete
  7. Woohoo!! It works! Thanks to your instructions I now have a couple of my own blog buttons! Thanks so much for posting these instructions!

    Rischa
    www.Artist-Haven.Blogspot.com

    ReplyDelete
  8. Thanks for the instructions but I have a question! The code and all worked but unfortunantly I can't see the picture on my blog. :( could you help me?
    Thanks!
    Andrea
    www.theartofteenagecooking.blogspot.com

    ReplyDelete
  9. Even a year later...still a great post. Thanks! Now to decide what to photobucket for the button.

    http://thesurvivalmama.blogspot.com
    @TheSurvivalMama

    ReplyDelete
  10. First time I've visited... Searching for a blog button tutorial.
    YAY! It works!
    Thanks for sharing!

    SOLI DEO GLORIA!

    -Kyrie<><

    ReplyDelete
  11. Thanks to your blog I was able to make a blog button, but for some reason my photos are coming out blurry on photobucket (which I've not used till recently). Do you have any suggestions for making the picture clearer? The original and even smaller versions are very clear. Thanks!! Here's my blog if you'd like to see what I mean: http://maidenwithamission.blogspot.com/

    ReplyDelete
  12. Oh my gosh!
    I cannot believe you helped me create a blog button when no one else could! :)

    I am so grateful!
    Thank you,
    Mary

    ReplyDelete
  13. I asked for help on how to create the link under my button and another blogger friend led me to your post. Thanks so much!

    Jessica

    ReplyDelete
  14. I am doing the happy dance - I finally created my blog button - thank you so much for your great tutorial!

    ReplyDelete
  15. Thank you so much!! Finally a tutorial I could follow ;) I feel so official now that I have my own button!
    xoxo
    Annie

    Confessions of a Navy Wife

    ReplyDelete
  16. Thank you so much Nikki for sharing this tutorial. Now I have my own blog button and I feel very proud of it :)
    I'm now also a follower of your blog because I think you have very good and simple ideias of things to do.
    I've post on my blog a message about this tutorial so visit my blog coelhinhoseternuras.blogspot.com if you'd like :)
    SóniAS - Portugal

    ReplyDelete

Thank you so much for taking the time to leave a comment. Every time you do, I do a little happy dance. For reals.