Saturday, March 14, 2009

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

  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.

    <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).


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

  4. 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

18 comments:

ConorM said...

nice work!

Maybe expand on this, show how to implement, say, a basic 'dropdown/reveal' jquery script within a blog post?

Thanks for the help so far :)

Mark said...

I am not understand you.

Do you think that when click element in dropdown list to hide or show some other HTML element in jQuery?

styleAB said...

Hey Buddddddy....
i have a Question
Plzzz answer


Suppose i want to apply such type of javascript in my blogger Posts
http://davidwalsh.name/clipboard


what should i do.......Its not workinf in my posts :( :(

Plzz reply sooon

Mark said...

I take a look at your blog http://davidwalsh.name/clipboard.
To me, your blog look like it is Wordpress, not Blogger.
Unfortunately I have no experience with Wordpress blog, but I believe that it is not too difficult. Maybe you should try to google answer (something like "jquery in wordpress post").

Unknown said...

here are other good jQuery tutorials jQuery Duplicate Fields Form Submit with PHP.

Unknown said...

It's totally work in my blog :)
Thx U!

son khieu said...

Maybe expand on this, show how to implement, a basic 'dropdown/reveal' jquery script within a blog post?

Richard J. Acton said...

Hi

I have put this code into my blog:





I am trying to make this JQuery work:
http://www.mind-projects.it/projects/jqzoom/
I put the css line into the css box in the advanced section of the design editor. any suggestions on how to get it to work, any help would be much appreciated?

Mark said...

To Richard J. Action.
Try this link: jquery picture zoom

Unknown said...

nycccccccccccc + for this :)

allmytutorials.blogpot.com

star said...

good query nd vry nice wrk....Hire PHP Programmers

billu barber said...

Hello buddy!

I want to make a function, from which anyone can post ad to my blog. can you please tell me the scripting for this????????

Mark said...

To billu barber:
Sorry but I do not know script for this.
I think this can not be done with a just a client script.

alfred said...

jQuery has a strong community that does a good job in verifying and listing modules on the official portal. Let us consider for example that a programmer wishes to use 'Date Picker'(Date Picker element is used to select a date from a pop up calendar. Once selected, the date value will be populated in an adjoining text box.

jquery jobs

chenny said...

Thank you!!!!! I have been looking for the code to toggle content in my blog post and pages. This was simple!

Hire Dedicated PHP Developer said...

This code is very useful for me. Thanks for this.

Unknown said...

Hello
I want to add close button in this Jquery
How can I do this ? Please help me

Java Training in Chennai said...

nice work!

I got new information from your post.