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

View Demo