Background Berubah Saat Dilewati Oleh Cursor

Trik ini adalah trik untuk menampilkan background / gambar ketika widget kalian dalam keadaan mouseover (dilewati cursor). Tentunya sebagain pengguna Blogger, kita pasti memakai beberapa widget pada template kita. Nah, ketika widget tersebut dilewati oleh cursor, maka akan menampilkan background pada widget tersebut. Sudah siap? Kita mulai triknya :D
  1. Masuk ke Tata Letak / Design, pilih Edit HTML.
  2. Sebelum mulai mengedit, biasakan BackUp Template kalian terlebih dahulu. Untuk berjaga-jaga jika kalian melakukan kesalahan pada saat mengedit template.
  3. Kemudian copy CSS dibawah ini:
    .widget:hover {
    background-color: #000000;
    background-image: url("URL GAMBAR KAMU JIKA PAKE GAMBAR");
    background-position: bottom center;
    background-repeat: no-repeat;
    }
  4. Letakkan kode tersebut diatas kode:
    ]]></b:skin>
  5. berikut ini adalah penjelasannya:
    #000000 itu warna background ketika dilewati mouse, silahkan diganti sendiri dengan warna yang kamu mau.
    URL GAMBAR KAMU, silahkan diganti dengan URL gambar yang akan kamu jadikan backgroundnya nanti.
    bottom center itu adalah posisi gambar background terhadap widget kalian.
    no-repeat artinya background tidak diulang, atau no-tiles.
  6. template kalian. Lalu lihat hasilnya.

Untuk mengetes hasilnya, arahkan cursor kamu ke widget-widget yang ada di blog kamu. Selamat berkreasi ^^
Comments

No comments:

Related posts
Guestbook
Author
Other


© 2008 - 2016 DickeyMaru
Blogger Template Win 8 design by Dark Ard from DeezClan | All rights reversed.
  • Post
  • Comments
  • Related
  • Guestbook
  • Author
  • Other