External Source means data is stored  separated from our main XML file, usually described by tag <link>  for CSS in HTML page, as example : <link rel="stylesheet" href="my-external-style.css">

CSS in our Blogger XML themes is stored inside <b:skin> Tag by default
<b:skin>
  <![CDATA[
    <!-- Bunch of CSS Code -->
  ]]>
</b:skin>
If we want to separate that CSS code to be placed in the external source then we must cut every text in between <![CDATA[ and ]]> , paste to any text editor and save with .css extension suffixed.

On blogs that use the newer theme version (Emporio, Soho, etc) or with custom themes, there may be CSS Variables in the <b:skin> tag, if there, we need extra work to translate these variables, or we can take rendered stylesheet by opening our blog address then clicking mouse right button and selecting View Page Source, then find and starts copying all the text in <style> to --></style>

Benefits of using an external style sheet

  • Stored within a single file.
  • Easier to maintain.
  • Pages load quicker once the CSS file has been cached.
  • Effectively, if we editing through the browser inspection tool, then we can immediately get the results because it means we are editing our own CSS files, then we only need to copy the results in the source from the inspection tool to be uploaded again as an update.

    Chrome inspection Tools
We can host our file such as Javascript or CSS for free to our Google Drive or Google Site account, or to another free hosting service out there. But be careful if our Blogs served under HTTPS then our hosted file must support HTTPS too or it can be linked with https:// prefix otherwise our file can't be loaded.

Host CSS, Javascript file with Google Drive

  1. Go to Google Drive and Login.
  2. Click on New button and then hit File Upload
  3. Browse our CSS or JS file then click on 'Open' to start uploading.
  4. Once the file is done uploading, right click on the file and select the Share option.
  5. Click on Advance text button.
  6. Under the Who has access options click on Change
  7. Select On – Public on the web and then Save in the bottom left corner
  8. At Sharing Settings, Copy the shared file ID found in its text field marked with red background.
  9. Paste the file ID to text marked with yellow background below.
    External File Type CSS Code
    <link href='//drive.google.com/uc?export=view&amp;id=1UVs83bTcU6MKu2Ko755mlIswur7hl1W-' rel='stylesheet' type='text/css'/>
    
    External File Type Javascript Code
    <script src='//drive.google.com/uc?export=view&amp;id=1UVs83bTcU6MKu2Ko755mlIswur7hl1W-'/>
    

Now, we have our link CSS code tag or Javascript external source file. To use it, we only need to take the code above and place it between the <head> and </head> tags. host js css to google drive

Share This

9 comments:

  1. Replies
    1. I have read your article, it is very informative and helpful for me.I admire the valuable information you offer in your articles. Thanks for posting it.
      Tangki Panel
      Tangki Fiberglass
      Jual Septic Tank
      Mesin RO

      Delete
  2. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress website development Chennai

    ReplyDelete
  3. It is really a great gadget to convertion.Thanks for sharing this informative post. https://onlineconvertfree.com/converter/images/ you can visit this site also for conversion purposes

    ReplyDelete
  4. This is my first time visit here. From the tons of comments on your articles.I guess I am not only one having all the enjoyment right here! Calibration Services

    ReplyDelete
  5. Thanks for sharing this post. I'm very interested in this topic. https://onlineconvertfree.com Think about this: Take your image and make the image appear to be it's set on tiles; it now seems that you're wanting by way of a window at your image and in addition including depth to the image on the similar time.

    ReplyDelete
  6. It was a really good post and very useful for the users to clarify about the mobile phones clearly and this post makes them more clear and technically.
    Apple Service Center in Chennai
    iPhone Service Center in Chennai

    ReplyDelete
  7. In todays every developer started adopting the rich features of Bootstrap framework. The points you have shared regarding the benefits bootstrap compels most of the business people to make use of this technology.
    Hire Magento Developer
    Hire Web Developerc
    Hire Wordpress Programmer
    Hire PHP Developer India
    Mobile App Development India

    ReplyDelete
  8. I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article.website development Service

    ReplyDelete

About
Creative Commons License
Blogger Book is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License.
Misc