Jumat, 25 Maret 2011

Membuat Efek Pelangi Pada Link di Blog


Jika membaca judul di atas, pasti bingung. Jangan khawatir, cobalah anda arahkan kursor mouse anda pada salah satu link di blog ini. Nah itulah yang akan saya bagikan kepada blogger sekalian. Caranya pun cukup mudah, hanya beberapa langkah dan tidaklah sulit. Pemula pun pasti bisa. Langsung saja tidak perlu basa-basi lagi.

Berikut langkah-langkahnya :

1. Login ke akun blogger anda,
2. Klik "Layout / Rancangan",
2. Klik "Layout/Rancangan"
3. Klik "Edit HTML"
4. Sebelumnya, backup dulu template anda apabila terjadi kesalahan. Klik "Download Template Lengkap"
5. Setelah itu beri tanda centang "Expand Widget Templates"
6. Lalu carilah kode :
</head>

Setelah ketemu letakkan kode berikut ini tepat di atas/sebelum kode yang tadi:

<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>



8. Klik Save/Simpan

Tambahan :
var rate = 20;
Angka 20 dapat diganti sesuai dengan keingnan anda, karena itu adalah kecepatan perubahan warnanya. Semakin kecil angkanya maka semakin cepat perubahannya.


Untuk mengcopy codenya, ada di kotak komentar. Terima kasih...
Image and video hosting by TinyPic

1 komentar:

  1. Carilah kode :
    </head>

    Setelah ketemu letakkan kode berikut ini tepat di atas/sebelum kode yang tadi:

    <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>


    Klik Save/Simpan

    Tambahan :
    var rate = 20;
    Angka 20 dapat diganti sesuai dengan keingnan anda, karena itu adalah kecepatan perubahan warnanya. Semakin kecil angkanya maka semakin cepat perubahannya.

    BalasHapus

Berikan komentar anda setiap selesai membaca.
Terima kasih.
Jika ingin menyalinnya, silahkan izin dan cantumkan sumber dari blog ini.
Sincerely Bayu Aditya

Protected by Copyscape Online Plagiarism Scanner
This Blog Is Protected and Registered.
Do not try to copy without the source.

myfreecopyright.com registered & protected