Kamis, 24 November 2011

Membuat Elemen Hide N Seek

ang aku maksud dengan elemen hide n seek adalah jika pointer mouse kita berada di atas sebuah post/artikel maka elemen tersebut akan terlihat, dan jika pointer mouse kita berada di tempat lain, elemen tersebut tidak akan terlihat. Hal ini membuat elemen tersebut lebih menarik untuk dilihat pembaca.
Aku terinspirasi membuat ini dari facebook. Semoga saja pemilihan nama "hide n seek" tidak salah. :)
Contohnya kamu bisa lihat di blog ini.
  1. Masuk ke account Blogger kamu, pilih "Layout" - "Edit HTML",
  2. Centang "Expand widget Templates",
  3. Cari kode
     
    .post {
    xxxxxxxxxxxx
    xxxxxxxxxxxx
    ...
    }
    kemudian tambahkan di bawahnya:
     
    .post .hideseek {
    display:none;
    }
    .post:hover .hideseek {
    display:inline;
    float:right;
    }
  4. Nah, setelah itu, cari lagi kode <div class='post-footer'>, dan tambahkan di bawahnya:
    <div class='hideseek'>
    <!-- Kode Elemen kamu di sini -->
    </div>
  5. Kamu bisa menambahkan kode elemen di atas dengan kode Share Button, sebuah gambar, dll.
  6. Kalau kamu mau menambahkannya dengan gambar, ganti saja kode yang ditebalkan dengan
    <img src='urlgambarkamu.png'/>
Selamat mencoba!
Bagi yang ingin bertanya atau mempunyai masalah dalam mencoba ini, silakan tinggalkan komentar di bawah :D
Share on :
 
© Copyright Top Online News | Toko News 2011 - Some rights reserved | Powered by | Blogger.com.
Template Design by Herdiansyah Hamzah | Supported by Toko Blog N GoogleMembuat Elemen Hide N Seek