How To Add jQuery’s hover functionality , Blogger Tips

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(&#39;content&#39;).getElementsByTagName(&#39;p&#39;);
if(paras.length) {
paras[0].className = paras[0].className + &#39; intro&#39;;
}
};
</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(&#39;domready&#39;,function() {

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

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

</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>

No Comment Yet Post a Comment

Leave a Comment