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,
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.
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.
To hide blog posts on homepage, go to Template > Edit HTML and search for the following code,
and insert the following code right after it.
Hiding only ‘blog posts’ area:
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:
Hint: ‘Sidebar classes’ would be seen with the names, sidebar-wrapper, sidebar and similar.
Save the template and check if it is working fine.
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,
The ‘a’ icon and ‘B’ icon are the favicons of ‘Amfas Tech’ and ‘Blogger’ by default respectively.
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.
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.
Hope that helped! Please share your opinions on the article in comments.
Generally a professional website should,
- Not have xxxx.blogspot.com in the URL.
- Not have blog posts area on the home page.
- Not have a different favicon.
- Have ‘about us’, ‘contact’ and ‘FAQ’(if needed) pages.
- Have a professional template.
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.
Before you buy a domain, make sure your domain seller offers servers with good uptime and have no DNS issues. Read this guide to learn how to choose a web hosting provider.
and
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>
<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>
<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.
Hint: A favicon is an small image file of length 19x19(preferably) and under 100KB size. A favicon generally would be the logo of the company or business.
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,
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.
Note: ‘Blogger’ allows you to create 20 static pages only. If you need pages more than 20, you may create an article and use it as a page by liking to its URL in the navigation menu.
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.
Post a Comment