How to structure and design a website on blogger

This post is a continuation of How to build a small business website with blogger - for business owners where you learned:

• What a small business website is all about, and 
• Had a basic understanding of the blogger platform

What you are going to do here is to create a Blogger blog, and customize it to obtain the skeleton for a small business website.

Here is how:

Select column structure and site design 

• Sign in at blogger.com 
• On the dashboard, click on create new blog on the left column and fillout the form that appears with your business information. Note that the address may not be found. This means someone else is using the subdomain name you wanted, so try other alternatives to obtain an available name. You can not edit this name afterwards. 
• Also, just proceed with the instructions here even if you have a personalized domain name that you wanted to use. You will learn how to use your custom dommain in place of a blogger sub domain in this post. The form looks something like image below

• For the purpose of this tutorial, select the "Simple" template
• Click on Create blog to create the blog 
• You should obtain a screen that looks like in the image below
• Click on view blog on the left column of the dashbard to see how it looks on the web

Next lets choose a site structure. Essentially deciding how many columns the website should have, and the overall skeletal design of the site.

If you have noticed, as we advance step by step, we are exploring the various features that Blogger offers to publishers and web designers. To change the overall design of the site, proceed as below:

• Click on "Theme" then on "Customize"

• Click on Layout on the left
• Select the 2 column design for the body and the 3 column design for the footer of the website as shown in the image below. Do not bother about the header as yet, I will come to that.

• Save changes by clicking Apply to Blog on the top right hand. You can also view what the website looks like at this stage.

Removing/hidding unwanted page elements

This is the single most crutial step in the process of making your blogger blog look and feel like a website. The image below is the look so far. After removing/hidding some unwanted page elements the blog will have the look of a website.

Lets start hidding the page elements:

Removing top navbar in blogger

There are many ways in which you can do this but the method am going to share here ensures that you do minimal alterations to the underlying template code as mush as possible. So, to remove the navbar above,  click on layout on the left column of the dashboard then click on Edit link on the Navbar element.

Now, scroll down and select off to turn of the display of the Navbar

Then to hide the space previously occupied by the navbar, go to the Advanced CSS code editor and copy paste the following code into it.

body .navbar {height:0px;}

Hidding Static page name in blogger

To continue improving on the website, we need to hide page names. This is because when a static page is created, the page name would be displayed on the page which does not make it look good. Add the following piece of code to the Advanced CSS editor to hide static page names from displaying and only allow for the link to these pages to be viewable. 

#blog-pager { display:none;height:0px;}

Remove Subscribe to posts atom in blogger

This feature is good for a blog that is frequently being updated and not for a website. It allows readers to easily subscribe to posts from the blog. This feature will be useful when designing our website Blog page. To remove subscribe to posts atom, copy paste the following code in the Advanced CSS editor.

.feed-links {display:none;height:0px;}

Remove Attribution in blogger

Attribution is the part that reads Powered by Blogger. In my opinion you should leave this there else it does not pose any compliance issue as yet, so you can remove it by pasting the below code in the Advanced CSS editor. 

#Attribution1 {display:none;height:0px;}

Remove share buttons on static pages

This is a set of buttons that allow for sharing web content on social media. It does not make the website look good, so we have to remove it. 

• Go to layout, look for Main gadget and click on Edit
• Look for share buttons on the popup window and uncheck the check box next to it

Remove About me gadget

Looking at the website now, you will notice there is a section that carried information about your Google account. Go to layout on the dashboard and look for about me gadget. Click on Edit and then on the remove button. 

Add a footer section

Lets add a gadget to the footer section. Typically this is where coy right information about your website fits best. 

• Go to layout on the dashboard
• Scroll down to the bottom of the page and click on Add gadget on the Footer-1 section
• Look for HTML/JavaScript and click on the plus sign next to it
• Leave the title field blank and rather paste the following code into the content field

<p>&copy; 2018 <a href="http://www.sufusolutions.blogspot.com" style="color:#000000;font-weight:bold;">Small Business Website</a></p>

Ouf!!! you've done a great chunk of the work on restructuring the website which should look like the image here below. It seems blank or structureless but that is good news because it shows how well you followed the instructions.

The structured website

The Next:

Designing the home page for a small business website on blogger