Sunday, March 21, 2010

Creating & Customizing a Blogger Blog

Since Blogger is very easy to setup and still allows great individual customization, I decided creating my Blog this way.
Here is a short summary what I did for customization:

What? How?
Create the Blog Just register to Blogger, choose a subdomain and assign a layout to your Blog.
Personally I prefer a template with fluid width (like Denim). It's very annoying if you own a great screen with 1920x1200 and the website just shows the content in a fixed width of 800px for example .
In addition use the ordinary Blogger functions (e.g. Gadgets) for creating your basic page elements
Remove Blogger's NavBar The NavBar at the top of the page takes too much space and is not necessary. Anyway it has one useful feature: The search field which implements a full-text search on your Blog. So I decided to hide the NavBar per default and make it visible if you move the mouse on the top of the page. Check the following post for a how-to (doesn't work for IE): Toggle NavBar
Customize HTML/CSS My next step was customizing the HTML/CSS to achieve a custom look & feel. Blogger allows you to change and extend every part of the HTML/CSS of your blog. You only need to have some basic understanding of CSS. ;)
In specific I changed the header, some colors, margins, background, list-elements.
Block Paragraphs I defined a new CSS class for presenting block paragraphs:

<pre class="simpleCode">
Tables The chosen Blogger layout doesn't have any table styling. I did it on my own. While editing you need to create a HTML table as follows and you see a table like the one around.

<th> ... </th>
<th> ... </th>
<td> ... </td>
<td> ... </td>
Source Code For sure there will be some source-code on this blog. I decided to integrate the SyntaxHighlighter to allow code formatting like this:
// some Groovy list operations
List myList = ['a','b','c','d','e']
if (myList.size()<6) {
    myList << 'f'
assert ['A','B','C','D','E','F'] == myList*.toUpperCase()
It's easy to integrate this into your Blogger's HTML/CSS definition (check the installation documentation at SyntaxHighlighter). Finally all you have to do is specifing a tag like:

<pre class="brush: groovy">

No comments:

Post a Comment

And Feedback? Please post a comment: