Shiran's Blog: Using JQuery on blogspot

Friday, May 07, 2010

Using JQuery on blogspot

11:08 AM |

Posted by Sheen |

As I use JQuery these days, I just though how I can use JQuery on my blog.
I tried to do this and found It’s very easy to use it with blogger. Just a few steps
make this possible. You might be wondering where you can place the JQuery file in
blogger. Google has host these file on the following path “http://ajax.googleapis.com/ajax/libs/jquery/”. Just have to select the version you prefer to use.

Just see the following steps.

Step 1:
Add the following code between header tags of your blog’s HTML.

<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
</head>

Example:

Step 2:
Add the functions in between header tags as follows,

<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>

<script type="text/javascript">
    function MouseOn() {
        $(document).ready(function() {
        $("img").toggleClass("newClass");
            //$("#testPara").append("Shiran the greatest" + count );

        });
    }
</script>
</head>

Example :

Step 3: (Optional)
If there are any CSS involved embed them also in between header tags as follows

<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>

<script type="text/javascript">
    function ChangeCSS() {
        $(document).ready(function() {
             //here this will toggle CSS classes on an event
         $("img").toggleClass("newClass");

        });
    }

<style type="text/css">
.toggler {width: 100px; height: 200px;}

.newClass {width: 500px; height: 866px;}
</style>

</script>
</head>

Need to call the above ChangeCSS() JS function where this need to be done.

Example:
this maight be in post or a HTML/JavaScript gadget

<img class="toggler" src="http://1.bp.blogspot.com/_8fX3E/S-L0RblzI/AAAADtQ/nB8kJYc/s200/108_f0.jpg" onmouseover="ChangeCSS()"/>

Give your visitors a shock.

1 comments:

Strat said...: Thanks for your information n__n; 2:21 PM

Shiran's Blog

Using JQuery on blogspot

1 comments:

My Achievements

Member of

Blog Archive

Important Blogs

Followers