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


22 comments:

  1. Pretty blog, so many ideas in a single site, thanks for the informative article, keep updating more article.
    Webdesining course in chennai

    ReplyDelete
    Replies
    1. I have read your article, it is very informative and helpful for me.I admire the valuable information you offer in your articles. Thanks for posting it.
      Tangki Panel

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Very nice article, I enjoyed reading your post, very nice share, I want to twit this to my followers. Thanks!. link building email templates

    ReplyDelete
  4. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress development company in Chennai

    ReplyDelete
  5. Pretty blog, so many ideas in a single site, thanks for the informative article, keep updating more article.
    logo design company chennai

    ReplyDelete
  6. I am happy to find this post Very useful for me, as it contains lot of information. I Always prefer to read The Quality and glad I found this thing in you post. Thanks buy seo backlinks

    ReplyDelete
  7. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress development company in Chennai

    ReplyDelete
  8. web design service is obviously not giving the guests with another plain bit of content.

    ReplyDelete
  9. This is a very amazing post for cheap web hosting services. in this post, you have provided all the basic information regarding.

    website builder for reseller

    ReplyDelete
  10. Comfortabl y, the post is really the freshest on that deserving topic. I harmonise with your conclusions and definitely will thirstily look forward to your next updates.

    private label website builder

    ReplyDelete
  11. Thank you for the link building list.I am going jot down this because it will help me a lot.Great blog! Please keep on posting such blog.

    white label website builder

    ReplyDelete
  12. Impressive piece of writing. We at Urban Kreative love website design. We offer the best web design services in Kenya and the rest of East African Countries. If you are looking for a web design company in Kenya to pattern with on website design and development then Urban Kreative are the right people to partner with. With years of experience, Urban Kreative has managed to design hundreds of websites, for clients from far and wide. We look forward to working with you. KEEP UP THE GREAT JOB!!!

    ReplyDelete
  13. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress website development Chennai

    ReplyDelete
  14. Are you having a business? Planning to design a website for it? Yes, you have taken the right decision. A business is incomplete without the website.NJ Website Design | #1 New Jersey's Web Design Company - Wowbix

    ReplyDelete
  15. Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with extra information? It is extremely helpful for me. web designers

    ReplyDelete
  16. A very awesome blog post. We are really grateful for your blog post. You will find a lot of approaches after visiting your post. I was exactly searching for. Thanks for such post and please keep it up Redspider web and art design dubai

    ReplyDelete
  17. I really enjoyed reading this post, big fan. Keep up the good work andplease tell me when can you publish more articles or where can I read more on the subject? architecture

    ReplyDelete
  18. When most of the writers and authors are using Blogger as their blogging platform, this is indeed a nice and valuable guide. I must say that bloggers must read the post and customize their blogs as per their audience's interest.

    ReplyDelete
  19. Totally awesome posting! Loads of valuable data and motivation, both of which we all need!Relay welcome your work. weebly website creator

    ReplyDelete
  20. This is a nice and informative, containing all information and also has a great impact on the new technology. Thanks for sharing it
    website designing Service

    ReplyDelete

We all have different opinions and each and everyone's opinion counts. Please leave your opinion about this article in the comment box.