Tutorial: Customizing your button bar

January 7, 2011

Tutorial: Customizing your button bar

January 7, 2011
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.

6 Comments

  • 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?

    http://www.saouds2ndgraders.blogspot.com

  • 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.

    Thanks.

    Laurie
    http://firstgradelyonsden.blogspot.com/

  • Leave a Reply

    Instagram

    • Did you know that there are HUNDREDS of fonts to choose from in google drive?⠀⠀⠀⠀⠀⠀⠀⠀⠀I mean, there are times I really wish I could just upload one of my favorite fonts from my laptop. But then I visit the Google Fonts website.⠀⠀⠀⠀⠀⠀⠀⠀⠀And it has 915 fonts to choose from!!⠀⠀⠀⠀⠀⠀⠀⠀⠀AND...you can add any of them to your google docs and slides!The Google Fonts site has all these great categories to help refine your search. You can even type right into the site to try out the different fonts (you can see an example in this first pic).⠀⠀⠀⠀⠀⠀⠀⠀⠀Once you find a font (or several!) you like, head into google docs. Click on the current font in your doc, then select “More fonts...” Type in the name of the fonts you’ve found...and then click on the font name when it pops up to add it to your font list.⠀⠀⠀⠀⠀⠀⠀⠀⠀Now your new favorite fonts are right there in your google drive for future designing!⠀⠀⠀⠀⠀⠀⠀⠀⠀What are your favorite google fonts? Mine are Oswald and Century Gothic!⠀⠀⠀⠀⠀⠀⠀⠀⠀#googledrive #technologyintheclassroom #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram
    • Do you like to use a certain color scheme in your google docs?⠀⠀⠀⠀⠀⠀⠀⠀⠀I always tend to use the same shades in my visuals for class...so I set up a file of my go-to colors. It’s very easy to do...and will save you lots of time in future google drive designing!⠀⠀⠀⠀⠀⠀⠀⠀⠀Here are the steps, in case you’d like to capture your favorite hues for google!⠀⠀⠀⠀⠀⠀⠀⠀⠀First, open up a new slides file. Insert a table, and choose your favorite colors for each cell (to create a set of color swatches).⠀⠀⠀⠀⠀⠀⠀⠀⠀Name your file (I used “color swatches”) so you can find it quickly in the future.⠀⠀⠀⠀⠀⠀⠀⠀⠀Select your table and copy it.⠀⠀⠀⠀⠀⠀⠀⠀⠀Now, open up a new slides file or google doc. Click paste and your table will appear.⠀⠀⠀⠀⠀⠀⠀⠀⠀Delete your table. Even though the color swatches are gone, they are now stored in your custom colors selector. When you go to change your font color (or the cells and borders of a table) you will see all of your favorite colors under “custom” (swipe to see this in the last pic).⠀⠀⠀⠀⠀⠀⠀⠀⠀And that’s it!⠀⠀⠀⠀⠀⠀⠀⠀⠀I hope some of you will be able to use this idea! It’s saved me lots of time in designing in my drive.⠀⠀⠀⠀⠀⠀⠀⠀⠀#googledrive #technologyintheclassroom #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram
    • Ok, I learned something else new in google docs that I LOVE...even more than default margins!⠀⠀⠀⠀⠀⠀⠀⠀⠀You can set a default font!!⠀⠀⠀⠀⠀⠀⠀⠀⠀So I tend to go with Century Gothic for everything in class...usually paired with a bold font for headings (Oswald is my favorite!). But every time I start a new doc, I have to take the time to make these font changes.⠀⠀⠀⠀⠀⠀⠀⠀⠀Well, it turns out you can set a default font (and color) of your choice in two simple steps! It can only be one font...but at least it will save some time!⠀⠀⠀⠀⠀⠀⠀⠀⠀Here are the steps:⠀⠀⠀⠀⠀⠀⠀⠀⠀First, open a new doc and type a word with the font/color combo you would like as your default font. Highlight the text you just typed.⠀⠀⠀⠀⠀⠀⠀⠀⠀Then, go to Format > Paragraph Styles > Normal Text > Update 'Normal text' to match.⠀⠀⠀⠀⠀⠀⠀⠀⠀Then go back to the Format menu and choose Paragraph Styles > Options > Save as my default styles. (Swipe to see pics of all these steps if you prefer a visual!).⠀⠀⠀⠀⠀⠀⠀⠀⠀And that's it! Now when you open a new google doc, you will see your favorite font, all ready for you to start designing!⠀⠀⠀⠀⠀⠀⠀⠀⠀#googledrive #technologyintheclassroom #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram
    • Did you know that you can set default margins in Google Docs? I never realized until the other day!⠀⠀⠀⠀⠀⠀⠀⠀⠀It drives me CRAZY when I open up a new doc and there's all that extra space at the top! I'm constantly reconfiguring the margins when I make a new doc. But it turns out you can set your favorite margin settings (because everyone has favorite margin settings, right?) and set it as a default.⠀⠀⠀⠀⠀⠀⠀⠀⠀And it’s very easy to do!⠀⠀⠀⠀⠀⠀⠀⠀⠀Go to File, then Page Setup. Enter the margins you would like, then click the "Set as Default" button.⠀⠀⠀⠀⠀⠀⠀⠀⠀And that's it!⠀⠀⠀⠀⠀⠀⠀⠀⠀Your next docs will open with this new setting from now on! Such a time-saver!⠀⠀⠀⠀⠀⠀⠀⠀⠀(Am I the only one who didn't know this?) 😂⠀⠀⠀⠀⠀⠀⠀⠀⠀#googledrive #technologyintheclassroom #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram
    • "This is so fun!" I got to hear some of my favorite words over and over during math today. And it was all thanks to  @adventuresofmssmith_ and @teachinginroom6!⠀⠀⠀⠀⠀⠀⠀⠀⠀These clever ladies shared an awesome idea for solving some mundane math problems (multi-digit multiplication and long division review for us today) while building index card towers!⠀⠀⠀⠀⠀⠀⠀⠀⠀And the setup was so easy.⠀⠀⠀⠀⠀⠀⠀⠀⠀I made 30 review problems and numbered the cards. Then I highlighted the cards with a quick swipe to color code them (thanks to @teachinginroom6 for the color-coding idea!). The simpler problems were pink and could earn one index card when solved correctly. The more complex problems were yellow and could earn two index cards...and the most difficult problems were green and worth three index cards.⠀⠀⠀⠀⠀⠀⠀⠀⠀My students worked in small groups and showed me their cards as they solved them. Some showed a couple of cards at a time, others solved everything first before "cashing in" (as they called it 😂).⠀⠀⠀⠀⠀⠀⠀⠀⠀They were completely engaged and working as teams for the whole math block...it was great! And they are already asking when we can do this again.⠀⠀⠀⠀⠀⠀⠀⠀⠀#math #iteachmath #multiplication #division #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram
    • How many field trips does your class go on each year?⠀⠀⠀⠀⠀⠀⠀⠀⠀We go on four (five some years 😬) and field trip season is just starting up now!⠀⠀⠀⠀⠀⠀⠀⠀⠀I like to keep a checklist of our different trips to keep track of forms, money, and chaperones. I color-code each trip with a different flair pen if the trips are back-to-back (we are visiting our state capital this week and heading to the ymca for water safety next week!).⠀⠀⠀⠀⠀⠀⠀⠀⠀This checklist is from my Instant Checklists resource...it has a hundred lists, ready to go, just enter your students’ names once. Please click the link in my profile if you’d like to see more! (http://bit.ly/instantchecklists)⠀⠀⠀⠀⠀⠀⠀⠀⠀Are you going on a field trip soon?⠀⠀⠀⠀⠀⠀⠀⠀⠀#classroommanagement #classroomorganization #iteachfourth #iteach4th #iteach456 #tpt #teacherspayteachers #teachersfollowteachers #teachersofinstagram

    Follow @ladybugsteacherfiles

    ×