How to add jQuery in @Blogger: Quick Tutorial

Estimated Reading Time:
It flummoxes me (that's a word, isn't it?) how convoluted it can be to set up jQuery in Blogger's blogs. (yes, we are using big words today)



But first, the important questions:

What is jQuery? And, why do we care?

jQuery is an open-source Javascript library that makes it easier for your site to have effects like drop-down menus, infinite scrolling, slideshows, etc. without the need to store large amounts of code in your site's main template.

All you have to do is put in one single line of code in your website and you can access any number of the cool animation effects that jQuery keeps adding to their library.

Because it is so cool and does most of the work for you, jQuery is used by 96.2% of all the websites whose Javascript library is declared. (it says so here)

So, in today's world, it's almost essential to have jQuery installed on your website or blog to make it look like it was created in this century.

Hold on - Shouldn't this be a default thing in all Blogger templates?

Alas, that is not so. Which is why you gotta read this sweet tutorial on how to put in a single line of code into your Blogger blog template.

But, why is it so confusing?

It's actually not. It's just one line of code that you place in your Blogger theme. Here - this is that line:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">


The problem is where to put it. If you have scoured the inter-webs, some sites tell you to put it in the <head> portion, some tell you it's just after the <footer> part of the HTML, some say that you should use the 'HTML/JavaScript' widget, and so on. And, sometimes, even if you have tried all of them, it still doesn't seem to work out (welcome to Blogger y'all!)

As someone who has made a blog for each available Blogger theme, I can tell you that the following instructions will work for just about any of the templates.

HOW TO ADD JQUERY TO YOUR BLOGGER BLOG

1. Login to Blogger.com and go to the blog you want to install jQuery in.
2. Go to 'theme' on the left panel and click on 'Edit HTML'.
3. Now, click into the XML bounding box where all the code is located and hit Ctrl + F (for Windows) or Command + F (for Mac) and type <body>. Hit enter.
4. It should automatically point to the closing body tag. Now, paste the following line of code just above it.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">

5. Click 'Save theme' and then 'Back'. Don't worry if it says 'You have unsaved changes that will be lost' - nothing will be lost.
6. You're done-kirk!

Alright then. Go about your business or check out more CutieCoding articles on RumiAndRay.com.

If you have any questions or wanna share more bad puns with me, let me know in the comments below.

...o0o...

Ray out! Peace!





Comments

Popular Posts