Membuat tiap Link Redup - Mootools

demo

Link redup atau link fading dengan menggunakan Mootools ini dikembangkan oleh David Walsh. Nah bagaimana link redup/fading ini dapat diterapkan di Template Blogger, sebelumnya lihat demo link redup, arahkah mouse anda ketiap link, maka anda dapat melihat ketika hover link tersebut redup.

Penerapan Link Fading di Blogger Template

Penerapan Link Fading ini sangat mudah:
1. Masukan script Mootools berikut sebelum </head> :

<!-- mootools -->
<script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools.js' type='text/javascript'/>

:: catatan: apabila script mootools ini sudah anda miliki, maka tidak perlu di input lagi.

2. Masukan script javascript berikut:

<script type='text/javascript'>
window.addEvent(&#39;domready&#39;,function() {
$each($(&#39;a&#39;), function(el) {
var original = el.getStyle(&#39;color&#39;);
var morph = new Fx.Morph(el,{ &#39;duration&#39;:&#39;1000&#39;, link:&#39;cancel&#39; });
el.addEvents({
&#39;mouseenter&#39; : function() { morph.start({ &#39;color&#39;:&#39;#ccc&#39; }) },
&#39;mouseleave&#39; : function() { morph.start({ &#39;color&#39;: original }) }
});
});
});
</script>
<!-- End Link Redup -->

:: catatan:
- code 'a' yang berwarna merah tersebut dapat anda rubah, sesuai link yang anda ingin berikan effect, misal hanya ingin untuk judul postingan, maka kode 'a' anda rubah menjadi '.post-title'.

- code 'ccc' yang berwarna biru itu adalah kode warna, ini pun dapat anda rubah sesuai keinginan anda. kode warna ini ada kode warna hover dari link.

3. Sip Beres.

Posted in: Blogger,Mootools,Tutorial