Home » blog » jquery » tutorial » Spoiler with Jquery on Blogspot

Spoiler with Jquery on Blogspot

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
    2. 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.
    1. <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 and reference it on blogspot (on blogspot you can upload only images).
  2. jQuery code and style code should be in one line
    3. Example of jQuery code (in this form it will not function on blogger):
    1. <script type="text/javascript">  
    2.         $(function()   
    3.         {  
    4.             $("#butToggle").click(function()   
    5.             {  
    6.                 $('#dvt').toggle(1000);  
    7.             });  
    8.         });   
    9. </script>  
    This jQuery code (above) should look like this to work on blogspot:
    1. <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):
    1. <style type="text/css">  
    2.         #dvt  
    3.         {   
    4.          width: 200px;  
    5.          height: 100px;  
    6.          border: solid 1px black;  
    7.          background-color:LightGrey;  
    8.          text-align:center;   
    9.          display:none; }
               </style> 
    10.  
    Style code should be like this to work on blogspot:
    1. <style type="text/css">#dvt{width: 200px;height: 100px;border: solid 1px black;background-color:LightGrey;text-align:center; display:none;}</style>  
This demo show jQuery that works on blogger.When you click toggle button div is shown or hidden.




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>


Demo : click toggle below




This works on blogger
Categories: , ,
Pin It

Related Post:



Copyright © Learning Everyday. All rights reserved.

Super SEO created by Blogger Tuts From Jom Kenal Islam