Thursday, June 7, 2012

Classroom Blog Series - Part 5 {Making a Title & Buttons}

First of all, so sorry I haven't posted at all this's been a little crazy around here.  My husband and I have our own version of Storage Wars going on...ok we're not really buying storage lockers, but we are moving all of our stuff from 2 lockers down to one... more organization and downsizing for us! Woo hoo! :)  Anywho, here is Part 5 to creating your Classroom Blog! :)

If this is your first post with The Real Teachr, and you are here to learn how to create your own blog, or wanting to spice up your current blog, we are so excited to have you! :)  Today I am going to focus on How to Make a Title and Buttons for your blog.  If you want to know how to set up your blog, catch the rest of our blog series HERE.

Creating a Blog Title
The blog title is the top part of your blog where right now you probably just have the Title and Description you typed in.  It looks plain, not fancy, and not fun...I know, I know! But in a few short steps, you will have an awesome blog title! :)

The first thing you need to do is to find out how wide your Title space is.  In order to do this, log into your Blogger Account, go to your Dashboard, and then click on Layout on the left-hand side of the screen.  It will take you to the Layout screen that we used yesterday.  

Once you are there, click on the little "Edit" link on the Header Gadget.  The Header Gadget is highlighted in yellow and the Edit link is highlighted in red below.

Next, a small screen will pop up.  You will look right above the orange "Save" button to where it says "Image will be shrunk to _______ pixels wide."   It is highlighted in red below.

Keep this box up or write down how many pixels wide your Title will need to be.  

To create your title, you can use any type of design program like Photoshop, etc... but today I am going to show you how to create one in Paint.  Which is a program most computers come standard with.  I always use to use Paint to create everything before I had Photoshop :).  

If you don't know where Paint is on your computer, usually you have to go to the Start Menu, go to All Programs, and finally the Accessories Folder.  You should see Paint here.  Go ahead and open it up.  

When you're in Paint, do the following:
1.  At the top of the screen, click on the word, "Image."  A drop-down box will appear.
2. In this drop-down box, click "Attributes."  A small dialog box will then pop up as seen below.

Next to the word "Width" you will see a box with a number in it.  Whatever your "pixels wide" number was from your blog is what you will put in the Width box.  You can choose whatever you want for the Height box, I usually choose about 250.

Finally, make sure that under the word Units, Pixels and Colors are chosen and not the other ones.  I've highlighted them in red above.  

Now you're ready to make your own Title.  

Making your Title
To make a simple title, you can leave the background white (so it will blend into the rest of the body of your blog) and type your blog's title in a fancy font and color.  Just click whatever color you want to use at the top, then click the little "A" button on the top left-hand corner of your screen and type.  Don't forget that you can always go to "Edit" and click "Undo" if you don't like something you just did.  

You can also find clip art via Microsoft Office Online or on Teachers Pay Teachers or Etsy or any number of websites to add to your title.  

When you've got it looking like you want it to, go to File, and SAVE AS.  This is an important step!  Make sure that when that Save As dialog box pops up, that you make sure the Save As box at the bottom says "JPEG."  This means it is saving the image you just created as a picture.  This way it will be able to be recognized on your blog.  I've highlighted the Save As JPEG in green below.  If yours doesn't say JPEG, click the down arrow to the right and find JPEG.

**Another way to spice up your title is to go to Shabby Blogs to their Header section.  Here you can download one of their Header images.  
-Save it to your computer.  
-Open up Paint.
-Click File, then Open. 
-Find wherever you saved your Header image from Shabby Blogs and click Open.
-From here, you can type your title on top of the image, add clip art, etc to your title and save it as a JPEG.  -Just follow all of the instructions above.  The only difference is that you have a background image! :)

How to Put Your Title on Your Blog
Go back to your Layout screen.  Once you are there, click on the little "Edit" link on the Header Gadget.  The Header Gadget is highlighted in yellow and the Edit link is highlighted in red below.

That same small screen from before will pop up.  Where it says Image, the circle "from your computer" should be checked and then you will click on the Choose File button highlighted in Red below.  Find your Title JPEG you just created in Paint and click "Open."  After it appears in your pop-up box, click the orange Save button at the bottom.  Your final step is to click on Save Arrangement at the top of they Layout box.

There Ya Go!!! :) You've got yourself a custom Title that rocks!! :)

Creating Buttons
This is not really necessary...but I love to do it! :)  On this blog, my buttons are on the left side.  They say:  Home, About the Real Teachr, etc.  If you don't want to go to all of the work of making buttons to link your pages to, you can just use a Link List instead.  

To Make a Link List For Your Pages:
Go to your Dashboard.  Click on Layout, then wherever you want your Link List to appear, click "Add a Gadget," and then find "Link List" on the pop-up dialog box.  If you need more in-depth directions on how to do this, visit this post. If you are using a Link List to link your pages to on the sidebar of your blog, you will just need to go to each specific page, and copy the web address at the top.

However, if you want to make your blog look even more like a website, and look way more fun, create ya some buttons! :) 

Creating Buttons to Link Your Pages to Your Blog:
First, you need to find out what size your buttons need to be.  Go to the Layout screen.  Click on Add a Gadget on your sidebar and choose Picture.  

When the dialog box pops up, look toward the bottom of the box to find where it says "image will be shrunk to ______ pixels wide."  Write down or remember this number. 

Open up Paint.  

Now go back up to the middle of this post and follow the directions for making your buttons a certain size in Paint using the "Attributes" tab.  

Once you've gotten your button size right, create your button the same way you did your title.  Use the "A" text button and the color buttons at the top of the screen.  When you've finished creating your buttons, remember to click SAVE AS and make sure it says JPEG at the bottom.  

How to Put Your Buttons on Your Blog
Go back to the Layout screen and click on Add a Gadget on your sidebar.  Click on "Picture."  The screenshot above will appear again.  In the LINK section, put your page's web address.  Then beside the word Image, click on "Choose File," and find the button for that page.  When the image appears, click Save.  Below is what it should look like:

Finally, when you get back to the Layout screen, click Save Arrangement at the top.  To put another button on your blog, just repeat the same directions above.  If your buttons are out of order, you can click and drag them into order on the Layout screen.  Don't forget to click Save Arrangement at the top when you are done.  

Notice in the image above that I do NOT put a title or caption on each picture button.  If you do that, those words will show up on your blog as well... and I only want the button to show up.  This is your call.  But for me, it looks more streamlined and more like a website to just use the picture button with the link.  

Ok... so I kind of feel like I've been all over the place here today... I hope this was helpful and you were able to follow my directions! :) 

Below, is an example of a button I created on Paint.  You can use this idea to create your own buttons or come up with an idea of your own! :) Have fun and be creative! :)

To create the button above, I just used the paint bucket tool in red for the background.  Then I choose the white color from the choices at the top of the screen.  I clicked on the square tool, and then chose the third type of square (highlighted in blue below).  Then finally I choose black and then the "A" text tool and typed the word Reading.  Finally I saved it as a JPEG!  Finished! :) A simple and easy button to spice it up! :)

Join us tomorrow for the final blog post on creating your classroom blog, Part 6- {Posting and How to Use Your Blog}.  Hope you have a wonderful day! :) 

Later taters,