Sunday, 19 August 2012

How To Add MooTools Link Fading To Blogspot.

How To Add MooTools Link Fading To Blogspot.
* First go to your blogger Dashbard.

* Now click in design tab and edit HTML.

* After above step find this code </head> by CTRL+F key.

* Copy below code and paste before </head>

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

* Now click to save your blogger Template.

* 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

No comments: