KafeGue.com

Memberi Efek Pointer atau Tangan pada Tombol Submit Komentar Saat Dihover

Pada 23 April 2011 → 3482 kali dilihat

Anda sudah tahu apa itu efek pointer pada tombol atau button? Jika belum, coba arahkan kursor komputer Anda di atas sebuah link atau di atas tombol submit komentar blog ini. Itulah yang disebut sebagai efek pointer. Masih belum tahu juga? Itu lho, efek seperti gambar tangan yang seolah siap mengklik link atau tombol yang ada di bawahnya.

Sebagai contoh, coba Anda arahkan kursor komputer Anda di atas kedua buah tombol berikut ini. Lalu rasakan perbedaannya.

.

.

.

Nah, sudah mengerti bukan? Kalau masih tidak tahu juga, sungguh T E R L A L U :)

Masalahnya, efek pointer ini tidak selalu ada pada tombol submit komentar pada sebuah website atau blog. Saya beberapa kali menemukan kenyataan ini pada blog-blog maupun website tertentu. Sebenarnya efek pointer ini bukanlah sesuatu yang wajib diberikan pada sebuah tombol/button. Namun demi kemudahan user/pengguna (alias pengunjung web) dalam mengenali sebuah objek yang bisa diklik, maka ada baiknya kita memberi efek tangan (pointer) pada tombol submit/kirim komentar.

Sepertinya memang hal yang sangat sepele. Toh, mungkin kita juga berpikir bahwa tanpa efek tersebut pun, umumnya pengunjung web sudah tahu bahwa tombol submit komentar itu bisa diklik. Namanya juga untuk mengirim komentar, pasti bisa diklik dong. Mungkin begitu pikir Anda. Benar tidak? (harap dijawab ya) :)

Walaupun terkesan sepele atau tidak penting, efek pointer pada tombol tetap saja bisa sangat bermanfaat. Ia akan menambah nilai dari sisi ‘aksesibilitas’ (kemudahan akses) dan ‘usability’ (kebergunaan) pada website/blog yang kita kelola.

Oke deh kalau begitu. Saya rasa pengantarnya sudah cukup.

Bagaimana sih cara menambahkan efek pointer ini pada tombol submit komentar?

1. Buka dulu salah satu halaman posting blog/website Anda, terutama yang kotak komentarnya terbuka (tidak ditutup).
2. Coba lihat/buka ‘source-code’ HTML-nya dengan cara menekan tombol Ctrl + U (jika menggunakan browser Firefox, Chrome, maupun Opera). Namun jika Anda menggunakan Internet Explorer atau Safari, coba dengan cara klik kanan, lalu pilih ‘View Source’.
3. Carilah kode HTML untuk menampilkan tombol submit komentarnya. Caranya, tekan tombol Ctrl + F pada halaman ‘source-code’ yang telah terbuka, lalu isikan dengan input name="submit" pada kotak pencarian yang muncul.
4. Perhatikanlah hasil pencarian yang terstabilo (ter’highlight’). Misalnya seperti di bawah ini.
5. Nah, kalau sudah ketemu seperti tampilan di atas, coba perhatikan kode di sampingnya yang ada tanda id="submit". Umumnya nama id-nya sama antara satu theme dengan theme lainnnya (kecuali telah dikustomisasi oleh penggunanya). Jadi, rata-rata theme blog atau template website memilik nama id yang sama (untuk mengatur tampilan tombol submit komentar), yaitu sama-sama bernama id="submit".Dalam hal ini, nama id-nya yaitu “submit”.

   Dengan mengetahui nama id/pengenal untuk mengatur tampilan tombol submit komentar tersebut, kita bisa menambahkan efek pointer nantinya.

6. Langkah selanjutnya yaitu membuka file CSS pada theme yang Anda gunakan. Silakan login dulu ke ‘control panel’ hosting Anda atau ke dashboard engine blog Anda. Kemudian bukalah file CSS-nya. Lalu temukan kode berupa id="submit". Gunakan saja teknik ‘shortcut’ lewat menekan tombol Ctrl + F, lalu isikan kotak pencariannya dengan keterangan kode berupa #submit.

   Kode tersebutlah yang mengatur tampilan tombol submit komentar. Tanda # menyatakan bahwa itu adalah sebuah ID, sedangkan ‘submit’ adalah nama ID-nya. Ingat kembali tentang keterangan kode HTML berupa id="submit". Bedanya, kalau sudah di dalam file CSS, penulisan kodenya yaitu berupa #submit.

   Coba lihat keterangan pada kode #submit tersebut, khususnya yang diapit oleh 2 buah kurung kurawal ({ }). Misalnya seperti berikut ini.

   #submit {
      color: #FFFFFF;
      font-family:Arial, Helvetica;
      font-size:14px;
      font-weight:700;
      border:1px solid #000;
      display:block;
      margin:0;
      padding:4px;
      background-color: #111111;
   }

7. Nah, pada kode CSS di atas, coba tambahkan kode berupa cursor:pointer (tambahkan saja di bagian akhir, sebelum tanda kurung kurawal penutup). Hasilnya akan jadi begini:

   #submit {
      color: #FFFFFF;
      font-family:Arial, Helvetica;
      font-size:14px;
      font-weight:700;
      border:1px solid #000;
      display:block;
      margin:0;
      padding:4px;
      background-color: #111111;
      cursor:pointer
   }

8. Lalu simpanlah hasil pengeditan Anda tersebut dengan menekan tombol Save atau Simpan pada bagian bawah kotak file CSS. Coba lihat hasilnya pada salah satu halaman posting blog/website Anda yang terdapat tombol submit komentar.Jika sudah muncul efek pointer/tangan saat tombol submit komentarnya dihover, Anda berhasil.

Catatan:

Pada theme/template tertentu, kadang tidak ada kode CSS untuk mengatur tampilan tombol submit komentarnya. Cara mengetahui bahwa tidak ada kode CSS-nya bisa dibuktikan dengan saat kita mencari kode #submit pada file CSS-nya.

Jika kita tidak menemukan kode #submit di dalam file CSS, berarti kita perlu menambahkan kode CSS baru untuk mengatur tampilan tombol submit komentar (agar efek pointer-nya bisa muncul).

Caranya yaitu dengan menambahkan kode berikut ini ke dalam file CSS.

#submit {
   cursor:pointer
}

Selamat mencoba. Jika ada pertanyaan atau kesulitan, silakan sampaikan via kolom komentar.

Maaf, karena alasan tertentu, kotak komentar ditutup!