We now get to the fun aspect of the blog creation process which is creating the actual design of your website.
To get to the Design tab, login to your account dashboard and click on the
“Design” link that corresponds with
Before I go into the steps proper, let us first see what the Frontend currently looks like. Click on “View Blog”.
What you see is the frontend of your blog. This is what other people will see when they type your web address into the
which, as we remember, is the home page.
Take note that the icons that look like spanners can also be used to e different portions of the page. This spanner icon is only visible to you because you are logged in.
Online Business e-Lectures. Register at: www.NG44.com/freecourse
The Design Tab
We now get to the fun aspect of the blog creation process which is creating your website.
To get to the Design tab, login to your account dashboard and click on the that corresponds with your new blog:
go into the steps proper, let us first see what the Frontend currently looks like. Click on “View Blog”.
is the frontend of your blog. This is what other people will see when they type your web address into their computer. This is the first page which, as we remember, is the home page.
Take note that the icons that look like spanners can also be used to e different portions of the page. This spanner icon is only visible to you because you are logged in.
www.NG44.com/freecourse
We now get to the fun aspect of the blog creation process which is creating
To get to the Design tab, login to your account dashboard and click on the
go into the steps proper, let us first see what the Frontend currently
is the frontend of your blog. This is what other people will see computer. This is the first page
Take note that the icons that look like spanners can also be used to edit different portions of the page. This spanner icon is only visible to you
Get Free Online Business e-Lectures. Register at: www.NG44.com/freecourse
There are no posts yet so we don’t really see much on the page:
What we shall do in this chapter is to look at how to modify the frontend to get the desired design that we want. This can be done from the Design tab.
Click on the “Design” tab:
And we see this:
Get Free Online Business e-Lectures. Register at: www.NG44.com/freecourse
What you are now looking at is called the Page layout. It is like the skeleton of the page. It shows the various elements that will form the general design and layout of the pages on your blog. Every page of your website will follow this general structure.
As you can see, the page layout is divided into different segments or zones.
Each of these zones actually corresponds to similar areas on the frontend.
The zones and their various contents make up what are known as page elements. Page elements simply mean the various elements that make up a page structure.
With this kind of arrangement, it is very easy for us to add items to each zone or remove items. Compare both views of your page. Try to identify the elements on the page skeleton where they appear on the Frontend.
You need to do this to help you understand how Blogger pages are structured because this will help you to really understand what you are doing during the design process.
Frontend view:
Get Free Online Business e-Lectures. Register at: www.NG44.com/freecourse
Backend view:
Get Free Online Business e-Lectures. Register at: www.NG44.com/freecourse
In the preceding pictures, I have shown both views one after the other so that you can easily compare them. In the frontend view, I have marked out and numbered the main zones which are:
1. Header zone, 2. Left column (or body), 3. Footer zone and 4. Right column
This type of layout is known as two-column (i.e. the left and right column).
Each of the zones contains page elements. Later on we shall look at other types of page structures but let us first take a closer look at the zones and page elements.
Look closely at the page layout structure and you will notice that it is made up of boxes and rectangles. Look even more closely and you will notice that there are two types of these rectangles in the picture. One type is drawn with a dotted line and the other type is drawn with a solid line.
Also notice that the boxes with the dotted lines contain the words “Add a Gadget”. A gadget in Blogger is just a way of adding various additional functions and effects to your blog.
There are various types of gadgets that can help you add different things to your blog page structure. Some gadgets have already been added
automatically and these are the boxes that are made up of a solid border.
In the picture above, the boxes labelled “Followers”, “Blog Archive” and
“About Me” are all different types of gadgets. A gadget can be added and
Get Free Online Business e-Lectures. Register at: www.NG44.com/freecourse
removed at any time. You can also place gadgets inside any of the zones of the page and move it about as you like. Later we shall come back to gadgets but let us look at something else first.
Let us look at how we can change the layout, colours, general visual look and other parameters of the frontend.
We can do this from the template designer so click on it.
This takes us to the template designer utility:
The template designer is a very simple but powerful tool that is at the heart of Blogger’s design process. If you want to be able to create beautiful and
Get Free Online Business e-Lectures. Register at: www.NG44.com/freecourse
powerful looking websites with blogger then you must pay special attention to this section as I explain how the designer works.
You will notice that the screen has been split into two parts, the upper part and the lower part. The upper part is where you select various designs and make the various modifications while the lower part shows a preview of what the frontend will look like after the modifications have been applied. To view a full page version of the preview, Click on “Expand Preview” as shown below:
As you make changes to your blog template design, you can instantly see what it would look like on the frontend. The upper part is where all the action takes place so let us look closer at it.
On the left hand side you can find various sub-links: Templates, Background, Layout and Advanced. Within these sublinks are further options that enable you to make fine grained changes to your design. We will look at each sub-link one by one. Right now we are currently on the “Templates” sub-sub-link where we can see some designs.
A template is the general design that you can apply to your blog. The row of big boxes at the top contains the various designs or templates available. The first big box with the caption “Live on Blog” is the current template that is active on your blog at the moment.
Get Free Online Business e-Lectures. Register at: www.NG44.com/freecourse
To the right of the “Live on Blog” box are four other boxes. These are some of the templates that are available. Click on the right arrow after the last box to reveal even more templates.
When you click on any of the boxes, you find yet another row of smaller boxes below it. With these smaller boxes you can select various colour schemes for the theme.
Now click on each box and notice how the preview on the lower part of the screen changes. If you are on a slow connection, the preview may take a few seconds to load so be patient.
You can now see that the template designer provides you with infinite choices and possibilities for styling your blog, but that is just the tip of the iceberg.
Like I mentioned earlier, the template designer is a very powerful utility that allows you to make very extensive modifications to the way your website looks.
Get Free Online Business e-Lectures. Register at: www.NG44.com/freecourse
Templates that are light in colour are known to work best when you want to use advertising on the website to make money. So if you are designing a website that you wish to use an advertising program such as AdSense on, go for the lighter colours and simpler designs. Do not use a background image and let your outer background always be white or light in colour.
Too many pictures and images on a page tend to distract visitors from the adverts. In my experience, I’ve found out that a white background works best for me. When you are designing a website for purposes other than making money with AdSense (maybe like for a company), then you can use background images and colours.
As mentioned earlier, using Adsense and other methods to make money with a blog is not discussed in this guide. If you will like to learn how to make money online with blogs and other methods, we have explained it in great detail in our e-Tutor package. We are currently running a special bonanza right now so if you are lucky you might still be able to get this ebook package at one-third the normal price. To learn more, visit www.ng44.com/ebiz
Moving forward, the main actions that we are going to perform now are to select any theme, remove the background image (if any) and change the outer background colour to white. As we make changes to the design, we are able to see a preview of what our blog will look like if we apply that design.
Let us now start by selecting any template. We’ll use the “Watermark”
template for this example. Click on the template and under the sub design options, select the last one on the right.
Get Free Online Business e-Lectures. Register at: www.NG44.com/freecourse
Now you can see that your preview has changed. If the preview does not change immediately, you need to wait for a few seconds because your internet connection is probably slow.
Next we click on “Background” from the left menu to view options for the background.
This template currently has a pink background image. Click on the pink box under “Background Image” and the below screen pops up. Blogger provides a very rich gallery of background images that we can use for our blog. You also have the ability to upload an image from your PC.
However, remember we said that we don’t want to use any background image so we click on the blue “Cancel” Button to return to the previous
screen, then we click “Remove image” and if a message asks you if you want to remove the image, click “OK”:
Get Free Online Business e-Lectures. Register at: www.NG44.com/freecourse
Now you can see under “Background Image” we now have “None” and the colour has changed to red. You can also see that the preview background is now also red. What this means is that you no longer have a background image but your background colour is red.
Remember also that we want a white background so we shall now change the background colour. To do this, click on the “Advanced” link on the left menu and then click on “Backgrounds”
Here we can see the red colour under Outer background and also the Footer Background is pink. The numbers beside the colours are the computer codes associated with those colours.
View the entire preview to see where the red and pink colours are, then come back here so that we can change the colours. To change a colour, click on the coloured box and select the colour that you want from the colour palette that shows up.
Get Free Online Business e-Lectures. Register at: www.NG44.com/freecourse
To change the colour, you can also click on any of the small preset colour boxes under “Colours from this template” and “Suggested colours”
Select colour white and notice that the preview has changed again to reflect this new change:
You can see that the blog title is now very faint and that your description is no longer visible. The reason for this is that both the blog title and
description are white in colour so they will not be very visible because we
Get Free Online Business e-Lectures. Register at: www.NG44.com/freecourse
have changed our background colour to white also. To remedy this, we must change the colour of the title and description. Click on “Blog Title”
You can see various settings for the title and description. The font means the style of writing. Change the title colour and Description colour to something darker e.g. black or gray, then try different font styles and sizes to see what they look like.
Note: The sub-links under the different links on the left hand of the screen (especially Advanced) contain a lot of options for customizing various aspects of your design so I suggest that you play around with them and see what they do.
The red dotted lines in the preview demarcate the area that is currently being modified. When you’ve made your selection, click on “Apply to Blog” to
activate it for your blog.
Get Free Online Business e-Lectures. Register at: www.NG44.com/freecourse
Sometimes when you try to go to a different page or to change to a new template without saving the one that you have modified, you may get a warning message.
Or
If you see any of these warnings and you want to save the changes that you’ve already made, click on “Cancel” and then save the changes by clicking on “Apply to Blog”. But if you don’t want to save the modifications that you have made, click on “OK” to move on to the new page without saving.
Get Free Online Business e-Lectures. Register at: www.NG44.com/freecourse The Page Layout and Page Elements
The way the various sections and items are arranged on the blog is known as the “Page layout”. To configure this aspect, click on the Layout sub-link on the menu. Here we can see the various possible layouts available for our blog. Remember the layout is the skeletal structure of our blog. Currently we have a two column layout. We shall change this to a three-column layout Notice that our website www.latestnigerianjobs.com also has a three-column layout (because this is one of the best layouts that brings the most revenue from advertising).
Click on the three column layout and notice how the preview in the lower part changes and is now looking slightly different. Now we have a left hand
column, a middle column and a right hand column:
Get Free Online Business e-Lectures. Register at: www.NG44.com/freecourse
To save any changes you make in the template designer, click on “Apply to Blog” and wait for the confirmatory message:
Now we have activated a three column layout for your blog. To exit from the Template designer, click on “Back to Blogger”
Get Free Online Business e-Lectures. Register at: www.NG44.com/freecourse Blogger Custom Templates
What I have explained in this chapter are just the most basic methods and settings for using the Blogger template designer. The tutorial in this guide creates a very basic blog with a simple design. Because of the wide variety of design options
available from the template designer, it is not possible to cover every possible option so it is left for you to research and experiment with your designs to find out what will work best for you.
Generally, simple plain websites without too much gadgets and intrusive images coupled with a white background are known to generate better click rates and higher revenues than sites packed full with gadgets, pictures and colours.
Blogger also allows you to use outside templates which are not part of the inbuilt templates available in the template designer. These custom templates are designed by other people and made available for use with Blogger. Some are free while some are not.
To learn how to install a custom template, watch this video:
http://www.bloggerblogtemplates.com/2009/01/how-to-upload-custom-blogger-template.html . To learn more about custom blogger templates by exploring this Google search results page:
http://www.google.com/search?q=blogger+custom+templates