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


    • Ok, this is nothing major but it has really sped up my planning time in @planbookcom!
Did you know you can navigate from lesson to lesson with arrows on the right and left? It is SO much faster than double-clicking in and out of lesson boxes!!
This is probably one of those things everyone knows except me...but I wanted to share just in case!
#lessonplans #planbookcom #classroommanagement #iteachfourth #iteach4th #teachersfollowteachers #teachersofinstagram
    • Three days of school, three books read for #classroombookaday!
This has already become a highlight of our day and I love this bonding time with my new sweet fourth graders ❤️
Next week, we will start discussing the themes and character traits we encounter during our daily reads, thanks to the brilliant @headoverheelsforteaching‘s resources!
Have you started #classroombookaday again this year? If you are new to the concept you must check out @heisereads who developed this...she has tons of book recs and ideas!!
#classroombookaday #picturebooks #readersgonnaread #iteachfourth #iteach4th #teachersfollowteachers #teachersofinstagram
    • Three days of school and I STILL have a couple of unfinished areas. This whiteboard isn’t hung on the wall, my drawers are only partially labeled, and I have piles of things on the floor to put away BUT...
The first days of school have been absolutely awesome with my new students!!!
I really think it’s SO hard for a type A teacher to learn to let things take more time in the summer away from the classroom. I have been working at it for a few years now and I think I’m finally making some progress.
My room isn’t completely ready for the new year but I definitely am ❤️
#movingawayfromtypea #teacherselfcare #iteachfourth #iteach4th #teachersfollowteachers #teachersofinstagram
    • Year 18, day two!! It was too busy to post a first day of school picture yesterday 😅
Who else started this week?? I hope it’s been great!
#backtoschool #year18 #wheredoesthetimego #iteachfourth #iteach4th #teachersfollowteachers #teachersofinstagram
    • Sharing a quick Google Sheets tip!
If you are using the checkbox feature and working with a large list, there is an easy way to uncheck all your boxes AT ONCE when you are done with your list!
Click at the top of the column where your check boxes are located (swipe to see). This will select the whole column.
Then click your space bar...this will automatically uncheck all of your boxes at once! You can also check off large groups of checkboxes using this same tip.
I used this feature while printing off the covers for our read alouds saved me a ton of time!
If you’d like to see more about this digital read aloud tracker, please click the link in my profile or type ✅
#googledrive #googlesheets #technologyintheclassroom #iteachfourth #iteach4th #teachersfollowteachers #teachersofinstagram
    • How many days do you get for classroom setup?
We have our one day coming up on Tuesday...and I have a zillion things to finish. Most parts are almost done, but there are stacks of things on the floor everywhere (swipe to see) 😬
#classroomorganization #kindof #andstacksofsupplieseverywhere #teachertired #iteachfourth #iteach4th #teachersfollowteachers #teachersofinstagram

    Follow @ladybugsteacherfiles