Jumat, 22 Juni 2012

0

Cara membuat Image hover menggunakan Style CSS

  • Jumat, 22 Juni 2012
  • Setiawan Dimas
  • Share
  • Setelah sebelumnya saya memosting mengenai Cara membuat template blog lebih SEO friendly Pada postingan kali ini saya akan sedikit berbagi mengenai Cara membuat Image hover menggunakan Style CSS untuk memperindah tampilan blog teman-teman. Fungsi dasar hover adalah untuk merubah tampilan sebuah link pada saat link tersebut disentuh oleh cursor, teman-teman pasti sering melihatnya pada sebuah text link (anchor text), biasanya sebuah text link akan berubah warna pada saat link tersebut tersentuh oleh cursor. Image Hover memiliki fungsi yang sama yaitu merubah gambar pada saat gambar tersebut disentuh oleh cursor. Untuk lebih jelasnya silahkan lihat contohnya dibawah ini:

    DEMO




    Biasanya Image hover dibuat dengan menggunakan kode javascript agar perubahan gambar lebih halus, sayangnya terlalu banyak menggunakan javascript pada blog akan membuat loading blog kita menjadi lebih berat. Oleh sebab itu di bawah ini akan saya terangkan bagaimana cara membuat image hover dengan menambahkan sedikit kode CSS pada halaman edit HTML kita.

    1. Buka halaman edit HTML blogger
    Dashboard >> Layout >> edit HTML

    2. Copy code CSS dibawah ini dan paste tepat di atas kode ]]></b:skin> pada halaman edit HTML blogger.

    3. Klik "Save Template"

    Sekarang, untuk menampilkan Image Hover kita memerlukan 2 buah image yang berbeda kemudian memanggil kode CSS tersebut dengan menambahkan class pada HTML image yang kita punya, silahkan lihat contoh kodenya dibawah ini:

    <a class="pic" href="LINK YANG DITUJU"><img class="image1" src="URL IMAGE ASLI"/> <img class="image2" src="URL IMAGE HOVER"/></a>

    oke sekian tutorial Cara membuat Image hover menggunakan Style CSS semoga artikel ini bermanfaat dan apbila anda kurang memahaminya silahkan berikan komentar anda di bawah

    0 Responses to “Cara membuat Image hover menggunakan Style CSS”

    Poskan Komentar

    Subscribe