The Beginner's Blogging Guide

Rotating Post Titles gadget for Blogger

noreply@blogger.com (Julian Schoffel) — Mon, 15 Jun 2009 16:26:00 +0000

I was snooping around today looking for something to inject some more life into my blog. I found an excellent new custom gadget which uses some Google AJAX magic to tap into your blog’s feed and display a sort of post slideshow.You can see the result on the main page of this blog.

From the get-go I’d like to give credit where it’s due and the site where I found this custom gadget is a massively popular blogger’s paradise called The Blog Doctor.

Why this gadget is so useful

Mainly because it allows your blog readers to access all of your content from a compact, dynamic little window which can be positioned anywhere you like.

I placed it over my posts section and set it to display on the homepage only.

You can find the post with the instructions for installing this gadget here – Rotating Post Titles Gadget.

If you have problems installing the gadget let me know and I’ll try to help.

How to install Blogger expandable post summaries

noreply@blogger.com (Julian Schoffel) — Sun, 14 Jun 2009 12:35:00 +0000

This is an oldie but a goldie. One of the first things I did when I created the first version of this blog early last year was to hunt around for a way to implement expandable post summaries.

There are a few ways to accomplish this but I eventually opted for this method…

Before we begin please make a Backup of your Blogger template – if you don’t know how to do this have a quick look at my post – Always back-up your Blogger templates!

Step 1 – Add some style rules

Go into your Blogger template (Layout/Edit HTML) and look for the following tag:

]]></b:skin>

Immediately AFTER it add this:

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

Now save your template.

Step 2 – Add the “Read More” links

Once again, go into your Blogger template (Layout/Edit HTML) and make sure you have your widgets expanded.

Find the following tag:

<data:post.body/>

Immediately AFTER it add this:

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more!</a>
</b:if>

Now save your template.

Step 3 – Add some span tags to your template

Now go into your Blogger Settings menu and hit the Formatting tab. Down the bottom of this menu you will find the Post Template field.

In this box add the following:

Here is the beginning of my post. <span class="fullpost">And here is the rest of it.</span>

Now save your Settings.

Step 4 – Modifying your posts

Ok now every time you create a new post the text above will automatically appear in the editing box.

Anything that you put into your post BEFORE the <span class="fullpost"> tags will become your POST SUMMARY (this includes images).

Anything that you put into your post AFTER the <span class="fullpost"> will become the MAIN BODY of the post only visible when a reader clicks on the Read more link.

Check out the main page of this blog to see it in action.

You can easily customise the way the “Read more” text appears, in fact I may do a quick post on it next.

NOTE: Unfortunately for your old blog posts you will have to go back and manually implement these span tags to convert them to post summaries.

Let me know if you have any problems.

Newsflash: I have heard rumours that Google may be implementing an even better post summary method into Blogger in the near future, but in the meantime this method works pretty well.

10 tips for writing better blog posts

noreply@blogger.com (Julian Schoffel) — Thu, 11 Jun 2009 13:49:00 +0000

Some of them are common sense, some you wouldn’t necessarily think of – but here are my top 10 tips for writing better blog posts (in no particular order)...

10 – Stay on topic

Readers (and search engines) will feel cheated if your post title has little or nothing to do with what your post is actually about.

9 – Check your spelling

Come on, how hard is it? Just use Blogger’s built-in spell check feature.

Besides everyone knows how easy it is to run a spell-check so the fact that you didn’t means that:

(a) You were in a great hurry or
(b) You don’t respect your readers

Unless you can prove otherwise most people will assume it’s reason (b).

8 – Avoid the wall of text

When confronted with a massive block of text many readers will feel daunted and run (or click) for the hills.

Break your posts up using short sentences, images and paragraphs.

7 – Use lists

If something in your post lends itself well to the list format then convert it into one. People tend to skim through text on web pages and the human eye seems to be naturally drawn to lists.

Which brings me to my next point…

6 – Sub-headings make text more readable

Most people read from the top of a page and from left to right. It’s also a widely known fact that text readability is greatly increased using well placed sub-headings.

5 – Involve your readers

Do you want to be some kind of demented preacher flinging your righteous posts down upon an unworthy audience?

Or do you want to engage your readers in a meaningful dialogue and encourage them to contribute to your blog with valuable feedback and insightful comments?

If you chose the latter then write some posts which proactively ask for your readers’ opinions. Don’t be afraid if no-one responds at first, eventually someone will.

4 – Try to write one ‘extra special’ blog post a month

Ok I realise that “extra special” is a bit vague but by this I mean a blog post that you put a lot of effort into.

Some of these will miss the mark but the ones that don’t will go on to become your blog’s audience builders.

Without a doubt the most popular post on this blog is my 3 column Minima tutorial. I put a lot of effort into making this post really easy to understand and it has paid off in the long run.

3 – Lose the flab

There’s a line from the book Cold Comfort Farm where the lead character tries her hand at writing - very poor writing as it turns out.

In an effort to be poetic and grandiose she writes something to the effect of “The golden orb slowly climbed into the azure blue sky…”

Translation – the sun rose.

Don’t make the same mistake. Unless your blog is concerned with poetry and literature always make your point as quickly and concisely as possible.

2 – Edit your posts

Stream of consciousness may work well for the likes of Robin Williams, but for the rest of us it’s always wise to go back and check our posts before we publish them.

Do they make sense? Are they bloated?

1 – Always nurture your post titles and leading paragraphs

Regardless of how entertaining or informative the main body of your post may be, no-one will ever feel inclined to read it unless your post title and, to a lesser extent, your leading paragraph hooks them in.

To this end make them relevant but make them catchy and impactful.

Did I miss something?

Well that’s my 2 cents worth but if you have more to add then feel free to speak up.

How to hide the Blogger Navbar

noreply@blogger.com (Julian Schoffel) — Tue, 09 Jun 2009 13:26:00 +0000

I’m not a huge fan of the Blogger Navbar – it sits at the top of our Blogger blogs looking incongruous and ugly.

It also makes it easy for malevolent readers to flag our blogs (whether it’s deserved or not) and/or navigate to a new one.

You may have noticed that the Blogger Navbar is not visible in any of my blogs. Sure the little sucker is technically still there but I made it invisible using a simple CSS trick.

Here’s how you hide your Blogger Navbar…

To hide your Blogger Navbar you simply add a few lines of CSS to the header section of your Blogger template.

Simply go into the Layout/Edit HTML menu and put the following CSS in your Blogger template:

#navbar-iframe {
height: 0px;
visibility: hidden; /* Gets rid of Blogger Navbar */
display: none;
}

It’s worthwhile leaving the /* comment */ in there too so you can remember what you did.

Now save your Blogger template.

Voila! That’s all there is to it – no more annoying Navbar!

How to customise your Blogger Minima header section

noreply@blogger.com (Julian Schoffel) — Fri, 05 Jun 2009 03:14:00 +0000

A visually striking logo image or banner is one of the best ways to make your Blogger blog stand out from the crowd but the standard Blogger header management system has its limitations.

Here’s how you go about putting anything you like in your Blogger Minima header section…

Before we start be aware of the following:

We are about to circumvent the standard Blogger Minima header management system so you will no longer be able to change your blog logo or blog description using the Blogger Layout editor – you’ll have to do it manually instead.
You will need somewhere to host your image files (Picasa Web Albums is fine for this).
You will need some form of image-editing software to create your logo/banner images – I use Adobe Fireworks.

Please note: Do not attempt to cut and paste the CSS and html in this tutorial into your own Blogger template – IT WILL NOT WORK! The code in this tutorial is for demonstration purposes only.

Step 1 – Backup your template and any logo images you have!

I can’t stress how important this is! You’re going to make some mistakes when customising your Blogger template in this way – it’s an inevitability. Be smart and backup all your image files and your full Blogger template so you can always return to square one.

Step 2 – It might be wise to create a test blog

With Blogger it’s very easy to create a test blog which is a copy of your live blog. You can then make this test blog private and use it to get your new layout working without disrupting your readers too much.

Image layout of my #header-wrapper

Step 3 – Create your images

For the purposes of this tutorial I’ll tell you exactly how I created the header section for this blog - The Beginner's Blogging Guide.

In the interests of fast page load times it’s smart to split your logo/banner up into multiple smaller images.

I created three separate images for the header section of this blog using Adobe Fireworks, they are –

begin_logo.png (the logo which is 4Kb in size)
begin_title.png (the title text which is 6Kb in size)
beginner_header_repeat.png (the gradient background which repeats horizontally and is less than 1Kb in size)

You can literally create any type of images for your header, just try to keep the file sizes small and make a note of the image dimensions. You will need these measurements to place the images in the next step.

If you don’t own Adobe Fireworks, you might like to try using a free image editing program like IrfanView or Paint.NET.

Once you have finished your images – upload them to your host and make a note of their URLs.

Step 4 – Create your divisional elements

The div layout of my #header-wrapper

In my last post on this topic I gave you a rundown on the divisional layout of the Minima template. In case you forgot you will find that information here – Minima template header tutorial Part 1.

For this blog I created two new divisional containers (divs) – “#logo” and “#title.” I also modified the existing #header-wrapper div.

You will need to go into the Blogger Layout/Edit HTML to create your divs. You will also need the exact measurements (i.e. height and width) of your logo/banner image files in order to adjust your div containers so the images fit inside and are correctly laid out.

For this blog I added the following divs to my template (Note: these are examples only and will not work for other blogs using different sized images)

My example header divs –

#header-wrapper {
height: 125px;
background-color: #586894;
background-image: url(your image URL goes here../images/beginner_header_repeat.png);
background-repeat: repeat-x;
width:1000px;
margin:0px;
}
#logo {
width: 137px;
height: 103px;
padding-top: 11px;
padding-left: 60px;
float: left;
}
#title {
width: 656px;
height: 78px;
padding-top: 25px;
padding-right: 35px;
float: right;
}

The main things to notice here are the repeating gradient background image of #header-wrapper, and the widths and padding in #logo and #title for image placement.

Use your image editing program to work out the widths and padding for your divs, then add them to your Blogger template.

Once you’ve finished save your template.

Step 5 – Remove your old logo images and blog description text

Go into the Blogger Layout/Page Elements menu and remove your existing logo image and set the header to display the default title and description text.

Now go into your Blogger template – Layout/Edit HTML and make the following changes to the #header-inner div –

#header-inner {
height: 0px;
visibility: hidden;
display: none;
}

This will effectively hide the blog title and description text, allowing you to display your own custom banner/logo.

Save you template.

Step 6 – Add your custom banner/logo html to your Blogger template

Once again, go into your Blogger template – Layout/Edit HTML and make sure you have the “Expand Widget Templates” box ticked.

Scroll down until you find:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your blog title (Header)'type='Header'>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='main'>

Now add your custom html directly after the <b:includable id='main'>

For this blog I added (Note: this is an example only and will not work for other blogs):

<div id='logo'>
<img alt='The Beginner's Blogging Guide logo image' border='0' height='103' src='your image URL goes here../images/begin_logo.png' width='137'/>
</div>
<div id='title'>
<a href='http://www.thebeginnersbloggingguide.com' target='_self'><img alt='The Beginner's Blogging Guide title text' border='0' height='78' src='your image URL goes here.../images/begin_title.png' width='656'/></a>
</div>

Once you’ve added your custom html save your template and take a look at the finished result.

Using these techniques it’s possible to put absolutely anything into your Blogger header!

In my next post I’ll tell you how you can add a Flash banner to your Blogger blog.

How to customise the Blogger Followers gadget

noreply@blogger.com (Julian Schoffel) — Wed, 03 Jun 2009 02:47:00 +0000

In their ceaseless quest to make the world a Googlier place, Google recently integrated the Blogger Followers gadget with Google Friend Connect. Unfortunately this caused some adverse side-effects – the most obvious being that the gadget appeared to grow enormously fat while ignoring any custom styling you may have implemented.

Well after trying in vain to find directions to tame my wayward Followers gadget – I discovered a way myself...

Now from the get-go I should mention that it’s relatively easy to change the links, text colour and border of your Followers gadget simply by using the “Edit” option in the Blogger “Layout Edit Layout/Page Elements” screen.

The default Edit mode

However some aspects of the gadget are controlled by java scripting to which us humble bloggers have no access – well as far as I am aware anyway.

But if you open up your Blogger template (with the Widget Templates expanded) and skim through the code until you find your Followers gadget you will notice that (like every Blogger gadget) it has its own unique id. This is usually something like “Followers1.”

Once you identify the id of your Followers gadget it’s simply a matter of adding some CSS style rules in the header of your Blogger template.

For example in this blog I added the following:

#Followers1 {
background: #FFF;
border: solid 1px #CCC;
}

Find the gadget's id in your template

This appears to successfully override some of that tricky java script styling.

Anyway – give it a try but, as always, make sure you backup your Blogger template first!

Minima template header tutorial (Part 1)

noreply@blogger.com (Julian Schoffel) — Fri, 08 May 2009 10:17:00 +0000

If you want to quickly give your Blogger blog a distinctive look then the header section is a great place to start. Here’s how you go about customising the header of the Blogger Minima template…

Firstly, in order to customise the Minima header section you have to understand what’s it’s actually comprised of – here’s a quick rundown.

Default CSS header divisional elements of Minima template

#outer-wrapper – This is the divisional (div) container which surrounds your entire Blogger blog. As you’d expect, all of the header section components sit inside this #outer-wrapper.
#header-wrapper – This is the outermost div container in your Minima header section which is itself contained within the #outer-wrapper of your template. In the default setting the #header-wrapper has a 1px border around it.
#header – This is the 2nd div container in your header section and it sits inside the #header-wrapper. In the default minima Template setting this div also has a 1px border around it.
#header-inner – This div sits inside the #header container and has no border around it.

Div layout of Minima header section

So essentially the Blogger Minima template header section consists of a box within a box within a box within a box – we have a kind of Russian doll thing happening here ;)

CSS style rules of Minima template

#header h1 - If you chose to have your blog title display as text in the header then this style rule governs the style of that blog title text.
#header a – This style rule controls the appearance of any links you may have in your header section.
#header a:hover – This style rule controls what happens when people hover the cursor over a link in the header section.
#header .description – This CSS class governs the appearance of any blog description text you may have elected to include in the header section.
#header img – If you put a logo image in the header section then this rule controls how it will be displayed.

How to center header elements

The most common questions I get are: “How do I center my logo or blog description or blog title text…”

Probably the simplest way to center things using CSS is to set the element’s right and left margins to “auto.”

So if I wanted to center my blog logo I’d edit the Blogger Minima template to include:

#header img {
margin-right: auto;
margin-left: auto;
}

If I wanted to center my blog description text I’d edit the Blogger Minima template to include:

#header .description {
margin-right: auto;
margin-left: auto;
}

You get the idea. Of course this won’t work if containing elements or the elements themselves have conflicting padding or text-align settings.

So if you find yourself having problems, backup your template and tinker with the relevant CSS until your div element centers. Start by removing any padding.

In the next part of this “Customise your header” series I’ll examine how to pull off some fancier stuff like multiple images and flash logos.

My first year blogging draws to a close...

noreply@blogger.com (Julian Schoffel) — Mon, 12 Jan 2009 06:06:00 +0000

I’d like to say thanks to everyone who left comments on my posts this past year or so – the 3 Column Minima guide seems to have been especially popular, I’m glad it proved helpful to some.

I haven’t been posting as often as I would have liked, largely because I have been studying the excellent open source content management system Joomla!

With a bit of luck and a lot of work I hope to be in a position to create Joomla! based websites in the near future.

On another note I’m turning 40 in a week or so. I recall being a bit nonplussed about turning 30, but 40 is a totally different ballgame – quite hard to get the head around really...

Especially with all the bleak things going on in the world at the moment. But whenever I get hit by a wave of uncertainty I'm reminded of a quote from Lord of the Rings:

"All we have to decide is what to do with the time that is given to us..."

Attempting to accomplish something meaningful is all any of us can hope for I guess...but enough midlife crisis angst ;)

I intend to continue posting about Blogger, and I hope to also touch on Joomla! at some point but I may start an entirely separate blog for that subject.

Anyway thanks again to all who read my blog and I hope to add a lot more useful content in the weeks and months ahead.

So you want to make money blogging?

noreply@blogger.com (Julian Schoffel) — Wed, 12 Nov 2008 16:11:00 +0000

As a long-time freelance writer it’s always been my dream to self-publish and eventually make money doing it. That’s essentially what monetised blogs are – online self-publishers making money from their blog content. But how do they go about it..?

From the outset I should state that if my, admittedly still fairly limited, experiences are anything to go by then making money from blogs is a long, hard, not necessarily fruitful road.

In the first of a series of posts on this subject I’ll examine the most obvious way to make money from blogging – through advertising.

AdSense for Content is one option

Advertising on blogs

As many of you would be aware there are plenty of advertising services available to the aspiring blogger. These include the likes of Google AdSense, Blogsvertise, and umpteen more.

How much money can you make from services like Google AdSense?

It’s against Google’s terms of service to talk about specific figures but if my experiences are anything to go by, you need HUGE volumes of sustained traffic to make decent money from services like AdSense.

Of course if you do manage to get up into the hundreds of thousands of hits per month, there’s no guarantee that your readers will be clicking on your ads.

So aside from worrying about overall traffic volume, you also need to ensure that your blog’s subject matter is conducive to people clicking on ads.

Find your niche

This blog (The Beginner’s Blogging Guide) doesn’t cover an especially good subject for an ad friendly blogsite. Instead, blogs on subjects like photography or tech gadgetry tend to be more ad friendly.

For example people proactively seek out information on consumer electronics devices in order to make an informed purchase. They are often primed and ready to buy when they visit a technology blogsite. So if they see an appealing content ad on a tech blog they are quite likely to click on that ad and make a purchase.

If your primary goal is to make an ad friendly blog – pick your topic very carefully. And be aware that the most lucrative subject areas for monetised blogs have already been saturated so you will be competing against established players, often whole networks of blogs.

Ideally you want to find a niche within an ad friendly subject area which hasn’t already been done to death.

Context sensitive ads

Context sensitive ads

As most of you would know services like Google AdSense are context sensitive and will attempt to run ads which are relevant to the subject matter of your blog. This sounds great in principle but it doesn’t always work.

For example on my games blog (Growling Dog Games) I was using AdSense and because much of my content involved World of Warcraft, most of my AdSense ads were touting the services of insidious World of Warcraft gold-sellers.

Now World of Warcraft gold-selling happens to be illegal and for many of my prospective readers – the presence of those gold-selling ads was not exactly a glowing endorsement of my site.

The importance of control

So as we can see – automated context sensitive ad services can run ads which may actually damage the reputation of your blog. And with services like AdSense for Content, you have very little control over what ads are actually displayed.

Furthermore, if you run a business blog and you use context sensitive ads, there’s also the distinct possibility that ads for competing businesses and services will be showing up on your site.

So how do you control what ads are displayed on your site?

If you eventually manage to build a large, established readership your best bet may be to directly approach companies selling products in your niche area. For prospective advertisers, the more focussed your blog is, the better.

However to have any credibility at all you will need to be able to present some hard data to prospective ad clients.

Google Analytics is a useful tool

Google Analytics

If you want to sell ads yourself and negotiate your own ad prices then you will need rock solid data to back yourself up. A tool like Google Analytics is invaluable in this situation and allows you to filter and sift through all the statistics of your site’s traffic and make it accessible to potential advertisers.

On the downside, installing the Google Analytics script on your site can slow down page loads. Google are always working to improve this so hopefully it won’t be an issue in the future.

Ads can now be placed in RSS feeds

Ads in feeds

Also bear in mind that a lot of people may only visit your site once and, if they like what they see, they may subscribe to your RSS feed. As a general rule this is great for bloggers, but if you depend on ad revenue it’s not so great. Up until fairly recently – it was tough to display ads in feeds. So if most of your readers viewed your content in feed-readers they were not seeing any of the ads on your blog.

Of course since Google bought Feedburner, ads in feeds were an inevitability. Using Feedburner it’s now possible to set up your RSS feeds to display ads. However, be forewarned – some of your readers may see ads in feeds as a huge turn-off.

Conclusion:

Services like Google AdSense are incredibly easy to setup, especially for users of Google Blogger, but they have their pitfalls.
If your main aim is to make money through ads on your blog you will need to pick an ad friendly niche subject that hasn’t already been saturated – proven subject areas include consumer electronics and digital photography.
To make decent money you will need a high volume of sustained traffic which means you will have to regularly create unique, entertaining and informative content.
If you want to have more control over what ads run on your site you can directly approach prospective advertisers (in your chosen niche area) and negotiate your own rates – but you will have to back this up with hard data using a tool like Google Analytics, and you will need a demonstrable history of high, sustained web traffic relevant to their business.

If you guys find this post useful or interesting I’ll put together another article on making money from blogs in the next few days.

Why do you blog?

noreply@blogger.com (Julian Schoffel) — Sat, 08 Nov 2008 14:06:00 +0000

Some people blog to network, some to get a message across, some for money, some for publicity – so why do you blog?

For me blogging has a certain freedom associated with it: the freedom to write articles about topics that really interest me, articles that aren’t commissioned by editors. I mentioned in another post (My escalating blog obsession) that blogging empowers people to self-publish in a way undreamt of even 20 years ago.

But this post isn’t about me. I’d like to know why you guys blog.

Do you have a business, do your friends like to blog? Maybe you want to try and build a name for yourself online, or maybe you hope to make money from your blog.

My reasons are part genuine curiosity, and part pragmatism. If I know why you blog I may be able to improve the articles on this site – tailor them to better suit your needs.

I’ll also take any suggestions for articles here too, so if you have any ideas or you want to know how to do something in Blogger – please leave a comment.

Always back-up your Blogger Templates!

noreply@blogger.com (Julian Schoffel) — Sat, 08 Nov 2008 03:35:00 +0000

There's a cardinal rule when customising your Blogger templates - always back them up first! I get quite a lot of mail which usually goes something like this...

“I followed your 3 Column Minima tutorial but now my Header section and Posts section has disappeared! Oh and some of the code didn’t make sense in my template so I deleted it and now it won’t display correctly. By the way I didn’t make a back-up of my template… Please help me!”

Now I understand how catastrophes like this can easily occur – it’s happened to me too. After all Blogger templates can be extremely confusing and counter intuitive when you are new to HTML and XML. However all of this can be avoided if you follow one simple step – Always back-up your Blogger template.

Click "Edit HTML" in the Dashboard

How to back-up your Blogger template

Click the “Layout” tab in your Blogger Dashboard.
Click “Edit HTML.”
Select the “Download Full Template” option and save the file to a safe place.
It’s also wise to save it as a filename you will recognize with a date included so you have a rough idea what version it is (i.e. “my_blogger_template_nov_08_2008.xml”)

How to restore your Blogger Template

Now if you make a booboo while customising your Blogger template you can restore it to its former glory simply by:

Click the “Layout” tab in your Blogger Dashboard.
Click “Edit HTML.”
Select “Upload a template from a file on your hard drive:” and browse to your saved template and select “Open.”

Or:

Open your saved Blogger template file, select all of it and copy it to your clipboard.
Click the “Layout” tab in your Blogger Dashboard.
Now click “Edit HTML.”
Put a tick in the “Expand Widget Templates” box.
Select your entire Blogger template (in the Blogger Dashboard) and paste the contents of your clipboard to replace it with your saved version.

If you back-up your Blogger templates regularly you never have to worry about experimenting with new Blogger customisation tricks.

Blogger embedded comments form broken

noreply@blogger.com (Julian Schoffel) — Mon, 27 Oct 2008 02:31:00 +0000

If you have been using the excellent embedded comments form feature (which is available at Blogger in Draft) you might want to check your blog...

If my experiences are anything to go by the feature has been broken since September 2008. So if you want to ensure that you don’t miss any comments on your blogs, you may want to try one of the following…

Go into Blogger in Draft and click the “Settings” tab, then go into the “Comments” section and disable “Embedded Comments.” Instead, revert back to the old pop-up or full-screen Comments options. Then save and exit Blogger in Draft.

Here is the blurb from the official Blogger “Known Issues” blog –

“If you have a customized template or have inserted some 3rd party code into your template, your embedded comment form may not appear as normal. — latest update on Friday, September 26, 2008”

Anyway, the embedded comments form is a great feature and we hope they get it sorted ASAP. Naturally I will update this post once they do.

Troubleshooting 3 column Minima layout

noreply@blogger.com (Julian Schoffel) — Fri, 24 Oct 2008 20:52:00 +0000

Custom 3 column Minima Blogger templates are very popular, but a lot of people seem to run into problems when trying to implement them. Here are some of the common problems and fixes.

The perils of margins and padding

In CSS when you apply padding and/or margins to a div element, you are actually adding the width and height of the margins and/or padding to the overall width and height of the div.

Say for example you have the following CSS:

#sidebar-wrapper { width: 300px; padding: 20px; margin: 20px; }

So how wide is the above #sidebar-wrapper div? If you answered 300px then you have made a common mistake.

The correct answer is: 300px + 20px (margin-left) + 20px (margin-right) + 20px (padding-left) + 20px (padding-right) = a total width of 380px!

Naturally if you forgot to factor this into your 3 column Minima template design you will likely have floating columns sitting underneath one another because the containing wrapper (often called #outer-wrapper) isn’t wide enough to accommodate them side by side.

So if you want the overall width of your #sidebar-wrapper to be 300px with the same padding and margins as the example above you would use the following CSS:

#sidebar-wrapper { width: 220px; padding: 20px; margin: 20px; }

In other words you add up all your margins and padding: 20px (margin-left) + 20px (margin-right) + 20px (padding-left) + 20px (padding-right) = 80px and then subtract it from your overall #sidebar-wrapper width: 300px – 80px = 220px.

Watch those borders

Like margins and padding, CSS borders are also added to the overall width and height of a div element. Say, for example, you have a #sidebar-wrapper div element with a width of 300px and a 1px border. How wide is the div?

300px + 1px (left-border) + 1px (right-border) = 302px

So if you want your #sidebar-wrapper to have a total width of 300px but you also want it to have 1px borders, you’d have to subtract the border width:

300px – 2px (sum of right and left borders) = 298px

The dreaded ‘Internet Explorer Double Float margin Bug’

If you are still using IE6 – firstly – shame on you! It’s an outdated, antiquated browser that has a variety of horrible idiosyncrasies. You should update to the latest version of Firefox, IE or Safari.

If you insist on using IE6 then be aware of the ‘IE Double Float margin Bug.’ This basically means that if you view a site in IE6 that has floating div elements with margins – IE6 will double the margin of the first float which usually pushes one of the div floats underneath. The end result is ugly and weird looking. You can get around this by putting in some conditional comments.

If for example you have a 3 column Minima blogger template with 3 floating div elements, the first of which, let’s call it #sidebar-wrapper, has a left margin of 28px then you would put the following conditional comment in the header section of your template:

<!--[if lte IE 6]> <style> #sidebar-wrapper { margin-left: 14px; } </style> <![EndIf]-->

This means – if the browser is less than or equal to (lte) IE6 then the left margin of the #sidebar-wrapper should be 14px (half of 28px). This should avoid the problem for those viewing your site in IE6. All other (newer) browsers will ignore the conditional statement and display the page as normal.

Conclusion

If you are having problems with your 3 column Minima custom blogger templates always:

Check your margins and padding.
Make sure you also factor in border widths.
Check your browser version and if necessary add an IE conditional comment.

Hope this helps. Oh - you can find my original post which tells you how to create a Blogger 3 column Minima layout here.

Custom favicons disabled in Blogger - a fix

noreply@blogger.com (Julian Schoffel) — Fri, 24 Oct 2008 20:34:00 +0000

Google recently disabled custom favicons in Blogger blogs but there is a workaround. And here it is...

The old method of getting a custom favicon to display in a Blogger blog no longer works. As of October 2008 you now need to insert the code in a different area of your Blogger template.

To get your custom Blogger favicons working again just move the favicon code between the ]]></b:skin> and </head> tags in your Blogger template. They should then display correctly.

If you want to know more about creating favicons check out my How to add a Favicon to your Blogger blog post.

I updated my blog design

noreply@blogger.com (Julian Schoffel) — Thu, 23 Oct 2008 14:46:00 +0000

I've wanted to update the design of this blog for ages but for the past few months I've been snowed under with work. However I finally got around to it this week - what do you think...?

I'd also like to extend my apologies to all my readers who commented the past couple of months and didn't get a response. I am back on deck now and I will do my utmost to create new and improved content, along with answering queries in a timely manner.

On that subject - I'd like to know what sort articles people would like to see here, so if you have anything you want me to focus on please don't hesitate to send me a quick message via my contact page.

Anyway, I look forward to creating plenty of new Blogger tutorials in the coming weeks so stay tuned.

My escalating blog obsession

noreply@blogger.com (Julian Schoffel) — Mon, 16 Jun 2008 23:04:00 +0000

After 15 years of writing for magazines I lusted for the opportunity to pursue my own interests with no editorial policy to dictate my style and subject matter and maybe, just maybe connect with an audience of like-minded people in the process...

The other day I was tinkering with my fledgling blogs and I began to think about why I was doing this. For me this is only the beginning (cue maniacal laughter…), I have a number of other blogs planned – I have no idea if they will succeed or fail but that’s the beauty of blogging: there is no huge capital outlay required – only enthusiasm, time and a willingness to immerse yourself in an area of interest. And whether they succeed or fail is a subjective concept rather than an accountant’s decision.

And that’s when it struck me. This blogging popularity explosion represents an incredibly significant moment in human history. For the first time anyone, anywhere has the potential to self-publish to a vast audience with virtually no capital outlay.

Well a ‘theoretical’ vast audience anyway, or so I’m discovering…

Weirdness on a grand scale

Back in the old days, when you wrote for a magazine or newspaper it was often hard to gauge the popularity of your material. The process lacked the immediacy of blogging where, using tools like Google Analytics, you can actually see how many people read your article, their country of origin, what colour underpants they are wearing and how long they stay (ok, maybe not the underpants thing but I’m sure Google are working on it).

I’ve recently learned that the latter is referred to as the “bounce rate:” a somewhat brutal concept that seems to exist purely to remind you how insignificant you are…

At the moment a typical Google daily chart for me reads like this: 3 people from Germany came to one of my sites and stayed for 0 seconds (they obviously confused my name with that of the Schoffel ski apparel company), I’ll also have people from other exotic parts of the globe, many of whom no doubt wondered how the hell they ended up here.

But, amongst all of these there will be some people who stayed for a bit (ok 2 minutes 10 seconds according to Google Analytics…) and read my stuff. And for me, if even a few people get something out of it then I’m happy.

Make no mistake blogging can be a scary, ego-twisting exercise. When you start you have no idea if anyone is going to read your stuff and learning how to raise your online profile is an art form in itself.

The demise of the old-school publisher

When I started writing for magazines back in the early 1990s the publishing world was a very different place. Newspapers, magazines, radio and television were the undisputed kings. Despite the desktop publishing revolution of the late 1980s, you still needed a LOT of loot to publish anything on a larger scale.

For the most part I was fortunate to write for editors with a lot of integrity, the sort of people who would never bow to advertisers by masquerading advertorials as editorial.

But I also saw plenty who had no qualms about kowtowing to advertiser’s demands and ultimately letting down their readers and destroying editorial credibility.

Now bloggers are picking up readers who are disillusioned with the jaded mainstream press.

The rise of blog networks

I’ve also noticed that while some of the old-school publishers are struggling with the transition to new media – some enterprising bloggers are carving out their own blog publishing empires by forming blog networks and affiliate sites.

Some of these have the cynical stink of old-school media but the beauty of the internet-based blogging medium is that it’s very hard to establish a monopoly.

So why do you blog?

I’m new to blogging and I find the prospect exciting, daunting and incredibly addictive. But I’m curious – what makes other people want to blog?

Are you the SEO obsessed type who wants to make a buck out of it or do you do it for love, or to make a difference or to get out a message or…?

How to create smooth gradient backgrounds

noreply@blogger.com (Julian Schoffel) — Wed, 11 Jun 2008 21:26:00 +0000

For the longest time I’ve experimented with gradient backgrounds but it was only recently that I discovered how to get rid of that annoying ‘banding’ effect…

Why gradient images?

Because, when done well, they look very cool and can add a sort of visual vibrancy to a website’s design. My apologies for the gratuitous alliteration in that last sentence…

Banding yuck!

The tricky bit…

While gradient images are not that hard to create; a gorgeous looking, uncompressed graphics file is one thing – compressing it into a small, usable web graphics file without incurring hideous image degradation is another matter entirely…

For those of you who don’t want to read my short (but hopefully useful) tutorial on how to actually create a gradient image - I’ll skip to the most important step first – save them in 24-bit .png (portable network graphics) format – it works every time!

How to create a smooth gradient image

Well first you need a graphics editing program (d'oh), I use Fireworks. And, without wanting to sound like some sort of sneaky Adobe sales rep (I’m absolutely not) – I find Fireworks to be THE best graphics program I’ve ever used for web-oriented stuff.

Create a shape

Step 1 – Create a shape

Open a new image file (whatever size you like but big enough to see clearly) and create a shape using your image program’s shapes tool. You can apply a gradient fill to any shape you want, but for our purposes let’s stick with a simple square or rectangle.

Now select a fill colour – any colour you like – and apply a gradient fill (you'll also need to select which colours to apply to the fill).

Depending on the sophistication of your graphics editing software - gradient fills come in a variety of flavours i.e. radial, linear, starburst, ellipse, ripples etc.

Tweak it!

Step 2 – Smooth your gradient and tweak it baby!

OK, you should now see a rectangle with a pretty looking gradient fill. In Fireworks you can smooth, adjust and distort the fill using the “Transform Handles.”

Step 3 – Some more tweaking…

I’ve found that using Fireworks you can also smooth gradient images out even further by defining a few extra colour transitions in the “Color Fill Box.” I guess this all depends on what image software you use. In Fireworks you can also tweak the gradient’s opacity, fill texture and Lord knows what else…

24-bit .png = no banding!

Step 4 – Save it as a 24-bit .png file

I’ve tried saving my gradients in all manner of graphics formats (i.e. .gif, .jpg) but the one that works the best and virtually eliminates banding is the 24-bit .png format. I’m not sure if Fireworks has some sort of proprietary compression algorithm for 24-bit .png files but I find they always seem to be very small in size but very high in image quality.

And that’s it - mission complete!

CSS image captions for Blogger

noreply@blogger.com (Julian Schoffel) — Tue, 10 Jun 2008 12:54:00 +0000

For some strange reason Blogger has no built-in facility for creating image captions. Thankfully I managed to track down a great captions system that relies purely on CSS styling…

From the get-go I’d like to state that I came across the original captions article over at Blogger Buster and you can find it here – Add Stylized Captions to Images in your Blog Posts.

However I was still having a few problems displaying captions underneath my images in IE and Safari – in a nutshell weird things were happening with my image alignment…

Cute isn't she?

Then one of Blogger Buster’s readers posted the solution (you’re a legend Andrew). Please feel free to read Amanda’s original article but in the interests of simplicity I have included all of the necessary steps here as well.

Step 1 – install the CSS in your Blogger template

Go into your Blogger “Layout” page and select “Edit HTML.” As always – make sure you save a backup copy of your template before fiddling about with your blog’s innards hehe.

Find the </b:skin> tag and insert the following code just BEFORE it:

.left-caption { float: left; clear: left; margin: 0pt 10px 3px 0pt; padding: 0.5em; text-align: center;
}
.right-caption { float: right; margin: 0 0 1em 1.5em; padding: 0.5em; text-align: center;
}
.center-caption { margin: 0 0 1em 0; padding: 0; text-align: center;
}
.left-caption img, .right-caption img, .center-caption img { margin: 0 auto; display: block;
}
.left-caption p, .right-caption p, .center-caption p { background: #eee; margin: 0; line-height: 1.6em; padding: 0.5em; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; font-size: 0.9em; color: #333;
}

Now save your template.

Step 2 – tweak your post images

Now whenever you want to include an image with a caption inside a post you need to click the POST option “Edit HTML” and add the following:

<span class="right-caption" style="width: (image-width)px"><img src="http://www.yourwebsite.com/yourimage.jpg"/><p>Your caption goes here.</p></span>

The above code will align your image and caption to the right. You can change this by substituting either the left or center caption classes.

Attention: if you upload images to Blogger choose “NONE” in the layout option.

Also make sure you give your image a width – substitute a number in the code above where I have (image-width) – it could be “width: 326px” for example. This is very important and will stop all of the IE and Safari browser alignment weirdness that I mentioned earlier.

And of course be sure to add the correct image URL, not the one I included above.

Please note: remember to factor in image borders and padding to your overall image width i.e. if your image is 320px wide, has a 1px wide border and 2px of padding this will add 6px onto the overall width taking it up to 326px.

Feel free to tinker with the CSS if you want, you can easily change the background color of the captions and so on. Just save your template first!

To summarize:

We defined some classes inside our Blogger template (i.e. left-caption, right-caption, center-caption).
We applied preformatted styling to these classes.
We applied this to the images inside our posts using span tags.

And that's all there is to it!

Add a ‘top of page’ nav anchor to Blogger

noreply@blogger.com (Julian Schoffel) — Mon, 09 Jun 2008 13:55:00 +0000

Forcing readers to scroll through long pages can be the death knell for any aspiring blog. Thankfully it’s really easy to install a ‘top of page’ arrow image to streamline page navigation in Blogger blogs. Here’s how you do it…

Firstly I’d like to mention that the inspiration for this post came from an article I read over at Amanda’s excellent Blogger Buster site. You can find that article here: Add a “Top of Page” icon Link.

While Amanda’s post covers the topic very well there is one additional step I have added which solves a potential problem with the Safari browser. Anyway, in the interests of simplicity I have included all of the steps here, but feel free to check out Amanda’s article as well.

The nitty gritty

Installing the following code in your Blogger site will give you an “up arrow” image which floats on the bottom right side of your screen. Readers can then click this image to instantly scroll back up to the top of the page.

Step 1

Open up your Blogger Layout and copy the following code into a new “HTML/JavaScript” widget. I have included the link to the custom “up arrow” image I use on my site but you can easily replace it with one of your own.

Code:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#top" title="Back to Top"><img src="http://www.growlingdoggames.com/beginnersbloggingguide/ images/up_arrow.gif"/></a>

Now save the widget.

Step 2

Select the “Edit HTML” option, click “Expand Widget Templates” and find the following code (if you haven’t already – make sure you save a backup copy of your Blogger template to your hard drive):

<div id='header-wrapper'>

After the first </b:includable> tag in the Header, insert this code:

<a id='top' name='top'/>

Now save your template and take a look at your handiwork!

A word of warning

Without the second step I found that the “up arrow” wouldn’t scroll all the way to the very top of the page in the Safari browser.

Also – while the image file will float correctly in IE7, Firefox and Safari, in IE6 it will appear wherever you placed the widget. This is just another one of IE6’s many shortcomings.

Please note: you can adjust the position of the arrow by tweaking the css code you put in the widget i.e. instead of “bottom,” “right” you could put “bottom,” “left” etc.

If anyone wants a set of custom arrows let me know and I’ll create some and post them.

How to add a Favicon to your Blogger blog

noreply@blogger.com (Julian Schoffel) — Tue, 13 May 2008 03:15:00 +0000

Favicons are a fantastic way to give your Blogger blog a little added flair and panache. They also happen to be dead easy to create and install…

Favicons stand out

Whenever you’re on the web you may notice small images displayed in the address bar of your browser. They appear directly before the URL of certain websites. These images are known as “favicons” because they are “icons” associated with websites which show up in your browser’s “Favourites” list (in Internet Explorer) or your “Bookmarks” list (in Firefox). In newer browser versions they also display at the top of tabbed panels.

Favicons are extremely worthwhile for a number of reasons:

They make your site look more professional.
They enhance the visual ‘branding’ of your website.
They provide an intuitive way for web-users to find your site in their Favourites or Bookmarks lists.
In newer browsers they also make it easier for people to navigate back to your site via tabbed panels.
If you save your favicons in the Windows Icon (.ico) image format they can also be used as desktop shortcuts for your site.

Step 1: create an image

Favicons are small images which are usually 16px by 16px in size. Your site logo would be a natural choice for a favicon. If you find that your logo is too complex to shrink down to 16px by 16px, try stripping out the most recognisable logo elements and using them as a base for your favicon.

Favicons must be created in one of three possible image formats: .ico (Windows Icon), .gif (Graphics Interchange Format) or .png (Portable Networks Graphics). Of these the .ico format is probably the best way to go because all browsers will recognise it.

Create an .ico image

To create your favicon you can use pretty much any graphics program you want (I used Adobe Fireworks): so long as you can save the image in one of the afore mentioned formats (.ico, .gif or .png) it doesn’t really matter.

If you don’t own a graphics editing program which supports .ico files you may like to give one of these a try: Sib Icon Studio (an .ico image design studio), Any to Icon (converts most major image formats into .ico files).

If you own Adobe Photoshop you can use the free .ico plugin: Telegraphics Photoshop ICO Format Plugin.

Step 2: upload your .ico image to Google Page Creator

Now you’ll need to copy the .ico file to a host server so you can link to it. If you have a Blogger blog the easiest way to do this is via Google Page Creator.

Your Google web files

Go to Google Page Creator and login using your Google account details (the same details you use for Blogger). The first time you login to Page Creator you will be given the option of creating a site based on your Gmail address. Do this now. Don’t worry about how it looks; the important thing is you will soon have somewhere (free) to host your image files.

Your site URL will be “http://YOUR_GMAIL_ADDRESS.googlepages.com/” and you should end up at the page shown in the image above. Now upload your .ico image file and make a note of its URL, it should be something like: “http://YOUR_GMAIL_ADDRESS.googlepages.com/YOUR_ICO_FILENAME.ico”

Step 3: add the favicon HTML to your Blogger site

Now all you need to do is to go into the Blogger Layout Editor and choose the "Edit HTML" option.

Please note: If you haven’t already – make sure you save a backup copy of your Blogger template to your hard drive.

UPDATE!!: The old method of getting a custom favicon to display in a Blogger blog no longer works. As of October 2008 you now need to insert the code in a different area of your Blogger template. I have included the updated method below:

Insert the following code between the ]]></b:skin> and </head> tags in your Blogger template:

<link href='http://YOUR_GMAIL_ADDRESS.googlepages.com/YOUR_ICO_FILENAME.ico' rel='shortcut icon' type='image/x-icon'/>

Don’t forget to change the URL so it points to the .ico file on your Google Page Creator site.

Now save your template and view your blog. If your new favicon doesn’t show up straight away you may need to clear your browser cache.

And that's all there is to it!

Custom background images for 3 column Minima

noreply@blogger.com (Julian Schoffel) — Sat, 10 May 2008 18:43:00 +0000

Well designed background images are one of the best ways to make your blog stand out from the crowd. They can also make it easier for readers to access your content. Here’s how you do it…

I’m going to base this tutorial around the custom 3 column Minima layout we created in my previous article (Converting Blogger Minima template to a 3 column layout).

I think the best way to demonstrate this process is by telling you exactly how I created the background images for this site (The Beginner’s Blogging Guide). The exact same principles apply no matter what sort of images or layout you use so once you have the basics you should have no trouble adapting your own designs.

Create a background image

For this sort of work I always use Adobe Fireworks and, to a lesser extent, Adobe Photoshop. If you only want to buy one graphics program to serve all of your web design needs I highly recommend Adobe Fireworks – it’s just a great all-round package for web-based graphics.

Here’s what I did for this site:

1) I created an image in Fireworks which you can see here:

The original background image

2) I then used Firework’s slice tool to divide the image up into pieces:

Slice the image up

3) I then used Firework’s export tool to save the slices as 3 separate images which you can see here:

You end up with 3 separate images

Now let’s take a look at the positioning of divisional elements (or “divs”) in the 3 column Minima template:

Div layout of 3 column Minima template

As you can see the basic layout consists of an #outer-wrapper which contains 3 divs stacked on top of each other: the #header-wrapper, the #content-wrapper and the #footer.

You’ll also notice that the middle div (#content-wrapper) contains the 3 columns we created in my previous post (Converting Blogger Minima template to a 3 column layout).

The 3 images I created will be placed as backgrounds for the following div elements:

1) #header-wrapper – “blog_layout_top.jpg” (width 960px, height 166px)
2) #content-wrapper – “blog_layout_middle.jpg” (width 960px, height 1px)
3) #footer – “blog_layout_bttm.jpg” (width 960px, height 58px)

OK – for the purposes of this article, let’s assume that you have already created your own set of background images, exactly the same as those above.

So how do we actually incorporate these 3 images into our blog?

While you can easily upload your #header-wrapper or banner image (blog_layout_top.jpg) using the Blogger Layout Editor, you will need to set up a webhost where you can store your other two background images (blog_layout_middle.jpg and blog_layout_bttm.jpg). Let’s do that now.

Setting up a host directory in Google Page Creator

Go to Google Page Creator and login using your Google account details (the same details you use for Blogger). The first time you login to Page Creator you will be given the option of creating a site based on your Gmail address. Do this now. Don’t worry about how it looks; the important thing is you will soon have somewhere (free) to host your image files.

Your site URL will be “http://YOUR_GMAIL_ADDRESS.googlepages.com/” and you should end up at this page:

Your Google web files

Now upload your blog_layout_middle.jpg and blog_layout_bttm.jpg image files and make a note of their URLs, they should be something like “http://YOUR_GMAIL_ADDRESS.googlepages.com/blog_layout_middle.jpg” and “http://YOUR_GMAIL_ADDRESS.googlepages.com/blog_layout_bttm.jpg”

OK, next we will need to tweak the 3 column Minima Blogger template.

Adjusting the Minima Blogger template

If you haven’t already – make sure you save a backup copy of your Blogger template to your hard drive. Now go to the Layout Editor and click “Edit HTML.”

Scroll down your Blogger template until you find the following code (the blue text):

#header-wrapper {
width:960px;
margin:0 auto 0px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

Delete all of it (the blue text above) and replace it with the following code (the red text):

#header-wrapper { width:960px; height: 166px; margin:0 auto 0px; } #header img { margin-$startSide: auto; margin-$endSide: auto; }

What did we just do?

1) We deleted all of Blogger’s banner styling and replaced it with a barebones CSS style rule which defines our #header-wrapper as being 960px wide and 166px high.

2) We removed any margins or borders.

Now scroll down your Blogger template until you find the following code (the blue text):

#outer-wrapper { width: 960px; margin:0 auto; padding:0px; text-align:$startSide; font: $bodyfont; }

And add this code (the red text) directly below it (REMEMBER - DO NOT REPLACE, ADD IT BELOW):

.clear { clear: both; display: block; overflow: hidden; width: 0; height: 0; } #content-wrapper { width: 960px; background-image: url(http://YOUR_GMAIL_ADDRESS.googlepages.com/blog_layout_middle.jpg); background-repeat: repeat-y; }

What did we just do?

1) We added some CCS style rules to the #content-wrapper and defined a background image which will repeat vertically (remember to change the URL of “blog_layout_middle.jpg” so it points to the image on your Google site).

2) We added the .clear CSS style rule so that any content in the #content-wrapper div (i.e. blog posts, sidebar widgets etc.) will push the repeated background image (“blog_layout_middle.jpg”) down the page, giving our layout stylistic continuity.

Now scroll down your Blogger template until you find the following code (the blue text):

#footer { width: 960px; clear: both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; }

and replace it with this (the red text):

#footer { width: 960px; clear: both; background-image: url(http://YOUR_GMAIL_ADDRESS.googlepages.com/blog_layout_bttm.jpg); height: 58px; margin:0 auto; padding-top:0px; line-height: 1.6em; text-transform:normal; letter-spacing:.1em; text-align: center; }

What did we just do?

1) We gave the #footer div a height of 58px and defined a background image (remember to change the URL of “blog_layout_bttm.jpg” so it points to the image on your Google site).

2) We removed some padding so our background images line up flush with one another.

Ok now save your template!

Upload your banner image

The final step

Click the “Page Elements” tab and then hit the “Edit” link on the “Header” widget. Now browse to the “blog_layout_top.jpg” image on your hard drive and upload it. Select “Instead of title and description” and then “Save Changes.”

That’s it! Now view your blog and you should see your new background images flowing together into one uniform layout.

Please note: background images are a fantastic way to create a truly unique look for your blog but remember that you will have to adjust the size and margins of your divs to accommodate them.

If you have any problems please don’t hesitate to send me an email or post a comment and I will be happy to try and help you.

In my next post I will show you how to create a favicon.ico icon image for your Blogger blog and how to host it on your Google Page Creator site.

Blogger 3 column Minima layout

noreply@blogger.com (Julian Schoffel) — Tue, 06 May 2008 12:24:00 +0000

The standard “Minima” Blogger template consists of an outer wrapper containing a header, a content wrapper (which is split into 2 floating columns) and a footer. So how do you create a 3 column layout?

Please note: before you make any alterations to your Blogger template ALWAYS save a backup copy to your hard drive. You can do this by selecting the “Layout” option in Blogger, then the “Edit HTML” option, then “Download Full Template.”

Adding a new column to the Minima Blogger template

Many Blogger templates are set up for a screen resolution of 800 by 600. In recent months when analysing the stats of my sites (using Google Analytics and Feedburner) I haven’t come across anyone who still uses this old resolution. With this in mind I think it’s safe to reconfigure our sites to suit a minimum screen resolution of 1024 by 768. However it’s always a good idea to leave a little space for browser chrome (the extra space used by browser scroll bars etc.), so I think that a width of 960 pixels is about perfect.

OK let's do it! Select the Blogger "Layout" option and then "Edit HTML." Now scroll down until you find the following code (the blue text):

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

This code defines the outermost, surrounding wrapper (#outer-wrapper), the area where your posts will go (#main-wrapper) and a sidebar (#sidebar-wrapper).

Now replace the above code (the blue text) with the following code (the red text):

.clear {
clear: both;
display: block;
overflow: hidden;
width: 0;
height: 0;
}

#outer-wrapper {
width: 960px;
margin:0 auto;
padding:0px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 569px;
margin-right: 15px;
margin-left: 20px;
text-align: left;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 133px;
margin-left: 20px;
margin-right: 25px;
float: right;
word-wrap: nowrap; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar-wrapper {
width: 133px;
margin-left: 30px;
margin-right: 15px;
float: left;
word-wrap: nowrap; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

So what did we just do?

We defined style rules for a clearance div class (.clear).
We defined an additional sidebar (#newsidebar-wrapper).
We changed the width of the #outer-wrapper to 960px.
We changed the width of the #main-wrapper to 604px (including margins).
We changed the widths of the 2 sidebars to 178px (including margins).
We floated one sidebar and the #main-wrapper (where your posts appear) to the left and one sidebar to the right.
We also added some margins for content alignment.

Please note: it's vitally important that your widths, margins, padding and borders add up to no more than the width of their containers i.e. 604px + 178px + 178px = 960px. See my post - Troubleshooting 3 column Minima layout for more information on widths, margins, padding and borders.

Changing the widths of the header and footer

We should now adjust the widths of the #header-wrapper (where your banner image resides) and #footer (where you can put copyright information or anything else you like) to match the other widths.

Scroll down your Blogger template until you find the #header-wrapper code (the blue text):

#header-wrapper { width:660px; margin:0 auto 10px; border:1px solid $bordercolor; }

and replace it with this (the red text):

#header-wrapper { width:960px; margin:0 auto 0px; border:1px solid $bordercolor; }

OK now scroll down your Blogger template until you find the #footer code (the blue text):

#footer { width:660px; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; }

and replace it with this (the red text):

#footer { width:960px; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; }

The final step: centering your blog posts

Now all we need to do is add one final piece of code to the Blogger template. This will configure your newly customised Minima template to position your blog posts between the 2 sidebars.

OK now scroll down your Blogger template until you find the following code (the blue text):

<div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div>

And add this code (the red text) directly above it (REMEMBER - DO NOT REPLACE, ADD IT ABOVE):

<div id='newsidebar-wrapper'> <b:section class='sidebar' id='newsidebar' preferred='yes'> <b:widget id='Profile2' locked='false' title='About Me' type='Profile'/> </b:section> </div>

Earlier in this tutorial we added the “float: left” style rule to the #newsidebar-wrapper. By placing the above code before #main-wrapper (which also has the “float: left” style rule), we are telling the browser to display the #newsidebar-wrapper first, then the #main-wrapper, followed by the other #sidebar-wrapper (which has the “float: right” style rule). Or put simply – 3 columns with your blog posts in the centre.

Update (Feb 22 2009): Recently some people have been having problems with the original 'NewProfile' id - so I have changed it to 'Profile2' - which worked when I tested it in Blogger.

Please note: we have also told the #newsidebar-wrapper to display your Blogger Profile but this can easily be changed using Blogger’s Layout editor.

Now save your template and go into the Layout Editor. It should have changed from this:

Before...

To this:

After!

Please note: you can reconfigure the widths of your 3 columns (and any of your other divisional elements i.e. #outer-wrapper, #main-wrapper etc.) any way you want to, just remember to factor margins etc. into your calculations. If you do want to experiment, make sure you save a backup of your template beforehand.

It's also possible to display your blog posts on the left or right (by simply moving some code around in your template - just ask me and I will be more than happy to tell you how).

Update!: if you are having problems implementing your 3 column Minima Blogger layout you might like to check out my recent post - Troubleshooting 3 column Minima layout.

In my next article I'll show you how to "Create custom background images for your 3 column Minima Blogger template."

Creating your own blog using Google Blogger

noreply@blogger.com (Julian Schoffel) — Fri, 02 May 2008 13:40:00 +0000

If you’re reading this I’ll assume that you want to start your own blog. And why wouldn’t you? Blogs are empowering. A blog allows you to reach out and connect with a vast potential audience or, if you prefer, a small intimate one...

The sole purpose of The Beginner’s Blogging Guide is to allow me to share everything that I learn about blog design with you.

The prime directive of any blog is to clearly and concisely convey the blog author’s message to an audience.

You can accomplish this is by creating a well designed, user-friendly blog that showcases your content in its best light.

And by this I don’t mean that your blog should look boring or conservative. As long as you follow a couple of key stylistic principles your blog can look…well…however you want it to look.

From the get-go I’d like to state that I’ll be focussing exclusively on Google’s Blogger service but please be aware that there are other excellent blog publishing tools available; like Wordpress for example.

Setup a Blogger account

Using Google’s Blogger and Page Creator services it’s possible to create and host an extremely sophisticated blog without incurring any web design or web hosting costs.

Ok, let’s get started.

Create a blog

Go to the Blogger site and click the “Create your blog now” link.

Once you create a Google account you can use the same login details for all of your Google services (if you already have a Google account enter your details now). Later on we will also be using Google’s Page Creator and Feedburner services.

The next step is to give your blog a title. This is very important because you are essentially creating the branding for your blog.

Your blog's name is very important!

Give your blog a name

When naming a blog you want to achieve two things:

1) You want to give people an inkling of what your blog is about.
2) You want to create a memorable name that stands out from the crowd.

Ideally your blog’s title will accomplish both of these goals.

Create a blog address

After you’ve selected your title you’ll need to pick a blog address (which will become the URL of your blog). The blog address is also extremely important and should be identical to, or at the very least, similar to your blog’s title.

So if you named your blog “Life, the Universe and Everything” you should make your blog address “lifetheuniverseandeverything.blogspot.com.” Just bear in mind that many blog names and addresses will have already been taken so you may have to exercise a little creativity and imagination to come up with something catchy.

Now enter the word verification text and hit the “Continue” arrow.

Choose the "Minima" template

Choose the “Minima” blog template

You’ll now find yourself in the blog template page. Select the “Minima” template and click the “Continue” arrow.

That’s it – you have laid the foundations of your first blog!

Many people are happy to stick with unmodified Blogger templates but with a little extra effort it’s possible to design a truly unique blog by customising the template and creating some artwork of your own.

In my next article I'll show you how to "Convert your Blogger Minima template to a 3 column layout."