1. Download and Backup Your Blogger Template.

To do so, first visit www.blogger.com then enter your username and password to login inside your blogger account. Once logged in you will automatically land on your default Blogger 'Dashboard'.

On Blogger's 'Dashboard' under 'Manage Blogs' decide which blog you want to work with. If you've more than one live blogs then wisely choose the blog whose template you want to modify. Incase if you have only one active blog then thats the only blog you have to work with.

Now in this step, for safety reason, lets first Download and Backup your current XML Blogger Template. To do so click 'Layout' followed by 'Edit HTML'. On 'Edit HTML' page under 'Backup / Restore Template' click 'Download Full Template' to save and backup original copy of your current Blogger Template. Once done, again repeat same procedure to Download and Save another copy of Blogger Template on your Desktop. Another copy saved on your Desktop is What we are going to modify and incase if something goes wrong in our modification process you can always restore your original Blogger Template with its prior backuped copy.

2. Open XML Blogger Template in Notepad++.

Now you have a working copy of your blogger template saved on Desktop. In this step you will need a freeware Software called 'Notepad++' or 'Notepad Plus'. You can download this free text editor from this website: http://notepad-plus.sourceforge.net.

After downloading 'Notepad++' install it and open your XML Template Document earlier saved on Desktop for editing.

Now press 'CTRL+F' and search for this tag <b:skin> in your template code.

What is <b:skin> tag? Answer: <b:skin> tag is located inside <head> tag i.e between <head>...</head>. The CSS Style declarations of your blogger template is already saved within the pair of <b:skin> tags i.e between <b:skin>....<b:skin>.

3. Getting Ready To Make External CSS File.

Note:- I assume you've Windows XP installed on your PC.

Now open 'My Computer' select 'Tools' tab then 'Folder Options' -> 'View' -> under Advanced Settings, untick 'Hide extensions for known file types' and click 'Apply' then 'OK'. This will help you see the extensions of all files on your PC. Example file.txt, file.exe, file.css and so on.

Now right click on your Desktop and select 'New' -> 'Text Document'. This will create a new text document, rename it as 'myblogdesign.css'. This CSS file is were you'll paste CSS code from your template located between <b:skin><![CDATA[....]]></b:skin>. Later we will upload 'myblogdesign.css' file as an external CSS document of our blog.

4. Copy & Cut CSS Code Within <![CDATA[....]]>.

I assume you've located the tag in your template code.

Now copy and cut entire CSS Code between <b:skin><![CDATA[ CSS Code ]]></b:skin>. Due care should be take while selecting CSS Code. I repeat again copy and cut CSS Code only within <b:skin><![CDATA[ ..Here is your CSS Code located.. ]]></b:skin>

Now open 'myblogdesign.css' in Notepad++ you created earlier.

Then paste here CSS Code you just copied. Save 'myblogdesign.css'.

Voila! You just created an External CSS Document for your Blog.

Also don't forget to save your XML Template.

Now with all CSS code transfered to 'myblogdesign.css' and after saving your template its XML code strcuture should look something like this...

5. Uploading External CSS File to Google Sites.

Now since your are ready with External CSS Document lets upload it to Google Sites. You can also upload it to any other free file hosting server but still I would always prefer and do recommend to use only Google Sites.

Then click on your recently created site. This open an online editor for your site.

Look for 'More Actions' button, clicking this buttom select 'Manage Sites'. On the left side navigation under 'Site Content' click 'Attachments' then you'll see upload button. This is from were you can upload you files to Google Sites.

Now click 'upload' button. Select 'Browse' and give path to 'myblogdesign.css' which is on your desktop ans press 'upload'. This will upload your .css file to Google Sites.

After uploading .css file move your cursor to 'Download' link which is in default Blue colour. You'll get url for your .CSS document. Copy that link.

Now the url address of your .css document will look something like this http://sites.google.com/site/gauravakranisite/Home/kalyancitylife.css?attredirects=0&d=1

Note:- It is very much important that you add <link> tag with external css just before <b:skin> tag else it may give some display problem due to conflict.

You can also compress your CSS Code safely by just removing extra whitespaces. I used this free online service to remove whitespaces from my css code.

8. Upload Modified Template With External CSS.

Once again login in your blogger account and then go to 'Layout' >> 'Edit HTML'. Under 'Backup / Restore Template' click 'Choose File' and give path to your modified blogger template which is on your desktop. Then press 'upload'.

9. Testing Implementation of Blog's External CSS.

Now testing is a crucial and final step to verify that everthing went right. If you made some mistakes in above procedure you may encounter display issues. In such a case retrace and check above procedure once again and try troubleshooting errors. This will surely fix your CSS implementation and display problems. In worst case if you tried your best and still getting display problems revert back your original template with inline CSS code.

10. Conclusion! External CSS In Blogger Template.

This blog have succesfully implemented external CSS and don't use inline CSS anymore. The main reason to use external css over inline css is to get smaller page size, this helps in faster loading, it is even easy to modify CSS design without touching blogger template. Further you can even control and implement different design interface for your site on different user agents.

4 Comments:

Thanks Gaurav. This is helpful. But is there any reason to leave in the template? Why not just delete it altogether?

Another thing I am wondering is whether I can use Blogger's new page-making feature to make a new page and put the CSS code in there. Maybe it won't have the right extension, but does that matter as long as I can point to it with the link tag? I think I'll try it as see what happens.

Also note that you will lose the ability to change the settings through Template Designer. But since you know enough CSS already, this is not a problem. It only becomes a problem when you decide to share the template, then you would have to tell them how to do external CSS (by linking to this article :)