Selasa, 20 November 2012

Cara Membuat Link Berkedip Warna-Warni Di Blog

Cara Membuat Link Berkedip Warna-Warni Di Blog - Pada waktu pertama kali Master Chef belajar mengelola blog, banyak hal yang menarik yang Master Chef temui salah satunya saya menemui blog yang linknya berwarna warni ketika kursor berada diatas link tersebut.

Master Chef cukup tertarik bagai mana membuatnya.Cari-cari digoogle banyak sekali informasi tentang cara membuat link berkedip warna warni ternyata untuk membuat link berkedip warna-warni tidak susah seperti yang dibayangkan, sangat simpel dan sederhana.

Mungkin dari sekian banyak sobat blogger Dapur Tutorial Blogspot dan Seo ada beberapa yang juga tertarik untuk membuat link dihalaman blognya berwara-warni saat kursor berada diatas link tersebut. Sekarang kita bahas cara membuat link berkedip warna warni. Langkah-langkahnya adalah sebagai berikut :

Langkah pertama : 
  1. Download scrip Link warna warni klik DISINI
  2. Format file sudah saya buat dalam file.js apa bila anda ingin membuat file  Js sendiri scrip nya dibawah ini.

    /************************************************************************/
    /* Rainbow Links Version 1.03 (2003.9.20) */
    /* Script updated by Dynamicdrive.com for IE6 */
    /* Copyright (C) 1999-2001 TAKANASHI Mizuki */
    /* takanasi@hamal.freemail.ne.jp */
    /*----------------------------------------------------------------------*/
    /* Read it somehow even if my English text is a little wrong! ;-) */
    /* */
    /* Usage: */
    /* Insert '<script src="rainbow.js"></script>' into the BODY section, */
    /* right after the BODY tag itself, before anything else. */
    /* You don't need to add "onMouseover" and "onMouseout" attributes!! */
    /* */
    /* If you'd like to add effect to other texts(not link texts), then */
    /* add 'onmouseover="doRainbow(this);"' and */
    /* 'onmouseout="stopRainbow();"' to the target tags. */
    /* */
    /* This Script works with IE4,Netscape6,Mozilla browser and above only, */
    /* but no error occurs on other browsers. */
    /************************************************************************/


    ////////////////////////////////////////////////////////////////////
    // Setting

    var rate = 20; // Increase amount(The degree of the transmutation)


    ////////////////////////////////////////////////////////////////////
    // Main routine

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


    //=============================================================================
    // doRainbow
    // This function begins to change a color.
    //=============================================================================
    function doRainbow(obj)
    {
    if (act == 0) {
    act = 1;
    if (obj)
    objActive = obj;
    else
    objActive = event.srcElement;
    clrOrg = objActive.style.color;
    TimerID = setInterval("ChangeColor()",100);
    }
    }


    //=============================================================================
    // stopRainbow
    // This function stops to change a color.
    //=============================================================================
    function stopRainbow()
    {
    if (act) {
    objActive.style.color = clrOrg;
    clearInterval(TimerID);
    act = 0;
    }
    }


    //=============================================================================
    // doRainbowAnchor
    // This function begins to change a color. (of a anchor, automatically)
    //=============================================================================
    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);
    }
    }
    }


    //=============================================================================
    // stopRainbowAnchor
    // This function stops to change a color. (of a anchor, automatically)
    //=============================================================================
    function stopRainbowAnchor()
    {
    if (act) {
    if (objActive.tagName == 'A') {
    objActive.style.color = clrOrg;
    clearInterval(TimerID);
    act = 0;
    }
    }
    }


    //=============================================================================
    // Mozilla_doRainbowAnchor(for Netscape6 and Mozilla browser)
    // This function begins to change a color. (of a anchor, automatically)
    //=============================================================================
    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);
    }
    }
    }


    //=============================================================================
    // Mozilla_stopRainbowAnchor(for Netscape6 and Mozilla browser)
    // This function stops to change a color. (of a anchor, automatically)
    //=============================================================================
    function Mozilla_stopRainbowAnchor(e)
    {
    if (act) {
    if (objActive.nodeName == 'A') {
    objActive.style.color = clrOrg;
    clearInterval(TimerID);
    act = 0;
    }
    }
    }


    //=============================================================================
    // Change Color
    // This function changes a color actually.
    //=============================================================================
    function ChangeColor()
    {
    objActive.style.color = makeColor();
    }


    //=============================================================================
    // makeColor
    // This function makes rainbow colors.
    //=============================================================================
    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;
    }

  3. Upload file Js ke google code
  4. Copy URL file script yang anda upload di google code tadi paste pada notepad. Contohnya kurang lebih seperti ini.

  5. http://dapurtutorial.googlecode.com/files/scrip%20link%20warna%20warni.js

  6. Selanjutnya rubah Url diatas menjadi seperti ini

  7. <script src='http://dapurtutorial.googlecode.com/files/scrip%20link%20warna%20warni.js'></script>

  8. Copy kode tersebut kemudian
Langkah kedua
  1. Log in ke blog anda pilih
  2. Dari bagian Dashbord blogger Pilih Template --> Edit HTML --> Proses/Lanjutkan 
  3. Cari kode </head> gunakan tombol F3 untuk memudahkan pencarian kode
  4. Setelah kode ditemukan Paste kode yang anda Copy tadi dibawah kode </head>
  5. Sehingga susunanya menjadi seperti ini

  6. </head> 
    <script src='http://dapurtutorial.googlecode.com/files/scrip%20link%20warna%20warni.js'></script>

  7. Apabila anda tidak mau repot anda langsung bisa menggunakan kode yang sudah saya upload di google kode tersebut.
  8. Simapan templat dan lihat hasilnya
Itu dia Resep Cara Membuat Link Berkedip Warna-Warni Di Blog dari Master Chef kali ini. Selamat mencoba, Semoga berhasil dan bisa bermanfaat.

Tidak ada komentar:

Posting Komentar