May 4, 2012

Installing JQuery to Your Blog

    Installing the JQuery library to your blog is a good way of having greater opportunities to enhance the design and interactivity of your blog. If you happen to be a know nothing at web development, then this post will guide you with an easy step by step instruction on how to install the JQuery into your blog.

Easy Approach
    The easy approach will simplify the process for you. No uploading files, no complicated stuff, etc. Below are the steps to quickly install a JQuery for your blog. One disadvantage though, the gadget that contains the code for this approach should be at the top most part of the layout, since every JQuery scripts above it will not work.

1 Go to Google Developers.

2 Click on the link named "JQuery".

3 Scroll down until you reach the JQuery (Do not mistake with the JQuery UI).

4 Copy the link in the category "path"

    Now that you have the link to the latest JQuery, you will need to paste a code into your blog. But remember, the "path" is the compressed version of the JQuery and the "path(u)" is the uncompressed version, which is usually only used by web developers. So the next time you update your JQuery to the latest version always choose the "path" for the link. Now for the installation of the script to your blog part.

5 Replace the URL from the code below with the link that you have copied.

JQuery Installation
Code:
<script type="text/javascript" src="URL" />

6 Copy the code with the new URL and go to Layout >> Add a Gadget.

7 When a pop-up box appears, choose HTML/Javascript.

8 Paste the code in the content box.

9 Leave the title box empty.

10 Press save.

    If you have successfully installed the JQuery into your blog, JQuery plugins and scripts will surely work perfectly. If you are having a difficult time trying to figure things out, here is a sample code below, but take note that the JQuery below might be outdated so check the official JQuery site.

JQuery Installation
Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />

1 comment: