Blogger Customization – Integrating styles and scripts
In the journey this far, all this while, we concentrated on making changes to blogger blogs, more of customizations for those who wanted the things to work their way. In this series of helping you make customizations in your blogger blog, we took you through a couple of articles outlining how to add a custom HTML, CSS, and jQuery based menu to your blogger blog, one that looks beautiful and adds to your blog’s overall visual appeal, extending a helping hand towards your blog’s readers so that they are able to navigate your blog/website with ease.
The last posts where we showed you how to add a custom menu in your blogger blog came with a catch. You were supposed to add a few references to external script and stylesheet files. And these files, for goodness sake, were to be hosted over an external web hosting account. Now the problem is, Blogger doesn’t allow one to upload any files other than just image files, so, it just won’t serve the purpose. Other options like Google Drive/Google Sites and other file sharing services like dropbox, etc will allow you to upload the files, but you won’t be able to use these files in your website since these files are supposed to be downloaded, plainly because of the kind of URL you get for accessing the files you upload. Such URL’s can’t be used to access the files in case you need them on your page. So, what’s the way out?
It’s simple. Just upload the files on an external web hosting account. But would that mean you need to buy costly hosting space for putting just a few files on it, when your entire blog is on blogger? No! There are atleast a dozen, if not less, free web hosting services (yes we said FREE!), that let you store your files on webservers running both Linux and Windows, and promise a pretty good uptime, some promising a server uptime of 99%, which is good enough considering that you have a usable web hosting account that comes with a GigaByte of storage space, a few gigs of monthly transfer bandwidth, a good enough shared server resources, free email ID’s and you can opt to get yourself a free subdomain too. What more can one ask for free? We took a look at a couple of these free webhosting platforms, and though being free, these come with some conditions, not all are that much limiting to free users, when it comes to giving away basic features of a web host. One such free webhosting service is provided by 000webhost.com. A free account can be signed up for and once you get your free web hosting account, you can also take up a free domain name, so as to reference your files. We will be doing a small introductory post to take you through the signup process, account creation and upload of the files shortly.
A second way, which doesn’t need you to have a separate hosting account is to integrate the source codes contained in these two files in the HTML template file for your blogger blog itself. Doing this has a small disadvantage though. Since all the pieces of code goes in your blog’s template, it tends to make the template a bit heavier to load, though nothing much you will notice quickly, however if you keep doing this, you will certainly notice this in your blog, and it will deteriorate your blog’s performance over time. That is the reason the script files and stylesheets are kept separate. Anyways, since we have explored that option of keeping the script and stylesheets separate we will take a look at this method. As shown in the last post, wherein we added pieces of code in the blogger blog’s template, this way is almost similar to that one, with the only change being in the two references to the script and stylesheet, which will be done away with, since we are putting the code directly in the page that is calling the lines of code contained in these files, and the functions within.
Let’s navigate back to your blog’s template’s HTML code.
With that, we have completed the integration of the menu codes (CSS stylesheet and jQuery script file) right in the template’s HTML code for your blogger blog. This article will hopefully help you take up more such customizations to your blogger blog, to enhance it, both, functionally and visually. Just a word of caution, that we would like you to take a note of, and that is, as we have already told you above, integrating the scripts and stylesheets right in the HTML file is not suggested, since this makes the HTML file heavier, and thus takes more time in loading. So, we would like to suggest you to please try and minimize any such requirements as much as you could.