jQuery on blogspot (blogger) post

You find some cool jQuery features but don't know how to include jQuery code into your blogspot blog? Here you will find two steps needed to jQuery work on your blog.

Two steps for implement jQuery on blogspot post

1. Reference jQuery library in your blogspot post

To provide jQuery work you must reference jQuery library. One option is to reference on jquery-1.3.2.min.js file on google code.



<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>



Another option is to upload jquery library file somewhere on the web (look here for advices about uploading files for blogspot) and reference it on blogspot (on blogspot you can upload only images).



2. jQuery code and style code should be in one line

Example of jQuery code (in this form it will not function on blogger):


<script type="text/javascript">
        $(function() 
        {
            $("#butToggle").click(function() 
            {
                $('#dvt').toggle(1000);
            });
        }); 
</script>



This jQuery code (above) should look like this to work on blogspot:



<script type="text/javascript">$(function(){$("#butToggle").click(function(){$('#dvt').toggle(1000);});});</script>



Example of style code (in this form it will not function on blogger):


<style type="text/css">
        #dvt
        { 
         width: 200px;
         height: 100px;
         border: solid 1px black;
         background-color:LightGrey;
         text-align:center; 
         display:none;           
        }     
</style>



Style code should be like this to work on blogspot:

This demo show jQuery that works on blogger.When you click toggle button div is shown or hidden.

This works on blogger

And here is code needed for this demo that should be in blogspot post:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">$(function(){$("#butToggle").click(function(){$('#dvt').toggle(1000);});});</script>

<style type="text/css">#dvt{width: 200px;height: 100px;border: solid 1px black;background-color:LightGrey;text-align:center; display:none;}</style>

<div id="dvt">This works on blogger</div>
<button id="butToggle">Toggle</button>

Related articles:
Add javascript in blogspot (blogger) post
jQuery hello world
jQuery selectors samples