Subscribe to our mailing list

Get the news right in your inbox!

Tutorial: Customizing your button bar

January 7, 2011 6 Comments

Tutorial: Customizing your button bar

January 7, 2011 6 Comments
If you’d like to have your own customized buttons on your blog, you will need to design your button first. I used Thistlegirl Designs to create mine. I made 6 buttons for my webpage and resized them to fit on my page neatly.

Once you have your buttons designed, you will need to upload them to an image site (such as imgur), which will generate code for your image.

Next, you will need to decide where you would like to place your buttons. I put my button bar right under my header (click where it says Add a Gadget, as shown in the image to the right).

Once you click Add a Gadget, you will see a menu. You will need to select HTML/JavaScript, as shown below:

I entered the following code to create my buttons:

The green represents the link you will put in. So if the button is for “home”, you will enter the code to your homepage.

The blue is the link from imgur, where you uploaded your image.

To create the 6 buttons, I entered this code 6 times, one right after the other. I then entered the specific links needed for each button. The buttons should line up side by side once you have done this.


All posts


  • Mrs. Saoud January 16, 2011 at 2:29 am

    I need differentiation! I don't seem to understand how to make the buttons. I have pages on my blog. I was trying to get the page links to look like your buttons. This must be two different steps. I am a member of Thistlegirl too. Will you assist me?

  • Ladybug Teacher January 16, 2011 at 2:49 am

    Hi Mrs. Saoud,
    I will be happy to help…I will send you a more detailed message tomorrow morning (I hope it will be of help!)

  • Ms. Margarita March 28, 2011 at 2:14 am

    Hello Ladybug! I´m trying so hard to make my blog… it is a very new thing where I live, but I wanted to do it right, so everyone else can realize the importance of blog.
    My blog is new, but I want it to have the buttons thing before I start, so can I organize the information, or a need to have some things posted in the blog before I started.

    Margarita (from Bogota, Colombia)

  • Anderson May 19, 2011 at 2:15 pm

    Thank you for this easy tutorial. I knew it couldn't be hard but everyone was making it so complicated! Thanks so much!

  • liam June 20, 2011 at 9:15 am

    I DID IT! I made my own buttons! this is so exciting, Kristen. Thanks for your help…AGAIN!

  • Laurie June 28, 2012 at 1:33 pm

    Hi, I'm trying to make my own buttons…but seem to be running into trouble!! I can make them and post them (in a row) on my blog but there's a HUGE space between the buttons and my first post. Is there a reason why it's doing this?

    Also, I made a button on the side with my blog pic…shouldn't a code be appearing below that people can copy? I don't see it either.



  • Leave a Reply

    About Me

    Welcome to Ladybug's Teacher Files! I started this blog in 2010 as a way to share resources and collaborate with teachers. I hope you will find something that can be of help in your classroom! -Kristen


    • Anyone else using iReady this year?
I’m looking to add a little more accountability/motivation for my students, so this week we are going to start tracking our usage. My fourth graders will store their sheets in their binders so their data is kept private, then I’ll send it home in our weekly folders so parents can see progress as well.
What do you do for iReady accountability? I would love to hear more ideas!
Please click the link in my profile if you’d like a copy of this sheet for your class (
#classroommanagement #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram
    • This closet!!! It has NEVER been organized in all my years in this classroom!
Honestly, I would pile things in there and slam the door fast, in hopes the pile wouldn’t collapse 😂
So I FINALLY got some shelving and sorted everything into bins...and I am in heaven.
Now if only all bins were the same color blue...
#imjoking #actuallyimnot #typeateacher #kindoforganized #kindofnot #iteachfourth #iteach4th #iteach456
    • Need a last-minute valentines gift for your class?
Or is it just me who is frantically doing this now? 😂
These are some editable coupons I shared years ago on my blog that are perfect for those no-cost presents. I’ve been saving our scholastic points, so everyone is getting a coupon to choose a book for our classroom library tomorrow. 📖❤️
Please click the link in my profile if you would like a copy! I hope some of you can use them!! (
#lastminute #howisitmidfebruary #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram
    • Binders, folders, or notebooks?
Over the years I’ve become a binders kind of girl...I tried to go with notebooks again this fall and it wasn’t the same. There’s just something about having everything all in one place.
So in January, I switched back to binders and I’m so glad I did. I use prenumbered tabs which saves A TON of time in setting them up (see the last pic). I try to number the handouts in the bottom corner to match the tab number it belongs in (when I remember to 😉) but really it’s a great exercise in following directions as papers are handed out if I don’t remember to number them.
My fourth graders LOVE their students from last year mention them when they come back to visit (it was actually thanks to them I got binders again, since they enjoyed them so much). Next fall, it’ll be binders from the start for us!
Do you like binders, folders, or notebooks? Or a combination?
#classroommanagement #classroomorganization #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram
    • I received a few questions on how to get the day count on @planbookcom, so I wanted to share it here (it’s super quick!).
If you go into the Display settings, you will find a drop down menu under “Date Styling”.
Click the check box next to “show school day counter” and you should be all set!
I have a couple of blog posts about planbook and I’m working in some updated ones to share soon...anything in particular you’d like to see more about?
#teacherplanner #classroomorganization #classroommanagement #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram
    • Did you know you can add little check boxes to Google Sheets? ✅
I’m REALLY trying to get more ahead in my lesson planning so I can have my weekends free...and this little check box tool is helping with just that!
I set up a Sheets doc with each subject area I need to plan for. In the second column, I added the check boxes (you can find them under Insert).
It’s a really nice feature for those little checklists you want to reuse each week! Now back to lesson planning 😬
#classroommanagement #classroomorganization #lessonplanning #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram

    Follow @ladybugsteacherfiles

    Recent Posts


    Popular Topics