Adding external files to Blogger template

Preface

My Blogger templates come with variety of external stylesheets, javascript files, html files with sample code for posts, static pages and widgets. All these files should be added to the “head” of main xml file or at the bottom (before closing "body" tag) in order to make template look and work as intended.

Start doing

Downloadable folder includes set of standalone subfolders as usually entitled “css”, “js”, “images” and so on. In the head of main xml file (a file which you upload to Blogger by clicking “Upload Template” in Design/Layout mode) you can see number of anchors which connect xml file and all css/js files, for example:

head
 
script src='http://yourdomain/yourfolder//prefix-free.js'
head

You need to upload these subfolders to your hosting (you need to have some hosting account and domain) and place URL paths to the head as it is displayed above. For example, if your domain name is john.org your anchors will look like this:

head
 
script src='http://john.org/js//prefix-free.js'
head

You can use free open-source software FileZilla (or similar software) in order to upload files from your local computer to your hosting account. Here below is a screenshot showing simple FileZilla workspace:

It is very easy to deal with FileZilla: you simply drag your file from the left side (local computer) to the right side (server) and wait a minute or two.

Blogger is comfortable for people who have neither domain nor hosting. It allows to set a website (blog) at no cost and in fact, no hosting/domain are required to be purchased. Just if one wants a custom site name without any “blogspot.com” extension then purchasing of domain becomes necessary. In case you have no domain/hosting you can copy the content of files included into template subfolders (css, js etc) and paste them straightly to the main xml file. The problem is that an amount of added code will be very massive and it can make be an obstacle (and definitely uncomfortable) in further editing of template straightly in Blogger. Another "con" is that conflicts in betweens scripts may happen. However, in the worst case, it is also a way out and your template is like to work properly if the whole code from over all the related subfolders will be inserted directly into xml file itself.

Watch short video showing how to copy css/js code from files included into folder and paste them directly into the Blogger:

As you see upon the screencast it is pretty easy action. For css you put style tag, for javascript you put script tag. Code resides in between opening and closing tags as shown in the screencast. But, since my templates are full of css and js code hence a process of copying and pasting all css/js stuff straight into head of xml file is not the most comfortable way. Keep that in mind and try to obtain normal paid or even free hosting.