Layouts and Templates in Blogger / Tech Help For Bloggers Series

Welcome to the fifth installment of the Tech Help for Bloggers Series. This series is focused on providing technical tips and advice to help you understand and get the most out of your blogging experience. Here is the schedule of posts:

• July 1       Getting Started / Intro to HTML
• July 4       Sprucing Up Your Site Part 1 / Blog and social media buttons
• July 8       Sprucing Up Your Site Part 2 / Creating pages and navigation bars
• July 15     Getting to Know the Settings in Blogger / Your blog, behind the scenes
• July 22     Layouts and Templates in Blogger / How to change your blog's look
• July 26     CSS and Web Fonts / How to use custom fonts for your blog
• July 29     Organizing Events / Creating forms, polls, and sharable documents
• Aug 1       Hosting A Linky Party / Guest Post w/ Laura of TGIFF! and Quokka Quilts
• Aug 5       Pinterest and Flickr / Features for managing image sharing
• Aug 12     Giveaways / Technical tips and tricks for hosting a successful giveaway

Today we are looking more closely at the Layout and Template options in Blogger. 

----------------------------------------------------------------------------------------------------------

The Layout and Template menus are the places where you basically control the organization and structure for your blog, both aesthetically and functionally. Many of the best designed blogs utilize a clean layout and a cohesive visual style (fonts, colors, etc...) resulting in a nice looking and well organized blog. Luckily Blogger makes achieving this easier by providing a fully interactive layout and template interface where you can quickly shift around elements of your blog (like buttons and navigation bars) while also changing color schemes and fonts easily. Let's take a look at the layout menu first.

The layout menu is a fun place to play. : ) Here you'll find a "drag and drop" style interface that allows you to simply move elements of your blog around intuitively with your mouse. You can also add gadgets here (like navigation bars, buttons, and RSS feed subscription links) and manage the settings of those gadgets. 

Pop-up Gadgets Menu

My blog is organized into essentially three columns--a right and left sidebar and a posting area in the middle--plus a header and a footer. In the layout menu, the gadgets and tools in each column can easily be organized and reconfigured. I can also swap gadgets between columns if I like by simply clicking on the gadget, dragging it to where I want it to go, and dropping it in place. Pretty easy huh? : ) 

The Template menu is also a fun place to try new things. You can access the Template Designer tool by clicking on "Template" in the left hand menu and then selecting "Customize".

This will take you to a whole new design space, with lots of tools to help you manage the look and structure of your blog. Here you can select the basic template that you would like your blog to work from, sort of like the underlying structure that you want to start with. There are lots of different options that you can test out. The nice part about this design tool is that unless you click "Apply to Blog" you can audition as many different style options as you like without changing your actual blog template.

You can also change your blog background and overall color scheme with this tool. There are options to use a preselected image as a background or to upload your own as I have done. All of these changes can be previewed in the window below to make sure you like what you see before applying them to your blog.

You can also fine-tune the widths of each of the columns in your blog; both the right and left sidebars as well as the entire width of your blog in pixels.

Finally, there is a quick way to adjust the layout of you blog according to where you would like your sidebars and posting area to be located, how many sidebars you would like, and how those areas should be configured. There are a number of options to choose from here as well. With this tool, the familiar layout interface will appear to show your changes, making it easy to tell how adjusting your blog layout may effect your existing gadgets and bars.

But let's say you prefer to change some of these options individually, according to each element. Maybe you would like more of a selection when it comes to color scheme, fonts, and general layout. Perhaps you like some of the elements of your basic template, but you'd like to change a few others. The advanced menu is where you can tweak all of these things and really customize your template to make it more your own. 

Here you can adjust the font, font size, and color of a number of different text elements on your blog. You can also manually choose the colors that you would like for your background and page elements such as borders and boxes. The formatting changes are generally highlighted by a red marquee box that  quickly shows you which element you are changing. You can play with all of these settings as much as you like without making any alterations to your existing blog template. When you have found a style that you like and are ready to commit to those changes, simply click "Apply to Blog" to save.

At some point you may even want to have more control over your blog's style and be able to have greater customization of your template. In the Advanced menu you will find an easy way to begin to do just that. The "Add CSS" tool allows you to be able to write your own CSS code to manually change the look (color, fonts, layout) of your blog template. 

CSS (Cascading Style Sheets) is a complimentary code language to HTML that defines how your HTML components should look (where as HTML could be described as controlling how your website should be structured). Basically, CSS defines formatting. Once you have become fairly comfortable with writing basic HTML and have gained a good understanding of how to read through and pick out specific tags from the code of your blog template, this area of the Blogger Template Designer tool can be a quick and easy way to add in detailed formatting options without needing go into and manually change the actual HTML code of your blog. It really is easier than you may think! 

If you would like to learn more about CSS and how you can use it for your blog design, feel free to check out the excellent CSS tutorial and resources located at W3 Schools. Google also has some info on how to use the Add CSS tool and tips on how to use CSS to make simple changes to your template.