Membuat Warna Background "Block Quote" Berubah saat Disorot Mouse

Sesuai judul kali ini Saya akan memberikan tutorial Membuat Warna Background "Block Quote" Berubah saat Disorot Mouse, artinya jika anda memberikan "Quote" pada sebuah teks, maka saat pengunjung menyorot mousenya ke teks tersebut yang terjadi adalah warna background asli akan berubah menjadi warna yang kita inginkan. Contoh seperti quota teks di bawah ini:
SOROT SAYA PAK!....
Untuk membuatnya ikuti langkah berikut:
1. Login ke Blogger
2. Edit HTML >> Centang
3. Cari: blockquote
4. Tidak semua blockquote sama persis, contoh di Blog Saya seperti ini:
blockquote{margin:20px;padding:10px;color:#666;width:537px;height:auto; overflow:auto;border:1px solid #E0E0E0; border-radius:5px;background:#F9F9F9;}
5. Kemudian Copy kode blockquote anda, Paste kan di bawahnya dan tambahkan beberapa kode berwarna merah seperti contoh di bawah ini. Jangan lupa kode untuk warna juga diganti agar berpengaruh saat mouse di sorot.
blockquote:hover{margin:20px;padding:10px;color:#666;width:537px; height:auto; overflow:auto;border:1px solid #A2A2A2; border-radius:5px;background:#E0E0E0;text-decoration:none;}
6. Maka hasilnya akan seperti ini:
blockquote{margin:20px;padding:10px;color:#666;width:537px;height:auto; overflow:auto;border:1px solid #E0E0E0; border-radius:5px;background:#F9F9F9;}
blockquote:hover{margin:20px;padding:10px;color:#666;width:537px; height:auto; overflow:auto;border:1px solid #A2A2A2; border-radius:5px;background:#E0E0E0;text-decoration:none;}
7. Save template, selesai.

Note: Inti dari tutorial ini adalah kita hanya membuat Copy-an BlockQuote kita kemudian menambahkan kode yang berwarna merah dan mengganti kode yang berwarna biru sesuai keinginan kita.
Jika ada yang kurang jelas silahkan komentar.

13 Responses to "Membuat Warna Background "Block Quote" Berubah saat Disorot Mouse"

  1. apa apa..... aqu suka ini
    :b: :c: :d: :e: :f: :g: :h: :i:
    :j: :k: :l: :m: :n: :o: :p: :q: :r:
    :s: :t: :u: :v: :w: :x: :y: :z: :ab:

    BalasHapus
  2. http://www.mainshared.com/image/77.gif

    BalasHapus
  3. wow bermanfaat banget gan.. tapi kalo untuk tulisan gimana ya?? post dong gan

    BalasHapus
    Balasan
    1. maksudnya klo tulisan yg mengandung link disorot gitu?

      Hapus
  4. gan kalau "blockquote" g ada??
    Gimana tolong pencerahannya
    maklum masih newbie

    BalasHapus
  5. Thank gan
    fisit me : http://kreativitas-mu.blogspot.com/

    BalasHapus
  6. mantap dah artikel saya suka

    BalasHapus
  7. Sip gan ... Terimakasih banyak sudah mau berbagi ilmunya

    BalasHapus
  8. Salam Mas Bro / Mbak Bro

    Kalau pakenya wordpress, gimana kodenya Mas Bro?

    Mauliate
    Terimakasih

    BalasHapus
  9. saya sudah coba gan, tapi ko gagal yah ? tolong pencerahannya gan

    BalasHapus