Free Blog Themes, Blog Tutorials, Blog Templates, Blogger Tips, Blog Resources

Following tutorial describes how to add hover functionality with JQuery.
1.Login to your blogger dashboard–> layout- -> Edit HTML
2.Scroll down to where you see </head>tag .
3.Copy below code and paste it just before the </head> tag .

<script type='text/javascript'>window.onload = function() { var paras = document.getElementById('content').getElementsByTagName('p'); if(paras.length) {  paras[0].className = paras[0].className + ' intro'; }};</script> <style type='text/css'> #hover-me  { padding:50px 100px; border:2px solid #fc0; background:#d3ea74; }</style><script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools.js' type='text/javascript'/><script type='text/javascript'>

 /* usage */ window.addEvent('domready',function() {

  /* hover! */  Element.implement({   'hover': function(fn1,fn2) {    this.addEvents({     'mouseenter': function(e) {      fn1.attempt(e,this);     },     'mouseleave': function(e) {      fn2.attempt(e,this);     }    })   }  });

  $('hover-me').hover(function(e) {   this.fade('out');  }, function(e) {   this.fade('in');  }); });

</script>

4.Whenever you have to write some codes or text,write it between the following tags :

<div id="hover-me">

Your Text/Code

</div>

Bookmark It

Hide Sites