How to Convert your blog into a Website

Blogs vs Websites

Some people are very happy to use Blogger to make a blog, that is, website that looks like a diary or journal that they write in regularly.

But a common question is "how to I make my blog into a real website, just like "someone" has done over at "this website"?

This isn't easy to answer:  Not everyone means the same thing when they say "real website".  "Someone" might have just changed the background image, installed a third-party template, changed a few settings - or re-written the entire Blogger template!  They may have just made the blog look more professional than the basic templates do - or maybe they've removing all "blog" features so that the site is like a regular brochure website.

The bottom-line is that, even with no changes a blog is a "real website", because it's got:

• An url (www.your-blog-name.blogspot.com)
• A space on the internet that's dedicated just to it. (For Blogger users, that space is inside Google's servers - we don't have to pay for our own hosting).
• Web-pages, made in HTML, which visitors can look at using a web-browser (eg Internet Explorer, Firefox, Chrome, Safari, etc)

And there are some sites which are large, very popular and not at all ashamed to look like blogs, for example:

• www.IkeaHackers.net/ - a site for sharing clever ways of repurposing kitset furniture
• www.DarkRoastedBlend.com - a site about coffee - notice their About page is really just a post from 2005!
• www.HowAboutOrange.blogspot.com - a very stylish crafts website
• www.RUStling.org - a site listing all the songs in a large folk-song book

This article from Blogger Buster lists a 100 others - and I'm sure that there are plenty of popular non-English language sites that look like blogs, too.


But there are many other sites that have had some or all of their Blogger features hidden, for example

• www.GalwayTransport.info - a local public transport information site
• www.ConcentricsRestaurants.com/ - a promotional site for a company that builds restaurants
• www.RenewPilates.com - the site for a Pilates studio

You need to do more work to make the second type of site - and even then, if a knowledgeable visitor looks at the source-code for a page, they can still tell that you're using Blogger.   So, usually, I'd recommend that you focus on what you want to achieve with the site, rather than "getting rid of blogger".

That said, here is a lit of things that you may want to to do to "turn your blog into a website".   They are in, roughly, the order that I recommend doing them to have the maximum effect.

Initial steps to reduce the "bloggy" feeling

1)   Get a custom domain

This is a website address like  www.mySite.com  or  www.yourBlog.org - or whatever available name that you choose. 

Using a custom domain means that your address will not have "blogspot.com" in it.

You can do this either:

• Using Blogger's  Settings > Basic > Blog Address > Add a Custom Domainfunction, or 
• By using an URL that you buy directly from a domain registrar - you might need to do this if the address you want isn't available through the Blogger function (egI recently needed a co.nz address for a site) or if you do not have a credit card.

This step is essential if you don't want the site to be perceived as blog, because the address is what people see when they first find the site in search-engine results.

If you are going to get a custom-domain, then I strongly recommend doing it at the very beginning of setting up your blog, so all the later steps are based on the custom-domain name rather than re-directions.  This is is A Good Thing for SEO - and even if SEO doesn't matter for your blog initially it may become important later on.


2)    Turn off the navBar, and remove the space where it used to be


3)   Show only 1 post on the main page. 


4)   Hide the "blog-specific" values from posts, on the Layout > Blog post (edit) tab.  

At a minimum the things to turn off are:

• Post-date
• Posted-by
• Post-time
• Comments
• Links to this post
• Labels
• Reactions
• Email post links
• Post sharing

5)    Make a home page - ideally using the custom-redirect option


6)    Remove the attribution gadget (the bit where it says "Powered by Blogger")


7)    Remove the "subscribe to posts (atom)" link


8)    Add an RSS-subscription gadget using Feedburner.
Some people say this is optional - but I believe that all "proper" websites offer an RSS feed and show that they do so by using a feedburner-style RSS chiclet.   If you just add Blogger's Subscribe gadget instead, it gives the Atom - ie blog-style feed.

Banishing the Blogger look for good

These next steps really go together: if you do one, you need to do the others too. They are needed if you totally want to remove the blog-ish-ness:

9)     Remove all gadgets that show a list of posts. These include the Archive, Labels.  This is simply the reverse of the add-a-gadget procedure - edit the existing gadget, and click Remove.


10)   Remove the "older posts / home / newer posts" links.

11)   Set up your own navigation system: every post or page needs to be able to be accessed from either a button or a link that is in either a gadget or another post/page.

It's temping to think about navigation from the home page. But first-time visitors who come to your site from search-results will not arrive at the home page. They might not even think to look at the home page. Ideally your navigation system should offer several routes to get to every piece of information, and should include both logical links between posts and a search-based option.


Tools that you might use to help with this:

• Summary posts, with links to detail pages about the topic. (Eg my public-transport site has a "city buses details" page, which links to individual route maps)
• A menu bar with links to the most-important summary posts.
  NB  If you use the Pages gadget for this, it is automatically included if you give the site a mobile template which is an important step if you want the site to beresponsive.
• Linked-List gadgets to show summary posts, or lists of related detail posts, in the sidebar or footer.

An alternative to your own navigation system is to use categories to put your posts into pages. This doesn't fully reduce the bloggy feeling, since someone who looks at a page sees a list of posts (with just post-summaries if you've used jump-links).   However changing the the status message (the grey box that says "showing all posts with labelwhatever") can make this acceptable in some sites (ie ones where the line between blog and website is blurred).

What you (currently) cannot do

You cannot remove the post-date values from the URL of blog posts.
If your entire site could be done with 20 or fewer screens, you could use Pages for everything - but IMHO this isn't necessary, visitors don't seem to be overly spooked by URLs with numbers in them.

You cannot use a dynamic template 
If you want your site to look like a website, not a blog: you need to use a Designer, or possibly a Layout, template.

Other things that you might do

You might want your blog tostand out in the seach results in order to get more visitors - seeGetting Started with SEO.

You might want to link it to the social networks - remember that there are wide range of possible links, and you need a strategy about how the site relates to each social medium that you use.

how hide/remoce nav bar in blogger

Here's how my updated technique to hide the Blogger nav-bar in a few simple steps:

1. Go to Design>Edit HTML in your Blogger dashboard
2. Using your browser's search function, locate the closing </b:skin> tag in your template's HTML markup.
3. Immediately before this line, paste the following section of code:
   
   

   #navbar-iframe, #navbar, .navbar {height:0px; visibility:hidden; display:none; margin: 0 !important;}

4. Preview the changes to ensure everything looks the way it should, then click "Save".

That's all there is to it!

how remove powerd by blogger attribution in blogger

If you are using one of Blogger's new templates, you'll notice an "Attribution" widget which appears at the very bottom of your site. This will contain details of the template designer, a "Powered by Blogger" statement, and possibly attribution for any background images you've added through the Template Designer.

We can add copyright information to this gadget by editing through the Layout page in our dashboard, but by default are unable to change it's position or remove it.

For various reasons, you may want to remove this gadget from your Blogger layout. For example, if you have highly customized your template so it looks nothing like the original design on which it is based, or you would prefer visitors not to know that your site is operated using Blogger's free service.

Since removing the Attribution gadget is not a straightforward customization, I have developed a simple method we can use to remove this gadget and (if you choose) replace it with a gadget of your choosing.


Before making any changes to your blog's HTML code, it is good practise to make a backup of your template!. 

Step 1: Edit your Template HTML

Go to Template>Edit HTML in your Blogger dashboard and search for the following section of code:

 <!-- outside of the include in order to lock Attribution widget -->
 <b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>

Pay attention to the sections highlighted in bold red and change this section so it appears like the code below: 

<!-- outside of the include in order to lock Attribution widget -->
<b:section class='foot' id='footer-3' showaddelement='yes'>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>

Now save the changes you have made.

Step 2: Remove the Attribution gadget (and add an alternative if you like!)

Go to the Layout section of your dashboard and scroll down to the Attribution widget at the bottom.

Click the Edit link, and you should now see there is the option to remove the gadget (which previously did not appear).

You'll also notice that you can Add a Gadget to this section of the footer, and are able to add any gadget of your choice in this section of your site.

How To Add Widget Widget/Gadget Inside Blog's Header?

How To Add Widget Widget/Gadget Inside Blog's Header?

• Go to Blogger Dashboard > Design > Edit HTML. (In new User Interface it is Dashboard > Template)
• As always download a copy of your template before making any changes.
• Now find for below code in your template

/* Header
----------------------------------------------- */

• If you can't above code then find for below code :

#header

• Now replace above code with below piece code

/* Header
----------------------------------------------- */
.header-left{
display: inline-block;
height: 35px;
width: 350px;
float: left;
}
.header-right {
display:inline-block;
float:right;
}

• If you want to change height and width of the logo then edit the lines in blue from above code.
• To change position of the logo to right the change float: left; to float: right;

• Now find for below code in your template

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Note - Above code will little different in your template as coding of each is differ.The best way to find above code is search for only half piece code i.e. till id='header'.

• And replace above code with below code

<b:section class='header header-left' id='header' maxwidgets='1' showaddelement='no'>

• Now "Preview" your template, you will find that the background color of Blogger's header is not visible or it's missing. To bring it back, you need to add some more snippets:

• Find the following code:

</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>

• If you can't find above code then only find for below piece of code in your template.

<b:include name='description'/>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>

• And paste below code just below of above code

<div style='clear:both;'/>

Now save your template.

Go to your Layout page you will watch "Add a Gadget" link inside your header.