1. Download as well as Backup Your Blogger Template.
To practise so, origin view www.blogger.com hence instruct 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' determine which blog you lot desire to piece of work with. If you've to a greater extent than than 1 alive blogs hence wisely pick out the blog whose template you lot desire to modify. Incase if you lot cause got alone 1 active blog hence thats the alone blog you lot cause got to piece of work with.
Now inwards this step, for security reason, lets origin Download as well as Backup your electrical flow XML Blogger Template. To practise hence 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 flow Blogger Template. Once done, 1 time again repeat same physical care for to Download as well as Save but about other re-create of Blogger Template on your Desktop. Another re-create saved on your Desktop is What nosotros are going to alteration as well as incase if something goes incorrect inwards our modification physical care for you lot tin ever restore your master copy Blogger Template amongst its prior backuped copy.
2. Open XML Blogger Template inwards Notepad++.
Now you lot cause got a working re-create of your blogger template saved on Desktop. In this measurement you lot volition bespeak a freeware Software called 'Notepad++' or 'Notepad Plus'. You tin download this costless text editor from this website: http://notepad-plus.sourceforge.net.
After downloading 'Notepad++' install it as well as opened upward 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 span 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 upward 'My Computer' select 'Tools' tab hence 'Folder Options' -> 'View' -> nether Advanced Settings, untick 'Hide extensions for known file types' as well as click 'Apply' hence '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 hence on.
Now correct click on your Desktop as well as select 'New' -> 'Text Document'. This volition practise a novel text document, rename it every bit '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 every bit 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 attention should survive cause got acre selecting CSS Code. I repeat 1 time again re-create as well as cutting CSS Code alone within <b:skin><![CDATA[ ..Here is your CSS Code located.. ]]></b:skin>
Now opened upward 'myblogdesign.css' inwards Notepad++ you lot created earlier.
Then glue hither CSS Code you lot but copied. Save 'myblogdesign.css'.
Voila! You but 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 hold off 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 laid upward amongst External CSS Document lets upload it to Google Sites. You tin too upload it to whatsoever other costless file hosting server but yet I would ever prefer as well as practise recommend to piece of work alone 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 piece of work 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 cause got to worry nigh 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 meliorate piece of work same Google Account you lot piece of work for Blogger.
- 'Creat New Site' yesteryear naming your site, naming url location, choosing topic as well as entering CAPTCHA Human Verification Code.
- Then click on your late created site. This opened upward 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' hence 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 motility your cursor to 'Download' link which is inwards default Blue colour. You'll instruct url for your .CSS document. Copy that link.
- Now the url address of your .css document volition hold off 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 everything from '?attredirects=0&d=1'. Now truthful place of your css document inwards higher upward representative would hold off 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 1 time again opened upward (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 survive dissimilar for dissimilar people.
You tin fifty-fifty cause got dissimilar CSS files of your blog 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 acquaint unique css alone for a item browser or user agent. Say inwards representative of Internet Explorer it tin survive 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 hold off 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 upward construction Save it.
Note:- It is rattling much of import that you lot add together <link> tag amongst external css but before <b:skin> tag else it may give but about display work due to conflict.
You tin too compress your CSS Code safely yesteryear but removing extra whitespaces. I used this costless online service to take whitespaces from my css code.
8. Upload Modified Template With External CSS.
Once 1 time again login inwards your blogger occupation organisation human relationship as well as hence become 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 measurement to verify that everthing went right. If you lot made but about mistakes inwards higher upward physical care for you lot may reckon display issues. In such a representative retrace as well as cheque higher upward physical care for 1 time once again as well as crusade troubleshooting errors. This volition sure laid upward your CSS implementation as well as display problems. In worst representative if you lot tried your best as well as yet getting display problems revert dorsum your master copy template amongst inline CSS code.
10. Conclusion! External CSS In Blogger Template.
This blog cause got succesfully implemented external CSS as well as don't piece of work inline CSS anymore. The principal argue to piece of work external css over inline css is to instruct smaller page size, this helps inwards faster loading, it is fifty-fifty slow to alteration CSS pattern without touching blogger template. Further you lot tin fifty-fifty command as well as implement dissimilar pattern interface for your site on dissimilar user agents.
