Wednesday, June 6, 2012

Classroom Blog Series- Part 2 {Setting Up Your Template}

Yesterday we talked about how to set up your blog and went over the Settings Tab.  If you missed that post and would like to find out more info or setting up your blog and/or the blog Settings, find the post HERE.

Today we are going to talk about the features of Blogger Templates, and also how to re-arrange the Layout of your blog.

First of all, log in to your blog.  To do this, all you have to do is go to Google Blogger and sign in.  Then click on your Blog Title, same as yesterday, and it will bring up your blog's Dashboard.  Once you are there, click on  the "Template" button on the bottom left-hand side of your Dashboard.  It is highlighted with a red box in the photo below.

Once you Click on that button, you should see the following screen:

From here, you can customize your own blog's template or you can scroll down and choose a new template from all of the small thumbnail pictures below.  Depending upon what you are using your blog for, you may want to choose a different template.  I usually use the template that we've already chosen, the "Simple" template.  It has worked well for me in the past and I like the look of it.  

Customizing Your Template

1.  Click on the orange Customize button under the "Live on Blog" box.  I've highlighted it in red in the screenshot below.

The top black and gray part is where you will choose your custom options.  Below the top section is your blog.  The customization will show up below as a preview.  This way you can try something, and if it doesn't look good to you, you can change it right away.

2. The first thing we will do is to click on the "Layout" link on the left-hand side at the top of the screen in the gray section (highlighted with a yellow box below). I always do this one first because it will affect everything else in your layout.  Once you've clicked on "Layout," you will chose which layout you would like for your blog.  Keep in mind you can always change it later if you don't like it.  

For a classroom blog, I prefer to use the second layout from the left on the top row (highlighted in yellow below), however this is just totally personal preference.  I prefer this one because all of my post content will be on the left of the screen and my links and buttons will be on the right side of the screen.  I think it flows well that way :).  After you've chosen the layout you would like, click on the orange "Apply to Blog" button in the top right corner before moving to the next step.  (Note:  If it won't let you click on the Apply to Blog button, then that means it already has your changes saved OR that you didn't make any changes.)

3.  The next thing we will do is click on the "Adjust Widths" link just above the Layout link.  I always adjust the widths BEFORE I choose a background to make sure that my background looks good with the blog width I've chosen.  Personally, I would leave the widths at the default settings, which for the layout above are 960 (Entire Blog) and 310 (Sidebar).  I do this because I want my background image to show through.  The larger the main space of your blog is, the less of the background you will see. If you want more room to type or more room (width-wise) on your sidebar, just slide the little slider guy on either one to bump up the width.  I've highlighted the slider in yellow in the screen shot below.  If you do move the sliders, don't forget to click the orange "Apply to Blog" button in the top right corner before moving to the next step.

4.  Finally, click on the "Background" link.  Right now, your background is the sky blue color you see in the photo above.  Your image or color will fill that blue space.  Now there are several things you can do to make your blog look pretty cool.  I suggest that you choose some sort of pattern or cool image for the background, as opposed to a plain color.  It really doesn't take that long to do! :)

**Note: feel free to use any of the options below to create your background.  A word of caution: something I've learned over the past 5 years of blogging is that when you use a third-party website for your background like Shabby Blogs or The Cutest Blog on the Block or any other websites, when someone pulls up your website, the background sometimes takes a little bit of time to load.  You also will have to use the blog widths they've designed their templates for.  However, they do have some really cute designs, so check them out to see if they are right for you! :) I used them successfully for several years, but finally decided to just use a "tile" image for my background instead.  This way if their website is down or loading slowly, my background isn't affected.  Also, if you use a tile image instead of a large image, it will always load quicker!

Definition of a "tile image" - a tile image is a small square image.  The computer or website (like Blogger) will copy that tile all over the background of your blog- very similar to the idea of a tile floor.  This way you don't have to have one huge image as your background, but a bunch of tiles together to create one image.  If it is a good tile image, it will SEAMLESSLY match up with the other tiles on the page to create one image with no weird lines or match-ups.  All of my background images below are seamless tile images.  You can also purchase tile images at many websites as well.  

Where to find patterns and images
You can do one of several things to make a cool blog background:
1.  You can use one of the standard patterns provided by Google Blogger.
2.  You can look at the bottom of this post for the link to the FREE background images that I've made for you to use.
3.  You can use another website like Shabby Blogs or The Cutest Blog on the Block to use a pre-made background.

I am going to show you how to create a background using any of the above choices.

1.  How to use the standard Google Blogger background images.
-Make sure you are on the "Background" page.
-Right click on the image you like, and Save Image As (then save it wherever you want to on your    
-Click in the blue box that says the word "none" underneath the words "Background Image."  I've highlighted it in yellow below.

-A small dialog-type box will pop up.  You can click on any of the squares in the main part of the box.  You can also choose from the different themes on the left-hand side of the box.  I've highlighted the themes in red below.

Below is a screenshot of what my background looked like when I choose the yellow background on the right from the above screenshot.  Note how it automatically changed the title color.  

Try as many different backgrounds as you want until you find the one you want to use.  When you are finished, don't forget to click "Apply to Blog."  And that's it! :)

2.  How to use my FREE background tile images at the bottom of this post.
-Make sure you are on the "Background" page.
-Right click on the image you like, and Save Image As (then save it wherever you want to on your    
-Click in the blue box that says the word "none" underneath the words "Background Image."  I've highlighted it in yellow below.

-A small dialog-type box will pop up.  It will say "Select Background Image" at the top.  You will choose the link that says "Upload Image" at the top left-hand corner of that box.  I've highlighted it in red below.

Then click "Choose File" and find where you saved your background image.  Right away, your new background tiled image should show up! :)  If you like it, click the orange "Done" button at the bottom right hand corner of that box.  If you want to see different backgrounds, try as many as you like until you find the one you want.  Remember- you can ALWAYS change any part of your blog at any time! So you are not stuck with anything! :)  Below is a screenshot of my background preview.  I changed it from the standard blue (in the 2nd photo above) to the Birds in Flight background image.

Make sure to click "Apply to Blog" when you are finished.  You're finished! :)

-After purchasing the image and saving it on your computer, you will do the same steps as you did in #2.  

3.  Using Shabby Blogs or The Cutest Blog on the Block.
Visit either Shabby Blogs or The Cutest Blog on the Block's website.  Find an image you like and follow the steps below.
For Shabby Blogs: 
-Click on Design at the top of the page.  Then click on Backgrounds.
-Click on the "Get the Code" button below the background you would like.
-Follow the Blogger Installation Instructions on the screen that pops up.
Below is a screenshot of what that should look like.

For the Cutest Blog on the Block:
-Click on Backgrounds, then Blogger. 
-Click on the picture of the background you like.
-Follow the directions on How to Apply this Background.  
Below is a screenshot of where to find the directions.

And that's it!! :) You are finally done! :) Man this post took a lot longer to create than I thought... so I am going to go over the Advanced tab for your template tomorrow along with your blog's Layout.  Below is the link to the FREE seamless tile images that I promised :) Enjoy! :)