Membuat Link Warna Warni

Halo sahabat semua, berikut ini Bangiz mau berbagi salah satu trik untuk memperindah tampilan blog Anda. Adapun triknya yaitu cara membuat link warna-warni. Maksudnya link akan berubah-ubah warnanya ketika tersentuh oleh kursor. Atau bisa juga dikatakan cara membuat link dengan efek rainbow. Apabila Anda tertarik untuk mencobanya atau lagi mencari cara-cara untuk mempercantik tampilan blog, mungkin cara berikut ini bisa Anda gunakan. Selanjutnya langsung ikuti saja tutorialnya berikut ini:

1. Masuk dasbor Blogger

2. Pilih Template > Edit HTML

3. Cari kode </head> (Gunakan Ctrl+F untuk mencarinya)

4. Copy-paste kode berikut tepat diatas kode </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>

   5. Simpan Template dan lihat hasilnya

Demikian tutorial kali ini mudah-mudahan bisa membantu untuk Anda yang membutuhkannya. Jika ada pertanyaan seputar topik di atas silahkan tinggalkan komentar dan jangan lupa bagikan juga ke teman-teman Anda melalui sosial media yang tersedia.