Do you want your blog to load much faster than it does now? In that case, you can go for external CSS stylesheets. In this tutorial, we will deal with externalizing the stylesheet on Google's Blogger platform. I have been working on putting the stylesheet on my blogs on an external server for some time. Here is the tutorial for you.
For analysis, let’s look at this blog: RedBugle (redbugle.blogspot.com). The basic design of the blog is this right now:
I have used the Awesome Inc., template of Blogger as you can see. The goal is to achieve the same look and effect after externalizing the blog’s stylesheet. By the way, CSS (Cascading Style Sheet) is a part of the HTML markup that contains the information as to how the blog displays on different user agents (browsers). In Blogger, the entire stylesheet that you can customize and change according to the need is contained in between these two tags: '<b:skin><![CDATA[' and ']]></b:skin>'. So your first task is to find these tags. Look at the image below:
The stylesheet includes the ‘/*’ that comes right after CDATA[.
Several bloggers and technicians out there have been advising to cut the data in between these tags (<b:skin><![CDATA[ and ]]></b:skin>) and paste it into an external file to create the stylesheet. Say, you followed that advice, then your blog will look like this (we will come to hosting and other stuff later).
As you can see, the blog has no design whatsoever. The external stylesheet simply didn’t work.
Now, create a text file on your desktop and name it whatever you want. Just put the extension of the file as ‘css’ instead of ‘txt’. (You can see extensions of files by going to Control Panel->Folder Options->Uncheck ‘Hide extensions of known file types’). Paste the entire CSS code into this text file and save it.
In order to host the CSS file, you can either use your hosting service provider (if you have one), or you can get it hosted for free with Google Sites or a cloud storage service like Dropbox.
If you are using Google Sites, just sign into the service and create a website. Click on ‘more’ on the top from within your site, and click on ‘Manage site’. Here, click on ‘Attachments’ and you will see the upload button. Upload your CSS file into this hosting server.
Now, just right-click on ‘Download’ and get the public link of the CSS file. This is the one you are going to use for the external call.
If you are using Dropbox, just download the application and set it up. Sign up on Dropbox, and enable syncing of the Public folder (this will be automatically created by Dropbox). Just copy and paste your CSS file into this folder and it will be automatically synced with Dropbox server in a few moments.
From the Public folder, right-click the CSS file and from the Dropbox menu, get the public link of the file. This is the URI of the CSS that we are going to use with the blog.
As a first step now, just delete everything between the <b:skin><![CDATA[ and ]]></b:skin> tags. Find the closing of the head tag; search for </head>. You need to add a link tag over here. The link element you are adding here is the one used to call an external stylesheet. The completed code looks like this:
‘StyleSheetFile.css’ should be replaced with the actual link to your CSS file. Save the template.
There you go! Now, just check the blog in all browsers and see if the CSS is showing up properly. The external CSS file will increase the blog load time for subsequent page views, as the CSS file gets cached once it has been loaded into the browser.
Blogger Template Stylesheet
For analysis, let’s look at this blog: RedBugle (redbugle.blogspot.com). The basic design of the blog is this right now:
I have used the Awesome Inc., template of Blogger as you can see. The goal is to achieve the same look and effect after externalizing the blog’s stylesheet. By the way, CSS (Cascading Style Sheet) is a part of the HTML markup that contains the information as to how the blog displays on different user agents (browsers). In Blogger, the entire stylesheet that you can customize and change according to the need is contained in between these two tags: '<b:skin><![CDATA[' and ']]></b:skin>'. So your first task is to find these tags. Look at the image below:
The stylesheet includes the ‘/*’ that comes right after CDATA[.
Several bloggers and technicians out there have been advising to cut the data in between these tags (<b:skin><![CDATA[ and ]]></b:skin>) and paste it into an external file to create the stylesheet. Say, you followed that advice, then your blog will look like this (we will come to hosting and other stuff later).
As you can see, the blog has no design whatsoever. The external stylesheet simply didn’t work.
The actual stylesheet of Blogger is not between <b:skin> tags. What goes in between these tags is just a precompiled version of the CSS that has some Blogger specific code.
Why did this happen? Because the actual stylesheet of Blogger is not between <b:skin> tags. What goes in between these tags is just a precompiled version of the CSS that has some Blogger specific code. You can get the actual stylesheet only from the page rendered on a browser, from the HTML source code. Go to your browser, and get to the source code of the blog. You will find <style> </style> element in here. What goes in between these is the actual CSS stylesheet that you need to use. Copy this code.Now, create a text file on your desktop and name it whatever you want. Just put the extension of the file as ‘css’ instead of ‘txt’. (You can see extensions of files by going to Control Panel->Folder Options->Uncheck ‘Hide extensions of known file types’). Paste the entire CSS code into this text file and save it.
Hosting the CSS File
In order to host the CSS file, you can either use your hosting service provider (if you have one), or you can get it hosted for free with Google Sites or a cloud storage service like Dropbox.
1. Google Sites
If you are using Google Sites, just sign into the service and create a website. Click on ‘more’ on the top from within your site, and click on ‘Manage site’. Here, click on ‘Attachments’ and you will see the upload button. Upload your CSS file into this hosting server.
Now, just right-click on ‘Download’ and get the public link of the CSS file. This is the one you are going to use for the external call.
2. Using Dropbox
If you are using Dropbox, just download the application and set it up. Sign up on Dropbox, and enable syncing of the Public folder (this will be automatically created by Dropbox). Just copy and paste your CSS file into this folder and it will be automatically synced with Dropbox server in a few moments.
From the Public folder, right-click the CSS file and from the Dropbox menu, get the public link of the file. This is the URI of the CSS that we are going to use with the blog.
Putting Stylesheet Into the Blog
As a first step now, just delete everything between the <b:skin><![CDATA[ and ]]></b:skin> tags. Find the closing of the head tag; search for </head>. You need to add a link tag over here. The link element you are adding here is the one used to call an external stylesheet. The completed code looks like this:
<link rel=”Stylesheet” href=”StyleSheetFile.css” type=”text/css” media=”all”/>
</head>
</head>
‘StyleSheetFile.css’ should be replaced with the actual link to your CSS file. Save the template.
There you go! Now, just check the blog in all browsers and see if the CSS is showing up properly. The external CSS file will increase the blog load time for subsequent page views, as the CSS file gets cached once it has been loaded into the browser.