√ Tutorial Cara Membuat Efek Link Pelangi di Blog

Tutorial Cara Membuat Efek Link Pelangi di Blog

Tutorial Cara Membuat Efek Link Pelangi di Blog www.amaterasublog.com

Amaterasublog – Hallo sobat bloggers, dalam artikel kali ini saya akan memberikan sebuah tutorial cara membuat efek link pelangi di blogspot.

Efek pelangi atau disebut juga dengan efek hover rainbow, adalah sebuah link (hyperlink) yang dikombinasikan dengan menggunakan javascript sehingga membuat link yang disorot (menggunakan kursor) akan memiliki efek berkedip-kedip dan berwarna-warni seperti pelangi.

Tutorial Cara Membuat Efek Link Pelangi di Blogger

Adapun untuk cara memasang efek link pelangi di blog, caranya sangat mudah yaitu, sobat cukup menambahkan javascript link pelangi yang saya sediakan di bawah ini, kemudian sobat letakkan di atas kode  </head> .

Cara Memasang Efek Link Pelangi di Blog

1. Login ke dashboard blogger > Pilih Edit Template > Salin kode di bawah ini, kemudian tempel di atas kode </head>
<!--Link Pelangi Start-->
<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>
<!--Link Pelangi End-->
2. Simpan Template > Lihat hasilnya
3. Selesai

Penutup Tutorial Blogging ...

Cukup sekian artikel tentang Tutorial Cara Membuat Efek Link Pelangi di Blog. Jika ada pertanyaan terkait tutorial di atas, silahkan sobat bloggers tulis di kolom komentar di bawah. Semoga bermanfaat.

Disclaimer : Beberapa artikel di blog ini terkadang berisi informasi dari berbagai macam sumber. Hak cipta berupa gambar, teks, dan link sepenuhnya dimiliki oleh web tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami disini

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Tutorial Cara Membuat Efek Link Pelangi di Blog"

Posting Komentar

Seputar Blogger & Publisher

Hobi Ikan Hias & Aquascape

Info Anime List & OST Anime

Literatur Sosiologi & Politik

Informasi Menarik Lainnya ...

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel