Lab Design

This is a blog only for designing blogspot template.

Learn more

Monday, 8 April 2019

How To Use JQuery In Blogger



To use JQuery for your blogspot is pretty simple. Follow these steps bellow:
1. On your blogspot dashboard, click Theme. Then, click Edit HTML.
2. Click inside of the code box then press CTRL+S to search for <head>.
3. Next, we need to include/import the JQuery file to the blog. Paste this below the <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
4. Click inside of the code box then press CTRL+S to search for </head>.
5. Just above the </head> add the following:
<script type='text/javascript'>
//<![CDATA[
              jQuery(document).ready(function() {
               content of your jquery function and event
             });
//]]>
</script>
6. Click Save Theme to save the change.


Explanation:
Step 3 is required everytime we want to use jquery everywhere on the web apps, blog, website, etc. You need some hosting site to keep the file to be imported. Luckily, google already prepared open-source jquery so we only need to copy paste the code.
On step 5, there's 3 point that need attention.
  • First, //<![CDATA[ //]]> . That part is needed only for blogspot platform. If you developing for another platform, you may not require to use it.
  • Second,  jQuery(document).ready(function() { }); is the main part you must use. Everything inside that part begin to works when the page is first loaded.
  • Third, content of your jquery function and event. You can replace this part with every jquery function you want to use. Example: alert(), var, click(), etc. You can read more here and here.

No comments:

Post a Comment