Friday, May 29, 2015

Cara membuat link warna warni (Pelangi)

rainbow
hi, pada artikel kali ini saya akan membagikan sebuah trik menarik untuk mempercantik tampilan blog sobat, penasaran? bagi sobat yang suka ngotak-ngatik blog nya untuk mempercantik dan memperindah tampilan blog, tips ini pas banget. trik ini membuat link berubah warna saat kursor diarahkan ke link dan membuat seperti efek pelangi pada link, jadi tambah meriah dan penuh warna kan? yang pasti makin enak di pandang oleh visitor blog sobat.



Ikuti langkah-langkah dibawah ini:

  • login ke blogger
  • pilih template >> edit html
  • centang expand widget template
  • cari kode </head> untuk mempermudah gunakan ctrl+f
  • copy paste kode ini tepat diatas </head>
  • <script type='text/javascript'>
    //<![CDATA[
    var rate = 20;
    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;     // A color before the change
    var TimerID;    // Timer ID
    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()",100);
        }
    }
    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()",100);
            }
        }
    }
    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()",100);
            }
        }
    }
    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()
    {
        // Don't you think Color Gamut to look like Rainbow?
        // HSVtoRGB
        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>
  • kemudian simpan
  • lihat hasilnya saat sobat mengarahkan kursor ke link.
  • 4 comments:

    💬 Peraturan dalam berkomentar :
    ➥ Budayakan berkomentar sesudah membaca artikel sob.
    ➥ Dilarang Menghina, Promosi (Iklan), Menyelipkan Link Aktiv, dsb.
    ➥ Dilarang berkomentar berbau Porno, Spam, Sara, Politic, dan Profokasi.
    ➥ Berkomentarlah yang Sopan,Bijak, dan Sesuai Artikel (Dilarang OOT)
    ➥ Saya sangat berterima kasih atas semua yang mau berkomentar diblog saya.

    ☠ Copyright © 2014 Blog iRvan eFendy™