Membuat Animasi Link Hover Pelangi Di Blogger Menggunakan Rainbow Link Effects

Animasi ini menggunakan javascript biasanya disebut dengan Javascript rainbow link effects. Oops... takut blog sobat jadi lamaban karna pake javascript? tapi jangan khawatir script ini tidak akan membuat blog sobat menjadi lelet.

Cara kerja script ini adalah ketika kursor diarahkan tepat pada sebuah link, maka link tersebut akan nampak berubah-ubah warnanya seperti pelangi yang akan memperindah blog sobat yang mengutamakan keindahan tampilan blog.

  1. Seperti biasanya, silahkan login dulu ke blogger pake akun sobat
  2. Masuk ke "Design/ Rancangan" dan klik "Edit html" untuk melakukan pengeditan template.
  3. Cari kode css blog sobat, letaknya di atas tag ]]></b:skin> (Gunakan ctrl+f)
  4. Copy dan paste kode berikut ini tepat diatas tag ]]></b:skin>
    <script type="text/javascript">
    //<![CDATA[
    /* idblogweb*/
    var rate = 20; // Increase amount(The degree of the transmutation)
    if (document.getElementById)
    window.onerror=new Function("return true")
    var objActive; // The object which event occured in
    var act = 0; // Flag during the action
    var elmH = 0; // Hue
    var elmS = 128; // Saturation
    var elmV = 255; // Value
    var clrOrg;
    var TimerID;
    if (document.all) {
    document.onmouseover = doRainbowAnchor;
    document.onmouseout = stopRainbowAnchor;
    }
    else if (document.getElementById) {
    document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
    document.onmouseover = Mozilla_doRainbowAnchor;
    document.onmouseout = Mozilla_stopRainbowAnchor;
    }
    function doRainbow(obj)
    {
    if (act == 0) {
    act = 1;
    if (obj)
    objActive = obj;
    else
    objActive = event.srcElement;
    clrOrg = objActive.style.color;
    TimerID = setInterval("ChangeColor()",150);
    }
    }
    function stopRainbow()
    {
    if (act) {
    objActive.style.color = clrOrg;
    clearInterval(TimerID);
    act = 0;
    }
    }
    function doRainbowAnchor()
    {
    if (act == 0) {
    var obj = event.srcElement;
    while (obj.tagName != 'A' && obj.tagName != 'BODY') {
    obj = obj.parentElement;
    if (obj.tagName == 'A' || obj.tagName == 'BODY')
    break;
    }
    if (obj.tagName == 'A' && obj.href != '') {
    objActive = obj;
    act = 1;
    clrOrg = objActive.style.color;
    TimerID = setInterval("ChangeColor()",150);
    }
    }
    }
    function stopRainbowAnchor()
    {
    if (act) {
    if (objActive.tagName == 'A') {
    objActive.style.color = clrOrg;
    clearInterval(TimerID);
    act = 0;
    }
    }
    }
    function Mozilla_doRainbowAnchor(e)
    {
    if (act == 0) {
    obj = e.target;
    while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
    obj = obj.parentNode;
    if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
    break;
    }
    if (obj.nodeName == 'A' && obj.href != '') {
    objActive = obj;
    act = 1;
    clrOrg = obj.style.color;
    TimerID = setInterval("ChangeColor()",150);
    }
    }
    }
    function Mozilla_stopRainbowAnchor(e)
    {
    if (act) {
    if (objActive.nodeName == 'A') {
    objActive.style.color = clrOrg;
    clearInterval(TimerID);
    act = 0;
    }
    }
    }
    function ChangeColor()
    {
    objActive.style.color = makeColor();
    }
    function makeColor()
    {
    if (elmS == 0) {
    elmR = elmV; elmG = elmV; elmB = elmV;
    }
    else {
    t1 = elmV;
    t2 = (255 - elmS) * elmV / 255;
    t3 = elmH % 60;
    t3 = (t1 - t2) * t3 / 60;
    if (elmH < 60) {
    elmR = t1; elmB = t2; elmG = t2 + t3;
    }
    else if (elmH < 120) {
    elmG = t1; elmB = t2; elmR = t1 - t3;
    }
    else if (elmH < 180) {
    elmG = t1; elmR = t2; elmB = t2 + t3;
    }
    else if (elmH < 240) {
    elmB = t1; elmR = t2; elmG = t1 - t3;
    }
    else if (elmH < 300) {
    elmB = t1; elmG = t2; elmR = t2 + t3;
    }
    else if (elmH < 360) {
    elmR = t1; elmG = t2; elmB = t1 - t3;
    }
    else {
    elmR = 0; elmG = 0; elmB = 0;
    }
    }
    elmR = Math.floor(elmR).toString(16);
    elmG = Math.floor(elmG).toString(16);
    elmB = Math.floor(elmB).toString(16);
    if (elmR.length == 1) elmR = "0" + elmR;
    if (elmG.length == 1) elmG = "0" + elmG;
    if (elmB.length == 1) elmB = "0" + elmB;
    elmH = elmH + rate;
    if (elmH >= 360)
    elmH = 0;
    return '#' + elmR + elmG + elmB;
    }
    //]]>
    </script>
  5. Save Template

No comments:

Powered by Blogger.