KALYAN CITY LIFE

Sharing Wisdom and Vivid Memories of Life

Add Compressed External CSS Blogger Template - <b:skin> CSS


red square 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.


External CSS Blogger Template


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.



red square 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.


I assume you've opened your XML Blogger Template document in Notepad++.


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>.


The <b:skin> code structure looks something like this :-


<?xml version="1.0" encoding="UTF-8" ?>
...
<head>
...
<b:skin>

<![CDATA[/*
-----------------------
Blogger Template Style
Name:     Minima
----------------------*/
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
#footer {
width:660px;
clear:both;}
]]>

</b:skin>
</head>



red square 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.



red square 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...


<?xml version="1.0" encoding="UTF-8" ?>
...
<head>
...
<b:skin><![CDATA[

]]></b:skin>

</head>



red square 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.


Here are few reasons, Why opt Google Sites for Hosting your .CSS, .JS, .TXT, RAR Documents ?:-


  1. Google Sites is a reliable Hosting for smaller files.
  2. You indirectly make use of Google's powerful CDN Network.
  3. Hotlinking of CSS, Javascript, Text, Zipped files is allowed.
  4. Bandwidth limitation is not an issue.
  5. You don't even have to worry about hosting server's downtime.
  6. Most important reason, it is 100% Free service.


red square 6. How to upload 'myblogdesign.css' to Google Sites ?



  1. Visit Google Sites through http://sites.google.com.
  2. Login Google Sites with your Google Account. You better use same Google Account you use for Blogger.
  3. 'Creat New Site' by naming your site, naming url location, choosing theme and entering CAPTCHA Human Verification Code.
  4. Then click on your recently created site. This open an online editor for your site.
  5. 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.
  6. 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.
  7. 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.
  8. 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
  9. Analyse your URL adress of your CSS document and remove everything from '?attredirects=0&d=1'. Now true location of your css document in above case would look like http://sites.google.com/site/gauravakranisite/Home/kalyancitylife.css
  10. Thus you finally got url link of your .css document which you can hotlink later.

My External CSS is located here:-


http://sites.google.com/site/gauravakranisite/Home/kalyancitylife.css



red square 7. Adding External CSS to Blooger Template.



Now again open (in Notepad ) the same copy of your Blogger Template which is on your Desktop. Now press 'CTRL + F' and search for <b:skin> tag.


Just before <b:skin> tag copy and paste this code ...


<link rel="stylesheet" href="http://sites.google.com/site/gauravakranisite/Home/kalyancitylife.css" type="text/css" media="all" charset="utf-8" />


Note:- Here value of href will be different for different people.


You can even have different CSS files of your blog for differnt medias using following codes ...


<link rel="stylesheet" href="http://sites.google.com/site/gauravakranisite/Home/kalyancitylife.css" type="text/css" media="screen" charset="utf-8" />

<link rel="stylesheet" href="http://sites.google.com/site/gauravakranisite/Home/kalyancitylife-print.css" type="text/css" media="print" charset="utf-8" />

<link rel="stylesheet" href="http://sites.google.com/site/gauravakranisite/Home/kalyancitylife-handheld.css" type="text/css" media="handheld" charset="utf-8" />


You can even present unique css only for a particular browser or user agent. Say in case of Internet Explorer it can be like this...


<!--[if IE]>
<link rel="stylesheet" href="http://sites.google.com/site/gauravakranisite/Home/kalyancitylife-ie.css" type="text/css" media="screen, projection" />
<![endif]-->


After adding <link> tag with external css your template code structure will look something like this...


<?xml version="1.0" encoding="UTF-8" ?>
...
<head>

<link rel="stylesheet" href="http://sites.google.com/site/gauravakranisite/Home/kalyancitylife.css" type="text/css" media="all" charset="utf-8" />
<b:skin><![CDATA[

]]></b:skin>

</head>


After verifying above structure Save it.


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.



red square 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'.



red square 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.



red square 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:

  1. Nikesh said...

    It's works for me also.
    Thanks much

  2. Vivian said...

    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.

  3. Vivian said...

    OK, I've found the answers to both my questions.

  4. syockit said...

    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 :)

Please Comment



 
Scroll To Top