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


    • The beginning of ALLLL the due dates!! Our spring break is starting this weekend and I know I’m going to come back to a whirlwind of permission slips, forms, and project papers to keep up with!So I’ll be using these magnets to keep all of our due dates posted (and to save myself from the endless questions of when things are due!). If you’d like to see more about the magnets, please see the link in my profile ( your due dates starting to intensify yet?#somuchtodo #classroomorganization #classroommanagement #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram
    • My heart could just burst with happiness today. We’ve worked so hard as a community of readers this year to read as much as possible, in all the extra minutes we can find in our day.Today was our fourth grade Water Fair. The students had to present their projects in front of judges and wait patiently for the semifinals and then results...for several hours.It was a long morning for them.But I watched as so many happily pulled out their current reads while they waited, thrilled for all of the bonus reading time. ❤️❤️❤️ #fullheart #communityofreaders #readersgonnaread #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram
    • Giveaway Closed...congrats @ccbahr!I just listed a new resource that has really made a difference in our class.I’m sure I’m not alone in this...our list of due dates is HUGE right now!! So I’ve been keeping track of all our forms and assignments with these little magnets. They have been SO helpful for my students...and me, honestly (I can lose track of things so easily these days!). Would you like to win a set for your class? You can earn two entries by doing the following:1. Comment with an emoji that shows your feelings about due dates right now.2. Comment again and tag a friend for a second entry.I’ll announce the winning name later this evening! The link to this resource is in my profile if you’d like to see more about it ( #classroommanagement #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram
    • Magnet love!! 🧲❤️ I’ve been using these due date magnets to help organize our important papers and keep those deadlines posted for my students and (let’s be honest) me as well!Because this is the time of the year when so much is going on, so much is becomes very easy for a teacher to get overwhelmed with projects, permission slips, order forms, and more!So now I post our papers, write the due date with a vis-a-vis marker and there it easy-to-see visual reminder that keeps my class and I on track.I’ll share more from this board soon...we have some other resources that are keeping my fourth grade class a little more organized during this busy season!How do you like to keep track of due dates in your class?#classroomorganization #classroommanagement #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram
    • My mind has been a jumble of thoughts this Sunday night, so I'm turning to google slides to help plan things out.⠀⠀⠀⠀⠀⠀⠀⠀⠀This week, for example, we need to work on a couple of our routines that have become less...routine. 😬⠀⠀⠀⠀⠀⠀⠀⠀⠀This slide will give us a chance to have a chat and share strategies on keeping a clean workspace. Plus, it has visuals of how our tables should look, which is always a huge help!⠀⠀⠀⠀⠀⠀⠀⠀⠀Have you tried this with your class before? I think it will be a great reminder for my students this week!⠀⠀⠀⠀⠀⠀⠀⠀⠀#classroommanagement #classroomorganization #iteachfourth #iteach456 #iteach4th #teachersfollowteachers #teachersofinstagram
    • I may have experienced a momentary feeling of dread when I saw Monday’s date as I left yesterday. 😂⠀⠀⠀⠀⠀⠀⠀⠀⠀But...I absolutely ADORE these magnetic numbers. I learned about this awesome time-saver from @twoteachersinfifth (Brooke and Leah always have the best ideas!!).⠀⠀⠀⠀⠀⠀⠀⠀⠀And seriously...this is the first time in my seventeen years of teaching I haven’t routinely forgotten to put the date on the board. It’s a student job to keep it updated...but even if my fourth graders occasionally forget, it just takes a moment for me to do.⠀⠀⠀⠀⠀⠀⠀⠀⠀I keep the numbers in a little photo storage box by the front whiteboard. The magnetic numbers are by Teacher Created and can be found on Amazon. (⠀⠀⠀⠀⠀⠀⠀⠀⠀I love how easy these numbers are to see from anywhere in our room...and of course the time they save!!⠀⠀⠀⠀⠀⠀⠀⠀⠀#teachertimesaver #classroommanagement #classroomorganization #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram

    Follow @ladybugsteacherfiles