Inline style are the major barrier between good SEO score and your blog.Inline styles make the code too big, so how long you write the code to text ration won't rise up.In blogger, inline styles are used by default.But most of the websites on internet use external style sheets as they are self hosted and the designers are very likely to use external CSS.Sometimes Blogger use internal styles.You can learn the difference between Internal CSS,Inline CSS and External CSS from W3 schools.Read this article on Inline VS External CSS.
Probably you may have tried copying CSS between <b:skin> tags of your Blogger blog.If you tried that you already know that it doesn't work.Because Blogger has more CSS coding that won't show in Template>Edit.So to find the real exact CSS code of your blog follow these steps.For this tutorial you need a Google Drive account,if you have a Blogger account you may already have one.If you don't have a Google Drive account create one now! Its easy and gives you free 15GB of space.
#1.Go to your blog.
#2.Right click on a free space [Not on a Link] and click view page source.The source code of your blog will show up.
#3.Now search for "style" You may find few CSS coding between <style> tags.And before the first <style> tag you'll find two CSS file links.Copy them all.These are the real CSS codes of your blog.You should copy the whole text including <style></style>tags.Normally you will get 2 <style/> tags.If you applied more internal CSS you will get more.
#4.Paste all the CSS codes to single a notepad file and save with .css extension.
You can use any file name.
#5.Now go to your Google Drive and create a new folder.You can use any name but make sure you have your folders nicely organized.
#6.Upload your CSS file to the folder that you just created.
#7.Now right click on the file Share>Advanced>Change and select Public on the web.
#8.Now tight click again on the file and click Get Link.Copy the link.
#9.Now create a new tab in your browser and paste the link in the address bar and press enter.Your CSS file will be displayed as a text file.
#10.Now check the address bar of your browser.The link has been redirected.Copy the code between /file/d/ and /edit.Now type googledrive.com/host/yourcopiedfilecode and press enter.
Now you may need to create an API KEY to generate direct download link. Follow this link for generating direct link.
https://www.wonderplugin.com/online-tools/google-drive-direct-link-generator/
#11.Now you'll be automatically redirected to a URL,but the CSS file will be displayed as plain text.Now this link is your direct link to the CSS file.Copy it.
#12.Go your Blogger account.Open Template>Edit HTML.
#13.Find <b:skin> tag and delete everything between <b:skin> and </b:skin> tags.Make sure you make a Backup of your template.
Now scroll down a little bit and you'll find <b:template-skin></b:template-skin> tags.Delete everything between that tags also.
#14.Find your <head> tag.Insert this code after it.Replace yourdirectlink with your direct link to the CSS file.
#15.Preview template to make sure its working.Save the Template.
Now you'll see that your blog's fonts have been screwed.Don't worry you didn't do anything wrong.You just have to load web fonts to your blog.
How To Add Google Webfonts To Your Blog Or Website For Free
Probably you may have tried copying CSS between <b:skin> tags of your Blogger blog.If you tried that you already know that it doesn't work.Because Blogger has more CSS coding that won't show in Template>Edit.So to find the real exact CSS code of your blog follow these steps.For this tutorial you need a Google Drive account,if you have a Blogger account you may already have one.If you don't have a Google Drive account create one now! Its easy and gives you free 15GB of space.
#1.Go to your blog.
#2.Right click on a free space [Not on a Link] and click view page source.The source code of your blog will show up.
#3.Now search for "style" You may find few CSS coding between <style> tags.And before the first <style> tag you'll find two CSS file links.Copy them all.These are the real CSS codes of your blog.You should copy the whole text including <style></style>tags.Normally you will get 2 <style/> tags.If you applied more internal CSS you will get more.
#4.Paste all the CSS codes to single a notepad file and save with .css extension.
You can use any file name.
#5.Now go to your Google Drive and create a new folder.You can use any name but make sure you have your folders nicely organized.
#6.Upload your CSS file to the folder that you just created.
#7.Now right click on the file Share>Advanced>Change and select Public on the web.
#8.Now tight click again on the file and click Get Link.Copy the link.
#9.Now create a new tab in your browser and paste the link in the address bar and press enter.Your CSS file will be displayed as a text file.
#10.Now check the address bar of your browser.The link has been redirected.Copy the code between /file/d/ and /edit.Now type googledrive.com/host/yourcopiedfilecode and press enter.
Now you may need to create an API KEY to generate direct download link. Follow this link for generating direct link.
https://www.wonderplugin.com/online-tools/google-drive-direct-link-generator/
#11.Now you'll be automatically redirected to a URL,but the CSS file will be displayed as plain text.Now this link is your direct link to the CSS file.Copy it.
#12.Go your Blogger account.Open Template>Edit HTML.
#13.Find <b:skin> tag and delete everything between <b:skin> and </b:skin> tags.Make sure you make a Backup of your template.
Now scroll down a little bit and you'll find <b:template-skin></b:template-skin> tags.Delete everything between that tags also.
#14.Find your <head> tag.Insert this code after it.Replace yourdirectlink with your direct link to the CSS file.
<link href='yourdirectlink' rel='stylesheet' type='text/css'/>
#15.Preview template to make sure its working.Save the Template.
Now you'll see that your blog's fonts have been screwed.Don't worry you didn't do anything wrong.You just have to load web fonts to your blog.
How To Add Google Webfonts To Your Blog Or Website For Free
Here's how to host it on Dropbox
ReplyDeleteHow to Externalize Your Blogger Stylesheet
http://www.bluebugle.org/2012/09/blogger-external-css-stylesheet.html
I tried your way, my website goes very wrong. then I went back to my backup not fixed!!! and when I tried to enter my site google says its blocked???!!!
ReplyDeleteI found your way is inject the css automatically in additional css in my template even after I installed the backup!!!
they I fix this was going to delete this additional css and restored my template to normal from blogger it self. then i installed my back up again and everything's okay.
do you know what coase this problem?
is your site hosted in blogger?? if you can give me admin I can check what is wrong or just give me more details
DeleteWe seldom use external stylesheets at our blogs to minimize more external calls, by default blogger already imports a large chunk ;(.
ReplyDeleteA good alternative if a user wants to compile custom css rules into 1 file, but the downside the file headers & cache control could not be set according to current best practices...