How to Make a Professional Website on Blogger?
You are here:Home » Blogger Tricks » How to Make a Professional Website on Blogger?

How to Make a Professional Website on Blogger?


Blogger, even being one of the best blogger platforms on the web is not flexible enough to use it as a professional website. However, we can make it look like a professional website at least.

Generally a professional website should,
  1. Not have xxxx.blogspot.com in the URL.
  2. Not have blog posts area on the home page.
  3. Not have a different favicon.
  4. Have ‘about us’, ‘contact’ and ‘FAQ’(if needed) pages.
  5. Have a professional template.
Installing a professional template is not enough if you don’t take care about the above two issues.

Note: As I’m just going to focus on making a blogger blog look like a professional website in this article, I want you to mind that the functionality is never going to be changed or tweaked.

Before we begin, it is recommended to take backup of your current template as to avoid dealing with dead design issues in future.

Removing ‘blogspot’ extension in the URL

A professional website should contain its own domain name instead of an extension in the URL of it. No matter how good the website looks and how well the content is, the URL is what makes first impression on your site.

If you are looking forward for business connections through your website, it must have a high level domain, for e.g., www.example.com.

Hint: Businesses won’t connect to you that easy with an extension in the URL, for e.g., www.example.blogspot.com.

Removing ‘blogspot’ extension can be achieved by buying and mapping a domain to your blog.


Hiding blog posts on homepage

As said above, a professional website should not display blog posts on the home page. So, hiding them on home page is a good option.

To hide blog posts on homepage, go to Template > Edit HTML and search for the following code,

]]></b:skin>

and insert the following code right after it.

Hiding only ‘blog posts’ area:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.post, #blog-pager {display:none;}
</style>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
body#layout .sidebar {display:inline;margin-top:200px;}
</style>
</b:if>

If you don’t wanted the sidebars be loaded on the homepage and wanted it to look like a static landing-home-page, add the ‘sidebar’ classes from the above piece of code. After adding, the code will look like this:

Hiding ‘sidebars’ along with ‘blog posts’ area:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.post, .sidebar, .sidebar2, #blog-pager {display:none;}
</style>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
body#layout .sidebar {display:inline;margin-top:200px;}
</style>
</b:if>

Hint: ‘Sidebar classes’ would be seen with the names, sidebar-wrapper, sidebar and similar.

Save the template and check if it is working fine.

Changing the default favicon

A favicon on the title bar of the opened page in browser will also reflect a professional look on your blog. By default, a big ‘B’, representing ‘Blogger’ will be shown on the title bar of the page.

If you ignore changing it, you would regret and realize only after loosing some valuable business deals.


To change your favicon, go to Layout > Edit Favicon > Browse the favicon and Save. The favicon after changing would look like as shown in the following screenshot,

bloggr-amfastech-favicon

The ‘a’ icon and ‘B’ icon are the favicons of ‘Amfas Tech’ and ‘Blogger’ by default respectively.

Adding necessary pages

A professional website should have the following pages of information displayed on it.

An ‘About us’ page with the information of the owner, team and mission statement of the business or company.

A ‘Contact us’ page that allows the website visitors to contact the company to seek or offer business.

A ‘FAQ’ page to guide and provide information on the website regarding the necessary proceedings of their business deals. or other.

A ‘Policies’ page to provide your clients and customers the policy you are bound to.

A ’Services/Products’ page to display or showcase the portfolio of your work and skills to earn trust from your clients.


Installing a professional template

The design or template of the site is what that brings the site the professional look and everything else we discussed above are noticed later. When a visitor come to your website, it is the design that impresses him/her at first.

You can Google for professional templates on the internet or can design of your own. It might take sometime if you wish to design, but it would give an unique look of your website which helps also in branding.

I have tried to catch up some of the templates and you can take a look at them, select if you like any of them and then download and install.

Over to you

These are just a few things that have to be tweaked in order to make a professional website on blogger. There is a lot technical possibility if you are able to use HTML,CSS and JavaScript wisely.

Hope that helped! Please share your opinions on the article in comments.



0 comments:

Post a Comment

We're happy to read your thoughts and we'd try our level best to clear your queries if asked. Let's discuss it in a better way. Please don't spam and spoil the conversation :) Thank you!!