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

    • How’s it going with your classroom cleanup? I had a two hour block the other day and will have a whole day next week to do more. It’s surreal. Hope you are all doing well ❤️
⠀⠀⠀⠀⠀⠀⠀⠀
#distancelearning #remotelearning #missmystudents #missmyclassroom #iteachfourth #teachersfollowteachers #teachersofinstagram
    • Not one thing worked today. Not zoom. Not google meet. Two weeks to go and I am missing my classroom more than ever!!!
⠀⠀⠀⠀⠀⠀⠀⠀
How much distance learning do you have left??
⠀⠀⠀⠀⠀⠀⠀⠀
#distancelearning #remotelearning #notmyfavorite #missmystudents #andmyclassroom
    • Google drive shortcuts at a glance!
⠀⠀⠀⠀⠀⠀⠀⠀
I know I shared these in a pdf the other day but I wanted to show another way to display these little time-savers.
⠀⠀⠀⠀⠀⠀⠀⠀
I split them into two files and resized them so they could stay at the top of my drive as a reference point...no need to open anything, just a couple of mini reference charts!
⠀⠀⠀⠀⠀⠀⠀⠀
If you would like to try the same, please click the link in my profile to grab a copy or visit: bit.ly/shortcutsataglance
⠀⠀⠀⠀⠀⠀⠀⠀
They are in one google slide together. To view them separately, make a second copy of the file and delete the first slide. Now you will have two google slides you can keep at the top of your drive.
⠀⠀⠀⠀⠀⠀⠀⠀
I hope you can use them! I can't get enough of them!!
⠀⠀⠀⠀⠀⠀⠀⠀
#googledrive #distancelearning #distanceteaching #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram
    • I'm LOVING these time-saving shortcuts for google drive!
⠀⠀⠀⠀⠀⠀⠀⠀
I compiled some of my favorite shortcuts that have eliminated a lot of double-clicking on items...as well as right-clicking and selecting from a drop down menu. These things can get pretty tedious when you are trying to move quickly, right? Especially with the amount of time we are working in google drive during distance learning!
⠀⠀⠀⠀⠀⠀⠀⠀
The first set of shortcuts will work on anything you have selected in your drive. So if you select a doc, you can simply click one of these letters/symbols and be on your way.
⠀⠀⠀⠀⠀⠀⠀⠀
The second set features a faster way to open up new docs, slides, sheets, and more. For these shortcuts, simply click the shift key along with the letter shown in the chart. So much faster than the traditional way!
⠀⠀⠀⠀⠀⠀⠀⠀
I made a pdf of these shortcuts...you can save the file in your drive or even print a copy if you would like. Please see the link in my profile or visit: bit.ly/googledriveshortcutschart
⠀⠀⠀⠀⠀⠀⠀⠀
I hope they help save you some time during distance learning!
⠀⠀⠀⠀⠀⠀⠀⠀
Which one do you think will be the most handy? My two favorites right now are the renaming shortcut and the share shortcut!!
⠀⠀⠀⠀⠀⠀⠀⠀
#googledrive #googledocs #distancelearning #distanceteaching #iteachfourth #iteach456 #iteach4th #teachersfollowteachers #teachersofinstagram
    • Who else loves a good shortcut??
⠀⠀⠀⠀⠀⠀⠀⠀
I seriously LOVE shortcuts. It may sound like such a small thing, but a one-click shortcut saves SO much time rather than double-clicking or right-clicking and selecting from a drop down menu.
⠀⠀⠀⠀⠀⠀⠀⠀
But just one little click? Then you are on your way in an instant!
⠀⠀⠀⠀⠀⠀⠀⠀
And these google shortcuts are just that...lovely, one-click shortcuts!
⠀⠀⠀⠀⠀⠀⠀⠀
These are some of my favorites I started using last year...and now with all this distance learning I have found them to be so valuable as I navigate my google drive:
⠀⠀⠀⠀⠀⠀⠀⠀
Open a folder or document: click letter o
⠀⠀⠀⠀⠀⠀⠀⠀
Rename a folder or document: click letter n
⠀⠀⠀⠀⠀⠀⠀⠀
Preview a document: click letter p
⠀⠀⠀⠀⠀⠀⠀⠀
Share a document: click the dot symbol
⠀⠀⠀⠀⠀⠀⠀⠀
And that's all! Select any folder or document you are working on, click on of these letters/symbols, and you are on your way to the next step in your work!
⠀⠀⠀⠀⠀⠀⠀⠀
I have a few more shortcuts to share and would love to put them together in a document that can be saved/printed...can anyone use this? Let me know and I will share it tomorrow!
⠀⠀⠀⠀⠀⠀⠀⠀
Happy shortcutting!! And, more importantly, happy weekend my friends!
⠀⠀⠀⠀⠀⠀⠀⠀
#googledrive #googledocs #teachertimesaver #distancelearning #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram
    • Do you have a favorite google font? There's a way to make your favorite a default font, EVERY time you create a new google doc!
⠀⠀⠀⠀⠀⠀⠀⠀
I love this one so much.
⠀⠀⠀⠀⠀⠀⠀⠀
You know how google docs always open with Arial? Like size 11 I think? It's not that Arial is bad or anything...but it's definitely not my go-to font.
⠀⠀⠀⠀⠀⠀⠀⠀
Luckily, there is a way to make your favorite font (and font size!) display automatically in docs! So every time you open a new doc, no more time wasted in selecting your favorite font and font size! It is SO awesome!
⠀⠀⠀⠀⠀⠀⠀⠀
And really easy to do! Here are the steps (shown in the pictures step by step too):
⠀⠀⠀⠀⠀⠀⠀⠀
1. Open a new google doc. Type a word or phrase and highlight it.
⠀⠀⠀⠀⠀⠀⠀⠀
2. Select the text and choose your favorite font and font size. Keep the text highlighted.
⠀⠀⠀⠀⠀⠀⠀⠀
3. Go to Format > Paragraph Styles > Normal Text > Update 'Normal Text' to Match.
⠀⠀⠀⠀⠀⠀⠀⠀
4. Then go to Format > Paragraph Styles > Options > Save as my default styles.
⠀⠀⠀⠀⠀⠀⠀⠀
Now your new font is ready to go! Each time you create a new doc, your font will be there waiting...no more time wasting changing fonts and sizes!!
⠀⠀⠀⠀⠀⠀⠀⠀
Have you tried this feature before? I hope it helps save you some time if you haven't!
⠀⠀⠀⠀⠀⠀⠀⠀
#googlefonts #googledocs #googledrive #distancelearning #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram

    Follow @ladybugsteacherfiles

    ×