Using jQuery on your sites and blogs has many advantages: you can add more interactivity to your blog, you can add dynamic animation effects, sliders, drop-down menus, accordions, slideshows and much more.

In order to utilize several features of jQuery, we first need to add it to our site. In this tutorial, we’ll be adding jQuery to our Blogger blog in just under a minute – nothing complicated.

You can get the latest version of jQuery from jQuery site and can host on free JavaScript hosting sites, but that is not recommended – as we already have this amazing JavaScript library hosted on Google CDN. That means, we’ll be using Google hosted jQuery in our Blogger blog.

Lets get started. Edit your Blogger template’s HTML, and look for the </body> tag. Once you find it, paste the following script code just below the tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Adding jQuery to Blogger

Save the template and we are all done! Now, you’re ready to implement cool jQuery plugins, effects and experiments on your blog.

Reason why we added jQuery below </body>

A lot of you might be wondering why we’ve added jQuery below the closing body tag (</body>) of our Blogger template. You might have implemented JavaScript or jQuery earlier by adding it in the <head> section, but the reason we did just opposite of that is to load jQuery in the end when all of our important blog assets are loaded.

This way, jQuery will not block the loading of our page that in-turn will add to the user experience.