Blogger Tutorial: More on making buttons!

January 16, 2011

Blogger Tutorial: More on making buttons!

January 16, 2011

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.


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! 🙂


  • Rachelle January 16, 2011 at 8:23 pm

    I added your new url to my blog list! 🙂


  • Mrs. Saoud January 16, 2011 at 8:34 pm

    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.

  • Ladybug Teacher January 17, 2011 at 11:45 pm

    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.

  • Ladybug Teacher January 18, 2011 at 3:11 am

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

  • Erica Bohrer March 5, 2011 at 7:47 pm

    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.
    Erica Bohrer's First Grade

  • Third and Thankful June 15, 2011 at 12:38 pm

    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

  • Leave a Reply


    • So I managed to avoid shoving things into random places...mostly 😂 #classroomorganization #kindof #randompaperplates #andnapkins #iteachfourth #iteach4th #teachersfollowteachers #teachersofinstagram
    • All packed up and ready for summer!! 😅 Best wishes to my friends still wrapping up their school years! #summertime #canbarelymove #classroomorganization #iteachfourth #iteach4th
    • Two of my dear friends and colleagues retired today. I worked on teams with both over the years (one in 4th and one in 5th) and they’ve both been my next door (classroom door) neighbors. They’ve taught a combined total of 74 years!!⠀⠀⠀⠀⠀⠀⠀⠀⠀We had an outdoor luncheon on our school patio to celebrate their years of dedication to our school. The theme was beachy/nautical and it was so fun to set up...I found most of the decor at the Dollar Tree! We had tons of candles, shells, flowers, and a fishnet with class photos from over the years. (Don’t mind the masking tape on the table in that last photo, it was a bit windy 😂). ⠀⠀⠀⠀⠀⠀⠀⠀⠀It was a happy and sad kind of day 💕 #retiringfriends #cantimagineschoolwithoutthem #teachersfollowteachers #teachersofinstagram
    • A little progress with packing up.⠀⠀⠀⠀⠀⠀⠀⠀⠀I am really trying to get rid of anything we haven’t used in years and pack up everything in its place. We’ll see if I shove things randomly away when I run out of time next week 😂!⠀⠀⠀⠀⠀⠀⠀⠀⠀Are you packing up next week?⠀⠀⠀⠀⠀⠀⠀⠀⠀#classroomorganization #classroommanagement #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram
    • Do you ever feel like you make MORE of a mess as you clean out your classroom?⠀⠀⠀⠀⠀⠀⠀⠀⠀Today was our students’ last day and I stayed for a bit to get things cleaned out and packed but I got so overwhelmed I finally just left. It can wait, right?⠀⠀⠀⠀⠀⠀⠀⠀⠀#classroomorganization #notpicturedhere #ineed50daystocleanmyroom #wegetone #iteachfourth #iteach4th #teachersfollowteachers #teachersofinstagram
    • Anyone still in school? Our students’ last day is tomorrow and I’m feeling all the emotions right now!⠀⠀⠀⠀⠀⠀⠀⠀⠀I got this sweet framed gift from one of my students today 😍😭 Getting myself ready for tomorrow’s whirlwind of emotions!!⠀⠀⠀⠀⠀⠀⠀⠀⠀If you are wrapping up school soon, best wishes! And if you are already on break, happy summer!⠀⠀⠀⠀⠀⠀⠀⠀⠀#almostsummerbreak #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram

    Follow @ladybugsteacherfiles