earth

Guestbook

/* Iklan google ads */
Pada setiap template blog memiliki bentuk tampilan link (tautan) yang berbeda-beda. Ada yang menggunakan bentuk garis bawah (underline), warna, ada pula yang menggunakan bentuk perubahan huruf. Setiap kali kita ingin mengubah bentuk warna atau huruf dari link tersebut, kita akan direpotkan dengan pencarian letak dimana kode link untuk title, posting, comments, widget, dan footer, tersebut berada. Ini cukup memakan waktu, bahkan bagi mereka yang belum faham betul “bahasa” HTML akan berakibat fatal, yaitu rusaknya template. Nah, sebenarnya ada cara mudah untuk mengubah bentuk tampilan warna pada link hover ini (klik untuk melihat contoh). Tapi sebelumnya akan dijelaskan dulu mengenai bentuk tampilan link, khawatir para blogger pemula belum mengerti (Sok tauk ya?! Hehe...).

Ada tiga bentuk tampilan link yang biasa terdapat pada script HTML template blog, yaitu: link active, link visited dan link hover.
  • Link active, adalah bentuk tampilan link ke suatu URL tertentu yang masih belum diklik untuk dikunjungi.
  • Link visited, adalah bentuk tampilan link yang sudah diklik untuk dikunjungi. Link ini akan kembali ke bentuk active jika kamu menghapus riwayat (history) pada internet explorer, atau jika kamu membuka situsnya di komputer lain.
  • Link hover, adalah bentuk tampilan link apabila didekati oleh mouse pointer.

Sampai sini sudah jelas kan? Nah, sekarang baru kita bicara bagaimana memberi rainbow effect (efek pelangi) pada link hover, supaya link pada blog kamu, apabila didekati oleh mouse pointer, akan berubah-ubah warna seperti pelangi. Untuk memberi efek pelangi pada link hover ini sebenarnya cukup mudah, kamu bisa mengikuti langkah-langkah berikut :
  • Kopi script berikut :
    <script src='http://enes-sc.googlecode.com/files/rainbowlink.js'/>
    
  • Kemudian Login ke blogger.
  • Dari halaman Dashboard klik Tata Letak dan pilih Edit HTML.
  • Letakkan script tadi di bawah kode <head> yang letaknya ada di barisan awal. Atau bisa juga kamu letakkan di bawah kode ]]></b:skin>.
  • Dont forget, save hasil kerjaan kamu.

Untuk melihat hasilnya, coba kamu buka blog kamu dan dekatkan mouse pointer kamu ke kata/kalimat yang memakai link. Apa yang terjadi? Wow... my link hover have rainbow effect (hehe... ngenglish deui saeutik).
Nah, gampang kan? Ok coy, selamat mencoba...
  • Artikel Terkait Dengan HTML Tutorials

    Terimakasih sudah membaca artikel SC Community's Blog

    13 komentar

    Weew... Tipsnya bagus. Tapi kalo dipasangin ini bikin blog jadi berat ga Bung?

    Datang juga ke tempat ane dan jangan lupa tinggalkan komentar ya? Thank you

    IRfan Melodic Nugroho
    http://melodic-4.blogspot.com

    http://news-fact.blogspot.com

    8 Juli 2009 08.15  

    wuiihh,,,efek pelangi di link ya sob...keren tu..

    8 Juli 2009 16.41  

    boleh minta kode html menu yang isi nya beranda, artike dll, kayaknya menarik juga.. mau ya...

    www.fabrie.tk

    21 Juli 2009 14.26  

    Saya pake efek ini tapi loading blog saya malah lama dan muncul tulisan "atau atau". Akhirnya tak buang lagi efek pelanginya.

    23 Agustus 2009 16.42  

    siiip bro...

    tukeran link yuk...

    www.afoed99.blogspot.com

    19 Januari 2010 15.26  

    kk link hover yg mana sih?
    hehehe :D

    10 April 2010 10.49  

    idiiihh,.. klw gx mau di copas ma org jgn di tampilin dong,..... bete in ajj,.

    14 Oktober 2010 21.27  

    wew.. keren blog nya kk.. dari kemarin muter2 cari nya susah sekali lihat nih blog langsung bisa.. thanx ya gan :D

    29 Agustus 2011 14.08  

    Efeknya keren sob! Makasih ya sob :)

    5 November 2012 14.12  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler