The first two things I do when starting a new, or modifying an existing Blogger blog is backup the original template and relocate the CSS (Cascading Style Sheet).
So lets backup. Go to your template and right click, select all, right click again and copy. Now open up a text editor like notepad and paste in the original template and save. Mine is named "originaltemplatebackup.txt." I create a folder on my computer named after my blog and use it to store important files like this.
I chose Minima as my template because both it and the accompanying CSS are the simplest and easiest to modify.
After you've saved a copy of the original go back to your template and at the top you'll see the start of the 'style' statement. It starts with this…
<style type="text/css">
And ends with this…
</style>
In between those two statements is an awful lot of CSS. We are going to rip it all out of there and relocate it into its own, separate file.
Why? I'll tell you in a minute, I'm on a roll.
Highlight everything between these two 'style' statements including the statements themselves, then right click, copy and then paste it all into your trusty text editor. Name this new text file "blogstitle.css." Mine is named "brucified.css."
Before you close your new blogstitle.css file be sure and remove the now useless <style type="text/css"> at the top and the closing </style> at the bottom of the text file. Save it in the folder on your computer named after your blog. You did create a folder on your computer named after your blog didn't you?
Now you may be asking, "What are we going to do with this shiny new CSS file?" In my case, because I host my blog on my own domain, I'm going to upload it into the root directory of Brucified via FTP using that most excellent Firefox extension FireFTP. If you don't have your own domain and you're using blogspot then you're going to have to find an alternative remote host. There are free hosts available where you can upload your CSS file and your blog can have access to it. Try
here or
here.
You can now delete all of the style information out of your blog template including those now useless <style> statements. Now you must tell your blog where it can find the style sheet information by putting this...
<link rel="stylesheet" type="text/css" href="http://www.where-eva.com/ blogtitle.css" />
right after the <title> tags. Be sure and change the href location to point to your CSS file. Mine looks like this…
<head>
<title> <$BlogPageTitle$> </title>
<link rel="stylesheet" type="text/css" href="http://www.brucified.com/brucified.css" />
<$BlogMetaData$>
</head>
And that's it, almost. During this process we removed Mr. Bowman's credit from the blog's template and it now resides in our CSS file. That's not a good thing for us or Mr. Bowman.
We can solve our problem by simply deleting the following from our "blogtitle.css" file…
/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
----------------------------------------------- */
We have two choices for crediting Mr. Bowman for his work, and we should. We can re-include the credit in the head section of the template like this…
<!--
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
-----------------------------------------------
-->
Or, as I like to do, give the guy a link in the footer like this…
Original Minima Blogger Template Design by <a href="http://www.stopdesign.com">Douglas Bowman</a> and soon to be heavily modified by Me.
Please notice that if you re-include the credit in the template (the first option) that you'll need to change the style comment identifiers from /* */ to markup language comment identifiers <!-- -->
Now, back to the question "why?" Relocating the CSS (Cascading Style Sheet) information does two very important things for us. First, it makes your pages smaller and therefore faster. The CSS file will be cached on the client side (your visitor's browser cache) so it will be readily available if they decide to click around your blog, the information will not need to be downloaded from the server again.
The second and most important reason is that it reduces the code to content ratio of your blog's pages. The code is the necessary markup the user's browser needs to properly display your page. The content is the all important writing you want your visitors to see and the search engine spiders to index. A low code to content ratio will improve your search engine placement.
If you have problems pulling this off leave me comment and I'll try to help you out. Be sure to post your blogs URL (Uniform Resource Locator).
If this technique doesn't work for you because your blog is hosted on Google's Blogspot or you just can't find a place to host your CSS file, fear not.
In my next post I'll have an alternative way to optimize Blogger's CSS that will work for you.
Labels: Blogger, CSS, SEO, Webmaster
