In the first installment of this mini-series, we examined why you may like to use Blogger to build a website for your small business as opposed to creating an HTML based site from scratch. Blogger is a free service, which offers a powerful yet easy to use interface: since there are no costs for hosting a blog with Blogger, expenses are greatly reduced. Furthermore, a blog is much easier to update than a regular website, which ensures you can always make sure your pages are up-to-date and can even offer company news to potential clients for product updates and mroe.
Using examples of free Blogger templates, we delved into the possibilities of a professional business-like design and how certain template characteristics are more appropriate for a business based website than a regular blog.
For this second installment of “Building a Small Business Website with Blogger”, I’d like to offer some examples of how you can actually utilize Blogger to create important content for your site including:
- Creating important pages for your contact details, an about page, product pages and even maps
- Add easy-to-find links to these pages so potential customers can easily locate the information required
- Presenting company news on your site without cluttering up the landing page
Let’s begin by examining how Blogger pages function and how we can use this to our advantage in creating an effective and professional site for a small business.
How we can create “pages” for our site using Blogger posts
Unlike other blogging platforms, Blogger does not provide us with the means of actually creating “pages” (as opposed to “posts”) for our sites.
The difference between “pages” and regular “posts” in other platforms is essentially the URL:
- Pages would usually have a short URL such as www.yoursite.com/PageName
- Posts would generally include a date in the URL string, for example: www.yoursite.com/2009/02/28/name-of-post.html
Blogger only allows us to create posts for our blog, which all include a date string within the URL.
However, I would like to point out that few (if any) visitors truly notice the URL string of pages within a website. In my experience using Blogger to create business sites and portfolios, I have never received negative feedback from visitors regarding the URL strings of pages in my sites. It really does not matter if your URL is slightly longer and it will not affect the overall experience of using your site, especially if ensure visitors are easily able to navigate through the pages of your site!
To create pages in our Blogger blogs for the presentation of important information, all we need to do is create a new post. Blogger allows us to use a WYSIWYG editor (What You See Is What You Get) or to code our posts manually using HTML code by clicking the relevant tabs in the post editor page (switch between Rich Text and HTML). This feature allows us to have almost complete control over how the post will appear on live pages in our sites.
You should also give each page a title which is relevant to the content presented within the post. Be sure to include any important keywords near the beginning of your title as these keywords will then form part of the URL string for the page and assist in search optimisation for your site.
For most types of pages, the WYSIWYG editing format will be sufficient: we can use this to write general content, format text and add images according to our needs (such as an “About” page, product information and company values).
Other forms of pages may require us to use the HTML editor, for example: a contact form, maps and driving directions.
Let’s take a look at some different types of pages you may require for your small business site with some suggestions on how these may be presented effectively:
An “About” page
This is an essential page for any business website. An “About” page would explain to visitors and potential clients exactly what your business does, plus any other relevant information which could assert your business credentials.
It is easy to create an “about” page using the Rich Text version of the post editor. You can then add bold, italic and colored text as required; upload and position images, and format your information with ease.
A Contact page
Here is another essential page for any serious business based site: if you want to attract customers, you need to offer a means of contact to establish this business relationship.
Unless you intend for customers to contact you only by telephone or in person, you would need to edit the HTML of your post in order to create an effective contact page. While it is possible to simply type your business’ email address in the page, this could easily be picked up by spammers crawling the web for email addresses which would result in your inbox receiving truckloads of spam emails.
Instead, you should consider a different means of placing your email address in your contact page, such as a scrambled email link or a contact form. Once you have decided on this format, you will need to add the HTML code required for your email/contact form using the HTML section of the post editor.
Here are the most effective (and free) forms of creating a safe means of electronic contact on your site:
- Scramble your email address and create an email link which hides your actual email address from spam-bots
- Kontactr: a free contact form for your site (with seemingly no limitations on the amount of emails which can be sent).
- Zoho Creator: a fully featured form creator which you can use to create contact forms, questionairres, feedback, registration and much more! The limit for free forms is capped, though prices are relatively low for sites which require many forms to be received and processed.
- GrandCentral: a free Google service which allows you to receive voicemails through your blog.
With the exception of the email scrambler, these services will require you to register (for free, of course) and will provide you with choices to create your means of contact. Once you have built your form, you will be presented with the appropriate HTML code to copy and paste into your website.
To paste this into a post page, create a new post and add any other content as required. Then switch over to the Edit HTML tab, and paste the HTML code in your post where you would like the form to display. Then publish your post as normal.
If your business offers specific products or services which you would like to highlight in your site, you should consider adding pages specifically designed to showcase them.
For the most part, product pages could be created using Blogger’s rich text post editor. You can then write, format and add interesting images to your pages with ease.
However, there are several features which you may like to include in these product pages which would require editing the HTML code. For example:
- Add a video/screencast via YouTube to offer a more in-depth visual analysis of your product
- Include a slideshow generated by Flickr or Picasa
Again, after creating your feature, you will be presented with HTML code to paste into a page of your website. Be sure to switch over to the Edit HTML tab of your Blogger post editor to add these codes before publishing your post pages.
How to link to your important website pages
Once you have created some pages for your small business website, you will need a means of linking to these in a manner which is easy for visitors to find. Ease of navigation is a key aspect of an effective business website design as it helps visitors find the information required from their visit and ensures a stress-free experience to assist the business relationship.
Enable Post Pages in your Blogger Settings
Before you can actually use the posts you have created as “pages”, you need to be sure you have enabled the each post to have it’s own page in your Blogger settings.
This is usually enabled by default when you create a new blog, but to check (and adjust this setting if necessary), go to Settings>Archiving in your Blogger dashboard and ensure the “Enable Post Pages” setting is set to “Yes”.
Get the URLs of your post pages
The first step to creating these links is to acquire the URLs of the pages you have created. The easiest way to do this is to go to the Posting>Edit Posts tab in your Blogger dashboard. Here you will be presented with a list of the posts you have published to your blog, along with links to “Edit” or “View” these pages.
To get the URL for each page, right click on the “View” link next to the post you wish to link to. Your browser should then present you with a list of options, one of which is “Copy Link Location” (or similar). Use this option to copy the URL of your active post to your clipboard, then paste this into Notepad or a simple text editor for future use.
You can do this for each blog page you would like to provide a link to within your blog layout; add notes to explain where each page links to in your Notepad document if you have a lot of pages!
Making Navigation Links
Depending on the template you are using for your Blogger powered site, there may already be provision for navigational links in your template.
All of the free themes listed in the first part of this mini-series offer in-built navigation links for important pages of your blog. These provisions are hard-coded into the template (rather than being generated by a Link List widget). To add your links to these templates, locate the section of code in your template where the links should be added, and paste the URL for your blog pages in the specified area. Refer to the customization instructions of the template you are using for full details of where to paste your links.
If you use a template which does not have navigation built into the template, you could add these links using a Link List widget in your blog sidebar.
To do this, go to Layout>Page Elements in your Blogger dashboard and click on the area where you would like to add your links. Choose to add a new Link List widget which will bring up a screen like this:
Paste the URL of your page in the “New Site URL” section, and add a descriptive title for your link (eg: About Our Company) in the “New Site Name” section.
Repeat the process for the links you would like to add to this widget.
Once you have added more than one link to this list, you can reposition the link to appear higher up (or further down) in this list using the arrows to the left of your links.
Finally you can save these changes and see the active navigation widget appear in your Blogger template.
Note: it is advisable to position navigation links as high up in your blog design as possible. If you are using a Link List widget, drag this to the top of your sidebar in the Page Elements section of your dashboard to ensure it is clearly and easily visible to visitors of your site.
Add links to product pages as banners…
An effective way to showcase important products is to create a banner/image and link this to the appropriate page in your blog.
The simplest way to achieve this is by use of a Picture widget, added through the Page Elements section of your blog.
When configuring your image widget, you will be presented with the option to add a URL which your image will be linked to. Use this section to paste the URL of your blog page which you would like to link your banner to. It may also be useful to add a title (the name of your product?) and a caption (a brief explanation of your product) to the widget in order to make the banner link more effective and potentially clickable for new visitors.
How to present “news” without cluttering your landing page
Generally, blogs would display a summary or the entire content of recent posts on the home (landing) page. When using a blog as a business website, you may find that displaying new posts in this manner clutters the landing page and distracts attention away from important content and links to other important pages.
Instead, it is advisable to provide only headlines of news items on the home page which are linked to their appropriate pages. This declutters the home page ensuring attention is placed where it needs to be.
To display only the linked titles of recent posts on the homepage of your blog is relatively simple. You will need to edit the HTML code of your template in order to achieve this.
First, make a back-up of your existing template in case you make a mistake and need to restore a working copy of your template. To do this, go to the Layout>Edit HTML page of your blog and click on the “Download full template” link near the top of the page. Using this link will allow you to save a copy of your entire customized template to your computer’s hard-drive which can be used to restore your layout if necessary.
Next, tick the “Expand widget templates” box. The code we need to edit is within the Posts widget of your template and cannot be located unless this option is ticked.
Now locate the following section of code (or similar) using the search function of your browser:
<div class=’post-body entry-content’>
<div style=’clear: both;’/> <!– clear for photos floats –>
If you cannot find this exact section of code, try searching for <p><data:post.body/></p> instead.
Once you have found this section of code, replace it with the following:
<b:if cond=’data:blog.pageType == "item"’>
<div class=’post-body entry-content’>
<div style=’clear: both;’/> <!– clear for photos floats –>
The edited sections have been highlighted in bold: these additional lines of code ensure that the “post body” (the content of the post) is only displayed on the post page, not on search or archive pages.
To check if you have edited this section correctly, preview the changes to your template. You should now see that only the post titles and dates are displayed on your blog’s landing page while the body of the post remains hidden.
Once you are sure the template appears how you would like, you can save these changes to your layout.
Now you can add news to your Blogger driven website by creating a new post as normal; only the headlines of your posts will appear on the home page while the full content of your post will appear on these individual pages, linked to from the headlines for easy access.
An overview so far…
In this installment of “Building a small business website with Blogger”, we have looked at how to create pages for our business sites using Blogger’s inherent posts option. Different types of pages may require different formatting in order to be most effective: for example, it is useful to have a contact form on pages where contact details for your business are offered, while product pages may require the use of video to enhance the user’s experience.
Once pages have been created for important aspects of your business, we need a means for visitors to navigate and find the information required. By editing the template or adding links in a widget, we can provide visitors with a simple means of finding these pages.
Lastly we looked at a means of presenting new posts as news items and decluttering the home page. By presenting only post titles on the home page which are linked to their relevant posts of news items, we can transform the blog into a more professional and stylish site.
In the next installment of this mini-series, I’ll explain how to link your custom domain to your Blogger powered site, apply consistent branding and create a a means for site and product updates which even the most tech-novice visitor can use and understand.
I hope you have enjoyed this mini-series so far. Please feel free to leave your opinions and suggestions by leaving a comment below.