Blogger Jquery

blogger jquery | jquery in blogger | adding jquery in blogger
jquery in Blogger / Blogspot
jquery is a cross browser java Script library that handles events animations developing APIs and  and much more. This is the most common library used today. write less and do more with jquery. to add jquery in blogger allows us to make animation and some events..




How to add jquery to Blogger

To add jquery to your Blogspot Blog you need to host the jquery.main.js file some where.. i use Google codes to host jquery files and link them to my blogs. Recently i created a blog of jquery events that have a lot of  jquery tutorials in blogger. some menus galleries and many more.

You can download the above file if you want to host it to your own at google Codes.

add this jquery file to your Blogger Blogspot  ater <Hear> tags

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

Some basic Jquery events in Blogger


Link Hover animation.
jquery Toggle or slide panel.
Sgow | hide with jquery.
Smooth Scroll to top with jquery.


Link Hover animation:

Demo
once you have added jquery to your Blogger lets test this simple jquery animation. this is a link hover animation that addes opecity to the link the code is given below copy the code and past it above </head> or after the jquery.main.js
<script type='text/javascript'>
$(document).ready(function() {
$('.sidebar a, .menu li, .post-body a, .post h3 a, #footer a').hover(function() { //mouse in
	$(this).animate({ opacity: '0.4px' }, 1000);
	}, function() { //mouse out
	$(this).animate({ opacity: 1 }, 1000);
	});
});
</script>


Comments