Creating a start page

The king of the trickes to create a classic website-like look and feel. A cheap trick is to set the number of posts to "1" and after publishing the post, change the publish date to sometime in the far away future. But that is a bit of a workaround, clever, does the trick, but somehow not a longterm sol.ution. Especially if some team members have trouble using and remebering the trick.

So here is a better one. A very good description can be found here. But we adapt it to Nexus5: neat, tidy and elegant.

We basically say, if the user is on the home page, please show the Featured Section (which we have named Welcome). If not please show the blog entries.

Go to the Layout - Edit HTML and find the section with   id='content' 

The main wrapper will look something like this:

 
  [...]

 

 

       
       
       
 

Edit the template so that you get this:

 
  [...]

 
 
      

       
       
       
     

Basically, move the end if tag below the end /section.
Instead of the old if tag, replace it with an else/ statement belo the end of the #featured section.

Oh and you should probably increase the number of characters displayed. Amanda hast set the number "numchars = 200". Why not tripeling that number?

We switched to Nexus5 as a template

and here are the minutes of what we did.

Follow the instructions of Amanda (Bloggerbuster.com), who has designed the Nexus5 template.

1. Be sure, that you create a backup of your old blogger template, including the widgets.
2. Download the template | Unzip it | Upload the Nexus5 template
3. Setup the menu bar using the Nexus 5 linklist tool in Layout - Page Elements section of blogger
4. Upload a logo
5. Change the colours

So far so good. Now we do some stripping getting rid of the blog style elements.
Amanda has added "author name" code, that can't be manipulated when removing the blog elements using the Layout - Page Elements - Blog posts tool. So we have to get rid of the following code (best search for "address class" on the page).

We also need to move the post teasers to the left. Amanda has set this as 200px positioned from the left. We simply will set that to nill or to remove the CSS variable declaration. Best, use the browser page search to find "200px".

To finish polishing our firt Nexus5 adaption, we need to edit a few setting in the Page Element section, especially regarding the link list and the categories.

Step 3 - stripping your site of all "blog-like" elements

What makes a blog a blog?  Well mostly there is the style to list posts in a certain order.  Each post has certain attributes like

• comments
• author name
• creation date
• Links
• Tags / labels
• Location
• Sidebar tools, like "archive", "Followers", etc
  

And as we are about to use bloggblogger.comer.com as a alternative to a CMS, we don't want them, or at least most of them.  And if we keep some attributions, we make them look differently or less prominently.

So first got to Layout | Page Elements

Click the "edit" link of the "Blog posts" box. And uncheck the options you don't want.  In our case, we are unchecking nearly everything.  We just leave the "edit pen".

Then we get a search-box and a list of keywords instead of those bloggy "Followers", "Archive" and "Contributors" / "About the author". You can include a title or not, as you wish.

Step 2 - Adding the blogger code

Well, it's really straightforward.

Create your Google Analytics Account and add the website profile 
















The add the code to your Blogspot site.  First open the Blogger.com management interface

-Layout-Page Elements-



Add a gadget to the site by using one of the links.  Custom has it to add the code towards the end (before /body tag which ends the HTML code entries), so we chose the link "add a gadget" for the footer section.


A more detailed article can be found on eblogtemplates.com.  The only difference is that we have used the the Blogger layout Page Elements to add the code using a gadget.  This is far more user-friendly and of course in the spirit of a true CMS application.  Before applying our method we checked the web and found confirmation in this German article that this actually works, big thanks to Dirk :-)

Step 1 - turning a blogger site into a CMS-like website

This is how the site has started.  A typical blogger site based on the Denim template.  We chose Denim, because of the relatively classic design which doesn't look too blog-like.


Before we got here, we had created a blog under bloggercmscom.blogspot.com. Then we registered the domain bloggercms.com using the blogger management interface under | settings | publishing | advanced settings.  Blogger offers a link "buy one now".  Advantage: all domain settings are automatically set for your blog / website - so our's is now called bloggerCMS.com.
Next steps:

1. create the Google Analytics account for the site and insert the needed code into the site.
2. add a menu-based navigation bar to the site
3. strip all blog-like elements from the site (including the so calle navigation bar which blogger by deafult puts at the top of the page)
4. stripping the sidebar of blog-like widgets (or as Google calls them: gadgets).  We keep the column however.
5. Getting a new favicon (to eliminate another tell-tale detail of Blogger)
6. Editing the Meat tags.