jQuery is a very useful JavaScript framework! With the help of this we can do many things including animations effect, smooth dropdown menus, scroll to top and many more! But unlike WordPress, we can not host our files directly on blogger and thereby we have use some free hosting services (Like we have explained using 07x for attaching the jQuery framework on blogger for smooth scroll to top). But in reality there is actually no free host which gives as fast server response as Google Blogger and this results in slow blog loading time!
So how about if we can include the jQuery frameworks directly on our blogger template? Yes you have heard it right! Although by default the blogger template does not support including JavaScript directly onto it but with a little modification we can do this! So this will result in
- Faster jQuery loading. As Blogger itself will be hosting our jQuery files
- No need for depending on third-party hosting services for including jQuery or any other plug-in!
So here is what you need to do…
The basic concept behind the inclusion of the jQuery framework
Blogger template does not support the insertion of JS codes directly. So we shall
- Convert the jQuery framework codes into escape characters
- Will copy the code on the template wrapper inside a <script> tag.
- In this way the escaped code will be properly parsed by blogger XML parser and our jQuery will be loaded on every page…
So it means now we can add as many jQuery plugging on our template as we want! Without even slowing down the load time due to third-party JS hosting!
Method to insert the framework and plug-in on blogger template:
For this I shall highly recommend using Notepad++ . Download it from the link and install. Basically we need it to convert the code into escaped HTML form. Or you can also use our Online PHP HTML Encoder/Decoder for this. Here is the basic instruction using both of them!
Using Notepad++ to modify the code:
- First download the jQuery Framework from the jQuery site which you need. Currently I am using the mineralized version of it as this satisfies my need! But you can choose any version!
- Now open the main jQuery file and edit it with Notepad++. Select All (CTRL + A) and go to TextFX > TextFX Convert > Encode HTML (Shown on the image below)
- This will convert the whole code into escaped characters. Now this is all what we need.
- Now go to Blogger Dashboard > Layout > Edit HTML.
- Now find the closing </head> Tag on your template.
- Just before it add the code in the following manner.
<script type='text/javascript'>//Replace this line by the Encoded code</script>
Replace //Replace this line by the Encoded code with the modified jQuery code (which we have generated above)
- Save the template and you are all done!
Using our Online HTML encode/decoder tool
The process is same as above. For converting it to escape use our Online tool. Access it from here. Simply paste the whole code and make sure that the options are set as follows.
Click on the “Get The Code” button and you are done. Now just copy in your template as mentioned above!
Using the readymade code for jQuery 1.3.2 min:
Well, now if you are too lazy to do all this, then here is an easy way! We have encoded the code and wrapper script tag has also been added! Below is the download link of the latest (till today) jQuery framework
- Download Link: Click Here
Just open it with any text-editor copy everything inside and paste it before the closing </head> tag on your blogger template.
That’s it! Now you have the jQuery framework on your template! So how about now adding some cool jQuery effects on your template now! Below is a list of such plowings.
- Smooth Scroll to top button for your Blogger blog
- jQuery based navigation menu for your blog or website
That’s it for now! Now that we have learned how to implement jQuery in blogger so on the upcoming posts we shall discuss more and more pluings and their implementation on blogger! Also if you have any problem then feel free to ask us through your comments
If we put in a link to an external script file (google), won't the file at least be cached rather than downloaded in the template every time?
Yes that's true!! Actually this is for attaching the framework directly to the blogger template! We can also let Google to host jQuery file for us! and it will be cached as well… Here is a complete FAQ related to jQuery:http://www.intechgrity.com/2009/07/complete-faq-r…
I have downloaded your file (jquery-1.3.2.minescaped.js) but there is an error in line 13
“(function(){var l=this,g,y=l.jQuery,p=l.$,o=l.jQuery=l.$=function(E,F){return new o.fn.init(E,F)},D=/^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,f=”
how do I have to do to fix this?
thanks…