How To Add MooTools Link Fading To Blogger

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'>
#link1  { color:#f00; }
#link2  { color:#00f; }
#link3  { color:#000; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools.js' type='text/javascript'/>
<script type='text/javascript'>
window.addEvent(&#39;domready&#39;,function() {
$each($(&#39;.fade&#39;), function(el) {
 var original = el.getStyle(&#39;color&#39;);
 var morph = new Fx.Morph(el,{ &#39;duration&#39;:&#39;300&#39;, &#39;link&#39;:&#39;cancel&#39; });
 el.addEvents({
  &#39;mouseenter&#39; : function() { morph.start({ &#39;color&#39;:&#39;#ffffff&#39; }) },
  &#39;mouseleave&#39; : function() { morph.start({ &#39;color&#39;: original }) }
 });
});
});
</script>

4.Click on "save Template".

5.Now when you add Links add it as below example

<a id="link1" href="javascript:;" class="fade">Link Fade 1</a>

<a id="link2" href="javascript:;" class="fade">Link Fade 2</a>

<a id="link3" href="javascript:;" class="fade">Link Fade 3</a>

View Demo