Add Compressed External Css Blogger Template - ≪B:Skin≫ Css
1. Download as well as Backup Your Blogger Template.
To produce so, get-go watch www.blogger.com as well as therefore larn inwards your username as well as password to login within your blogger account. Once logged inwards you lot volition automatically province on your default Blogger 'Dashboard'.
On Blogger's 'Dashboard' nether 'Manage Blogs' create upwardly one's heed which weblog you lot desire to piece of work with. If you've to a greater extent than than 1 alive blogs as well as therefore wisely conduct the weblog whose template you lot desire to modify. Incase if you lot create got solely 1 active weblog as well as therefore thats the solely weblog you lot create got to piece of work with.
Now inwards this step, for security reason, lets get-go Download as well as Backup your electrical current XML Blogger Template. To produce therefore click 'Layout' followed yesteryear 'Edit HTML'. On 'Edit HTML' page nether 'Backup / Restore Template' click 'Download Full Template' to relieve as well as backup master copy re-create of your electrical current Blogger Template. Once done, in 1 lawsuit again repeat same physical care for to Download as well as Save around other re-create of Blogger Template on your Desktop. Another re-create saved on your Desktop is What nosotros are going to alter as well as incase if something goes incorrect inwards our alteration physical care for you lot tin e'er restore your master copy Blogger Template amongst its prior backuped copy.
2. Open XML Blogger Template inwards Notepad++.
Now you lot create got a working re-create of your blogger template saved on Desktop. In this measuring you lot volition ask a freeware Software called 'Notepad++' or 'Notepad Plus'. You tin download this gratis text editor from this website: http://notepad-plus.sourceforge.net.
After downloading 'Notepad++' install it as well as opened upwardly your XML Template Document before saved on Desktop for editing.
I assume you've opened your XML Blogger Template document inwards Notepad++.
Now press 'CTRL+F' as well as search for this tag <b:skin> inwards your template code.
What is <b:skin> tag? Answer: <b:skin> tag is located within <head> tag i.e betwixt <head>...</head>. The CSS Style declarations of your blogger template is already saved within the duet of <b:skin> tags i.e betwixt <b:skin>....<b:skin>.
The <b:skin> code construction looks something similar this :-
<?xml version="1.0" encoding="UTF-8" ?> ... <head> ... <b:skin> <![CDATA[/* ----------------------- Blogger Template Style Name: Minima ----------------------*/ torso { 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> 3. Getting Ready To Make External CSS File.
Note:- I assume you've Windows XP installed on your PC.
Now opened upwardly 'My Computer' select 'Tools' tab as well as therefore 'Folder Options' -> 'View' -> nether Advanced Settings, untick 'Hide extensions for known file types' as well as click 'Apply' as well as therefore 'OK'. This volition aid you lot reckon the extensions of all files on your PC. Example file.txt, file.exe, file.css as well as therefore on.
Now correct click on your Desktop as well as select 'New' -> 'Text Document'. This volition create a novel text document, rename it equally 'myblogdesign.css'. This CSS file is were you'll glue CSS code from your template located betwixt <b:skin><![CDATA[....]]></b:skin>. Later nosotros volition upload 'myblogdesign.css' file equally an external CSS document of our blog.
4. Copy & Cut CSS Code Within <![CDATA[....]]>.
I assume you've located the
Now re-create as well as cutting entire CSS Code betwixt <b:skin><![CDATA[ CSS Code ]]></b:skin>. Due tending should hold upwardly create got spell selecting CSS Code. I repeat in 1 lawsuit again re-create as well as cutting CSS Code solely within <b:skin><![CDATA[ ..Here is your CSS Code located.. ]]></b:skin>
Now opened upwardly 'myblogdesign.css' inwards Notepad++ you lot created earlier.
Then glue hither CSS Code you lot merely copied. Save 'myblogdesign.css'.
Voila! You merely created an External CSS Document for your Blog.
Also don't forget to relieve your XML Template.
Now amongst all CSS code transfered to 'myblogdesign.css' as well as after saving your template its XML code strcuture should await something similar this...
<?xml version="1.0" encoding="UTF-8" ?> ... <head> ... <b:skin><![CDATA[ ]]></b:skin> </head>
5. Uploading External CSS File to Google Sites.
Now since your are gear upwardly amongst External CSS Document lets upload it to Google Sites. You tin too upload it to whatsoever other gratis file hosting server but even therefore I would e'er prefer as well as produce recommend to operate solely Google Sites.
Here are few reasons, Why opt Google Sites for Hosting your .CSS, .JS, .TXT, RAR Documents ?:-
- Google Sites is a reliable Hosting for smaller files.
- You indirectly brand operate of Google's powerful CDN Network.
- Hotlinking of CSS, Javascript, Text, Zipped files is allowed.
- Bandwidth limitation is non an issue.
- You don't fifty-fifty create got to worry most hosting server's downtime.
- Most of import reason, it is 100% Free service.
6. How to upload 'myblogdesign.css' to Google Sites ?
- Visit Google Sites through http://sites.google.com.
- Login Google Sites amongst your Google Account. You amend operate same Google Account you lot operate for Blogger.
- 'Creat New Site' yesteryear naming your site, naming url location, choosing subject as well as entering CAPTCHA Human Verification Code.
- Then click on your lately created site. This opened upwardly an online editor for your site.
- Look for 'More Actions' button, clicking this buttom select 'Manage Sites'. On the left side navigation nether 'Site Content' click 'Attachments' as well as therefore you'll reckon upload button. This is from were you lot tin upload you lot files to Google Sites.
- Now click 'upload' button. Select 'Browse' as well as give path to 'myblogdesign.css' which is on your desktop ans press 'upload'. This volition upload your .css file to Google Sites.
- After uploading .css file movement your cursor to 'Download' link which is inwards default Blue colour. You'll larn url for your .CSS document. Copy that link.
- Now the url address of your .css document volition await something similar this http://sites.google.com/site/gauravakranisite/Home/kalyancitylife.css?attredirects=0&d=1
- Analyse your URL adress of your CSS document as well as take away everything from '?attredirects=0&d=1'. Now truthful place of your css document inwards higher upwardly example would await similar http://sites.google.com/site/gauravakranisite/Home/kalyancitylife.css
- Thus you lot in conclusion got url link of your .css document which you lot tin hotlink later.
My External CSS is located here:-
http://sites.google.com/site/gauravakranisite/Home/kalyancitylife.css
7. Adding External CSS to Blooger Template.
Now in 1 lawsuit again opened upwardly (in Notepad ) the same re-create of your Blogger Template which is on your Desktop. Now press 'CTRL + F' as well as search for <b:skin> tag.
Just before <b:skin> tag re-create as well as glue 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 volition hold upwardly unlike for unlike people.
You tin fifty-fifty create got unlike CSS files of your weblog for differnt medias using next 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 tin fifty-fifty introduce unique css solely for a detail browser or user agent. Say inwards example of Internet Explorer it tin hold upwardly similar 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 amongst external css your template code construction volition await something similar 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 higher upwardly construction Save it.
Note:- It is real much of import that you lot add together <link> tag amongst external css merely before <b:skin> tag else it may give around display work due to conflict.
You tin too compress your CSS Code safely yesteryear merely removing extra whitespaces. I used this gratis online service to take away whitespaces from my css code.
8. Upload Modified Template With External CSS.
Once in 1 lawsuit again login inwards your blogger work concern human relationship as well as and therefore larn to 'Layout' >> 'Edit HTML'. Under 'Backup / Restore Template' click 'Choose File' as well as 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 as well as concluding measuring to verify that everthing went right. If you lot made around mistakes inwards higher upwardly physical care for you lot may run across display issues. In such a example retrace as well as banking concern gibe higher upwardly physical care for in 1 lawsuit once again as well as campaign troubleshooting errors. This volition certainly gear upwardly your CSS implementation as well as display problems. In worst example if you lot tried your best as well as even therefore getting display problems revert dorsum your master copy template amongst inline CSS code.
10. Conclusion! External CSS In Blogger Template.
This weblog create got succesfully implemented external CSS as well as don't operate inline CSS anymore. The principal argue to operate external css over inline css is to larn smaller page size, this helps inwards faster loading, it is fifty-fifty slowly to alter CSS blueprint without touching blogger template. Further you lot tin fifty-fifty command as well as implement unlike blueprint interface for your site on unlike user agents.
No comments