Blogger.com Help – Lesson 17 – Page Elements Layout (Part 1)

The page elements layout administration page in Blogger allows you to add widgets to your Blogger blog, as well as position them. When you look at this page, you’ll see what’s known in the IT world as a wire-frame of your site. A wire-frame is nothing more than a generic layout that describes the sections of your site. I might be reasonable safe in saying that if you are reading this, not only do you have a Blogger blog, but you might have also spent quite a bit of time playing around on this particular page.

In this lesson we’ll take a look at each section that I have on the Views On Life blog. If your template does not look exactly like what I present here, that’s probably going to be ok. You see, most of us will have a header, body, sidebar and footer sections in our templates. If you have additional sections, that’s great. You’ll simply need to apply the same logic to your ‘extended’ section as I do here for the standard sections.

I am also going to break this particular lesson into several posts in an effort to not make a post that looks more like a book.

Note to new visitors! If you would like to know more about this series or view all available lessons, just follow the appropriate link.

Add and Arrange Page Elements

To start off, we should take a look at the page in its entirety.

1. The three buttons at the top of the graphic allow you to preview your changes, clear your changes since your last save, or save any changes you might have made, respectively. It’s worth noting here that whenever you make a change you should preview your changes first before clicking save. However, some changes will be done immediately. You can tell by looking at any message that might be displayed immediately above and center of section 1. The message will look like this:
   
   When you see this message, you don’t need to save your changes, they were already saved for you. What you need to do instead is quickly check that your changes are looking how you intended on your blog! This immediate change to your live blog will force you to be on your toes when making changes, so make sure you’re fueled up on coffee before you make those changes.
   
2. I believe we all pretty much know what the navbar is, and I don’t need to explain it. You can however change the color of the navbar to better fit your blogs color scheme by clicking the edit button. Alternatively, you can get rid of it altogether by adding a little CSS code bit into the right spot in your template. If you would like to remove it, like I have for the Views On Life blog, a great walk-through can be found here. Please keep in mind though, that once you hide your Navbar, you will need to type www.blogger.com to reach your administration pages. You will no long be able to reach your dashboard from your site. Why, you just hid the bar that has the link to your dashboard silly!
   
3. Clicking Edit in the header area will pop open a new window with the following inside:
   From here, you can change your blogs title and/or description. This is the same as if you went to the Basic Settings page and changed your title and description there.

   You can also see that I was able to make a link in the description as well. Basic HTML is allowed here.

   You can also change the background image if you like by uploading an image from your system to Blogger, or by referring to an existing image on the Internet by way of URL. If you would still like the title and description to be shown on top of the graphic, simply select ‘Behind title and description’. If you don’t want the title and description to show, simply choose the ‘Instead of title and description’. You might want to do this if the graphic you are uploading or referring to contains the text already.

   Keep in mind that the header area is normally covering your entire blogs header. Normally. I say ‘normally’ (yes, I know, that’s three times now) because each persons template can be different. You may or may not want to have the graphic shrunk to fit the existing width of your header. Checking the checkbox ‘Shrink to fit’ will do that for you.

   Finally, clicking save will put your changes into action.

Make a Sandbox

I cannot encourage everyone enough how important and beneficial it will be to you as a Blogger.com Blogger (ok, that just sounds funny) to create a secondary blog that models your current blog. Not only does it define a sandbox for you to play around in and try new things out, but it will keep your real blog alive and well.

You don’t need to advertise that you have a sandbox blog. In fact, you can hide it from the entire world if you want, or only share it with those you want to.

The upcoming posts will be focused entirely on templates in blogger; how to use them, change them and understanding what’s going on under the hood.

You might also enjoy these related posts

1. Blogger.com Help – Lesson 17 – Page Elements Layout (Part 2) Due to this lesson potentially turning into a novel, I decided to split it into two parts. The first part covered the page elements layout navbar and header sections. In...
2. Blogger.com Help – Lesson 19 – Edit HTML Layout There will come a time for those that really get into using Blogger that they’ll want to modify and manipulate their blogger template to do things a little differently than...
3. Blogger.com Help – Lesson 20 – Pick New Template Layout Using the Blogger interface to pick a new template layout couldn’t be any more simple.  This page is by far the easiest to understand, and perhaps one you might never...
4. Blogger.com Help – Lesson 8 – Basic Settings The basic settings tab provides you a certain amount of control over your blog. While you may not have full control, there are enough mechanisms put in place to allow...
5. Blogger.com Help – Lesson 18 – Fonts and Colors Fonts and colors. Aside from graphics, fonts and colors are all a web site is made up of right? Blogger provides this administration page to give you the ability to...