January 16, 2011

Blogger Tutorial: More on making buttons!

Good morning, lovely bloggers. I wanted to make a second part to the button tutorial (see the original post on Customizing your button bar) in order to provide some more information.
So, I started out creating a button from scratch. I have wonderful graphics software that I use for everything (Fireworks). But it's pretty costly so I did some searching around for something similar, but free. And I found it.

It is AWESOME!

The site is called Pixlr. It is a snap to upload a photo and edit it. Actually, it has many of the same features as my beloved Fireworks software. You are going to love it! Here is a step-by-step on using this wicked cool site and uploading buttons to Blogger.

1. I uploaded an image from my computer. If you are a member of Thistlegirl Designs or have some of the other amazing graphics out there, this will be a snap. Just choose a button image and upload.




2.
There are many tools available to edit the image. I didn't want to change this particular image. However, this would be ideal for those that need to resize their buttons...I had to play around with that a lot initially in order to get my buttons to fit nicely on my site.



3. I clicked the text tool, so I could add a label to my button.





4. Once I clicked the text tool, a little box popped up with a whole bunch of options. There are a ton of choices for font, as well as color and size. Once I finished my text, I clicked the OK button.


5. Pixlr has its own menu at the top of the screen. I clicked Save and named my button.





6. Now that my image was created, I could upload it to a file sharing site...imgur.


7. I always leave this screen open in a separate tab, to use later.








8. I headed back to Blogger and went into the Design screen. I selected Add a Gadget.



9. I chose HTML/JavaScript.



10. I entered the code you can see to the right. The green is the url of my page within my blog. The blue link is from imgur...so I headed back to the imgur tab to get the link.

11. I highlighted and copied the code under Direct Link (on imgur).


12. I entered this code back on Blogger, in the HTML/JavaScript box. If you enter the code twice (side by side) it will create two buttons. If you place this in your sidebar, the buttons will stack, as shown to the right.



13. Or, if you place your HTML/JavaScript box on the top of your page, the buttons will line up side by side.

14. I designed a different button for each of my pages within my blog. Then, I just had to make sure I put the correct code for each button in the HTML/JavaScript box.

Pixlr would also be great to design a header for your blog. You can find more about uploading a header here.

I hope this will be of help. Please let me know if you have any questions. And I would love to see your blog if you try this out! :)

6 comments:

  1. I added your new url to my blog list! :)

    -Rachelle
    www.whattheteacherwants.blogspot.com

    ReplyDelete
  2. Thanks for the additional post. I made a button and added it per the instructions. The image does not link to my student page. I retraced my steps several times but do not see where I went wrong.

    ReplyDelete
  3. Rachelle, thank you for adding my url!! :)

    Mrs. Saoud...I'm not sure why it's not working, I feel so bad! I hope you can figure it out. I'll let you know if I find anything.

    ReplyDelete
  4. Mrs. Saoud, I think I figured it out...sent you a message.

    ReplyDelete
  5. Can you do a post about sorting your blog posts by topic? I have it listed by date, but would like it by topic also.
    Thanks!
    Erica Bohrer's First Grade

    ReplyDelete
  6. Thank you so much for this tutorial. I blogged about how helpful this post was on my blog in creating my blog design and buttons. While it is still basic, I am pleased with how it has improved since yesterday. Can you let me know how to make the HTML link visible so other can grab my button? Thanks

    ReplyDelete