SEO Blogger | Google Adsense

Hai sob, ketemu lagi dengan posting saya yang selanjutnya. Kali ini sejuta trik blogger ingin berbagi Macam-macam Script Link Hover. Apa sih Link Hover itu?

Link hover adalah sebutan untuk perubahan warna bila link tersebut ~~disentubuh~~ disentuh oleh mouse. Sebagai contoh arahkan pointer atau anak panah mouse ke salah satu menu label blog ini. Maka akan otomatis berubah warna. Maka dari itu disebut Link Hover.

Sebenarnya banyak sekali yang sudah memposting tentang link hover ini hususnya Raninbow. Dalam web asing malah disebutkan Link Fader dan lain-lain. Entah apa bedanya? Kalau menurut saya kurang lebih tidak jauh berbeda.

Baik tanpa banyak kata-kata lagi langsung saja pilih yang disuka. Kode dalam gambar kertas di bawah adalah scrool. Jadi dimohon jangan ada yang ketinggalan! Tinggal Copas di notepad ya!. Supaya hasilnya sama dengan aslinya.

1. Rainbow (Pelangi)

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

2. Link Hover Lost (Link berubah warna kemudian akan menghilang)

<script>
/******************************************************************
*    Script name: Link fader
*    Version: 0.5
*    Date: 02.05.02
*    Usage: Freeware (as long as you don't remove this comment)
*
*    Script by: Fayez Zaheer (viol8r on #webdesign [uk.zanet.org.za])
*    Email: fayez at impenetrable.org
*    Web site: http://impenetrable.org
*     Original idea: http://anarchos.xs.mw/fade.phtml
******************************************************************/

// Make sure not to add a # to fcS and fcE - use hex values 6 characters in length ONLY
var fcS = "ffffff";
    // Original colour of your links
var fcE = "ff0000";
    // Fade to which colour?
var fBy = 5;
    // Changing this will affect how accurately the fade to colour is "reached". A value of 1 is most accurate
var speed = 10;
    // Delay in milliseconds of the change from each individual colour to the next during the fade

// Unless you want the ability to let your visitors change the
//    fade to colour, you can delete the following function
function fadeTo()
    {
        var c = prompt("What colour do you want to fade to (no #)?", "ff0000");
        convertHex(c);
        fcEr = r;
        fcEg = g;
        fcEb = b;
    }
// Stop deleting.

// IF YOU DON'T KNOW WHAT YOU ARE DOING,
// DON'T EDIT ANYTHING BEYOND THIS POINT
var r , g, b, fcEr, fcEg, fcEb, fcSr, fcSg, fcSb, fi, fo, x = 0, h = new String();

function convertHex(hex)
    {
        r = hex.substring(0, 2);
        r = parseInt(r, 16);
        g = hex.substring(2, 4);
        g = parseInt(g, 16);
        b = hex.substring(4, 6);
        b = parseInt(b, 16);
    }

convertHex(fcE);
    fcEr = r;
    fcEg = g;
    fcEb = b;

convertHex(fcS);
    fcSr = r;
    fcSg = g;
    fcSb = b;

function fadeIn(x)
    {
        if ((r > fcEr) && (r-fBy >= 0)) r -= fBy;
        if ((g > fcEg) && (g-fBy >= 0)) g -= fBy;
        if ((b > fcEb) && (b-fBy >= 0)) b -= fBy;
        if ((r < fcEr) && (r+fBy <= 255)) r += fBy;
        if ((g < fcEg) && (g+fBy <= 255)) g += fBy;
        if ((b < fcEb) && (b+fBy <= 255)) b += fBy;
        document.links[x].style.color = "rgb(" + r + "," + g + "," + b + ")";
        if ((r == fcEr) && (b == fcEb) && (g == fcEg))
            clearInterval(fi);
    }

function fadeOut(x)
    {
        if ((r < fcSr) && (r+fBy <= 255)) r += fBy;
        if ((g < fcSg) && (g+fBy <= 255)) g += fBy;
        if ((b < fcSb) && (b+fBy <= 255)) b += fBy;
        if ((r > fcSr) && (r-fBy >= 0)) r -= fBy;
        if ((g > fcSg) && (g-fBy >= 0)) g -= fBy;
        if ((b > fcSb) && (b-fBy >= 0)) b -= fBy;
        document.links[x].style.color = "rgb(" + r + "," + g + "," + b + ")";
        if ((r == fcSr) && (b == fcSb) && (g == fcSg))
            clearInterval(fo);
    }

function findLink()
    {
        convertHex(fcS);
        clearInterval(fo);
        clearInterval(fi);
        document.links[x].style.color = "#" + fcS;
        x = 0;
        while (!(this.id == document.links[x].id) && (x < document.links.length))
            x++;
        if (this.id == document.links[x].id)
            fi = setInterval("fadeIn(" + x + ")", speed);
    }

if ((!document.layers) && (document.links))
    {
        for (var i = 0; i < document.links.length; i++)
            {
                document.links[i].id = "link" + i;
                document.links[i].onmouseover = findLink;
                document.links[i].onmouseout = function mouseOut() { clearInterval(fi); clearInterval(fo); fo = setInterval("fadeOut(" + x + ")", speed); };
            }
    }
</script>

3. Link Hover Blink ~~182~~ (Link berubah warna dan akan berkedip)

<SCRIPT LANGUAGE='JAVASCRIPT' TYPE='TEXT/JAVASCRIPT'>

</SCRIPT>
<style>
a:hover {
color:#00FFFF;
text-decoration:blink;
border-bottom:1px dotted #003300;
}
</style>

Penting !

1. Untuk kode no1. Bisa kalian ubah kecepatan berubah warnanya pada warna hijau ganti angka lebih sedikit untuk lebih pelan, dan kebalikannya.
2. Semua kode di atas akan berjalan baik di setiap posting atau di sidebar blog. Jika di tempatkan pada urutan widget teratas. Ini dimaksudkan agar pemanggilan script pengubah warna atau hover ini lebih diprioritaskan.
3. Mohon maaf dikarenakan tutorial merupakan script. Untuk demo hasil dari script link hover tidak saya tampilkan. Sebagai gantinya silakan dicoba saja. Toh malah tau bedanya. Ya ga?

Nah, sementara itu yang dapat sejuta trik blogger berikan tentang macam-macam script link hover. Untuk selanjutnya akan diupdate lain waktu. Itu pun kalau saya dapat script yang baru. ha ha ha ha ha.

Happy Blogging! by. Sejuta Trik Blogger

Menyembunyikan komentar pada posting tertentu merupakan pilihan bagi admin blog. Entah apa maksud dari pemilik blog untuk menyembunyikan kotak komentar pada posting tertentu. Yang jelas itulah pilihannya. Atau malah mau mengubah kotak komentar berada di atas pengunjung? Klik saja untuk melihatnya! ~~Emmm~~,

Belum lagi jatah pages di blogger hanya 10 halaman. Jelas ini kurang bagi saya jika halaman tersebut akan diposting untuk tidak ada komentarnya.

Untuk masalah komentar, blogger memang jarang sekali mengadakan pembaharuan. Sekali ada perubahan hanya masalah ukuran kotak komentar yang bisa didrag.

Untuk mengatasi masalah menyembunyikan kotak komentar pada posting tertentu, kita tidak usah mengedit HTML blog kita. Cukup pada saat posting seperti biasa. Kita pun sudah bisa menyembunyikan kotak komentar pada salah satu posting.

Nah, untuk cara hiden kotak komentar pada posting tertentu silahkan cermati cara berikut ini :

Posting Baru

1. Posting seperti biasanya
2. Jika sudah klik Post Options
3. Klik opsi seperti gambar di bawah ini

4. Klik Publish Post atau Preview
5. Selesai

Posting Lama
Caranya sama dengan Edit atau Publish ulang blog sahabat dengan cara seperti di atas.

Nah seperti itulah cara menyembunyikan komentar pada posting tertentu. Semoga kata-kata pembuka tips trik ini tidak menyurutkan niat sahabat dalam menyembunyikan kotak komentar pada posting tertentu yang sebenarnya sangat simple. he2

Happy Blogging!
by. Sejuta Trik Blogger