Tuesday, May 18, 2010

Blog Layout 101

I’m not an expert, but for those new to blogging from MQB, here are some of the things I’ve learned along the way about the layout of your blog.  Changing the look of your blog is easy.  It takes longer to find the right look than it does to change your blog. 

Blog design sources
When you are reading the blogs that you follow and find a blog layout that you like, look up in the upper left corner of the blog.  If that blogger has not done any custom design, you will often see the name of a website designer in the corner.  Below are several websites with free blog designs. 
http://fondossholy.blogspot.com/  (this one is in Spanish, but use the pictures to find what you want and copy/paste the code)

You can find more by Googling “blogger templates”   You are looking for something that says “free blogger backgrounds or free blogger templates”

To change the look of your blog, go to your blog Layout, and click on Pick New Template.  There are several to choose from.  Most of the free blog templates tell you to use the “Minima” template.  I’ve found that many of the blog designs will also work with the “Rounders” template, which is the template that I use.  I prefer this template for one main reason, and that is for the background of the text.  You’ll notice that many of the free templates have various designs or colors in the middle of the design.  Personally, I sometimes find it difficult to read a blog with pictures or other items running through the part that I need to read.  With the Rounders template, I get the look I want on both sides of the blog, but the middle of the blog is opaque, and so you don’t see the full blog template background.  I then change the colors on my template to match the sides of the blog.  If you do use a blog template with a background, make sure that you change the colors of the blog text so it is easy to read.

After you have picked your blog template, go to the page elements on the Layout tab.  You’ll see several sections to the blog layout. 

Header and Blog Post
Click on “edit” in the header section.  This is where you enter the name of your blog and a description about you and your blog.  You can also upload any picture and it will show at the top of your blog.  The picture of Redford that is currently on my blog is 800 x 600, which is a good size for a picture.  You don't want too big of a picture, and a much smaller picture will not fill the entire header area.  I checked the box, “shrink to fit” and I selected to have the picture behind the blog title.  Save it and click on view blog to see the results.  If you don’t like the picture, remove the picture and try again with another picture.  Also click on edit in the Blog Post section and check out your options there.

Gadgets are the way to add pictures, buttons, pretty blog templates, and just plain cool stuff!  Click on add gadget, and it will take you to a window with all kinds of choices.  Look around and see some of the cool gadgets that you can add to your blog.  You can add a picture, or a list of some sort like a UFO list or book list by clicking the + button next to the item.  Click the features or popular button in the upper left corner to see more gadgets.

Usually, when you add a template or button from another blog, you are going to use the choice of HTML/Java Script.  Don’t worry about technical computer language.  Most of the time you are just cutting and pasting script that someone else has already done.  Click the plus button next to this choice, and it will open up a box where you put your script.  You can give it a title (that will show up on your blog).  I don’t put a title on the blogger templates, and I usually drag them to the bottom of my gadgets so I know that the last gadget is my template.  Go to the free template site, find the template you want (I use the 2 column templates).  Underneath the template will be the code.  Highlight and copy (CTRL C) all of the code, and then go to your gadget layout box and paste (CTRL V) the code in the box, and then save and view your blog.  There are also usually instructions on the free blog template site on how to do this.  Read each site’s instructions for using their template—they are usually the same process, but some are slightly different.  Also, look around the sites for blog headers too.  If you don’t like what you did, just delete the gadget and try again! 

Fonts and Colors
Go to this section after you have your template and change the various colors of your background, header, side text, etc.  I usually change this up when I load a new template, especially if you go from a lighter color to a darker color template.  You want to make the blog easy on the eyes.  Some of us have “older eyes” than others, and a light background with dark text is usually easier to read than a dark background with light text.

Moving things around
Click and drag your gadgets up or down to get them where you want them.  You can check out to see how Molly dragged her “followers” to the top of her blog or check out Shirley's. cute blog.  Go ahead, play around.  You can’t hurt it.  Anything you do to the look of your blog can be changed back, and it won’t hurt your blog post.

Most of the sites do caution you to save a copy of your template before you make changes.  You can do this in the Edit HTML tab by clicking the download full template button.  That is mainly if you are going to fool with the code, which I don't recommend unless you know what you are doing..  If you are new to templates and don’t have any special programming, you can always just go back to the Pick New Template tab and select a new one.  Your font and colors may go away, but those are easy to restore.

There are some websites out there that will help you design a blog header.  I played around with one several months ago, and you can read about it here.

Well, I hope this gives you some help on making your blog pretty.  Do be careful, though, not to load too much on your blog as it will bog it down and take longer to load.  I expect to see some new blog layouts, and if you leave me a comment, make sure your email is set up so I can reply to you.  Send me an email if you have questions.  If some of you more experienced bloggers have more tips, feel free to leave more hints in the comments section.

One more tip.  The CTRL button is a very useful tool.  If you hold down the CTRL button while clicking on a link, it will open up the link in another window.  I use this all of the time so I can go back and forth between 2 or more windows.

Take care,


  1. Lots of great information in these past two posts. I learned a thing or two myself.
    Thanks for taking the time to write it all down.

  2. good info, I need to go back and re-read the last suggestion on photos, I still do them the hard way. cw

  3. This is great. I am going to print this information and get to work. Robin

  4. Thanks for posting this. I'm looking forward to seeing some of the MQB members here. I never would have thought to give them instructions so they don't have to flail around figuring it out like we all did.

  5. Like others I am trying to get back into my blog. Thanks for your posts with all the good instructions Bernie


Thank you taking the time to leave a comment and visiting my blog. I enjoy reading your comments.