Friday, May 07, 2010

Using JQuery on blogspot

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:
1

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 :
22

 

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.

3 comments:

Strat said...

Thanks for your information n__n

FreeQ said...

http://adf.ly/4w7eI

FreeQ said...

http://adf.ly/4w7eI

My Achievements

Member of

Blog Archive

Followers