Cara Membuat Efek Link Membesar Saat Disentuh Kursor – Tutorial pada hari Minggu ini tidak jauh jauh
dari manipulasi CSS. Dimana, saya akan membahas trik untuk membuat link
terlihat membesar ukurannya saat dilintasi oleh pointer atau kursor. Tujuannya hanya
satu, yaitu untuk menambah nilai seni dari blog, sama dengan pemasangan efek bayangan pada link ataupun pengubahan bentuk cursor menjadi bentuk lain. Untuk trik lainnya, Anda bisa lihat disini. Silahkan lihat previewnya pada gambar berikut.
Oke, langsung saja. Untuk
Anda yang ingin mencoba memasang efek link membesar ini, silahkan ikuti langkah
berikut :
1. Buka
akun Blogger Anda, lalu masuk ke Template.
Buatlah sebuah backup dari template blog Anda, lalu klik Edit HTML.
2. Tekan
CTRL+F, dan cari kode a:hover { . Kodenya kurang lebih seperti ini
(umumnya pada setiap template blog berbeda, namun cari yang mendekati/mirip) :
a:hover {color:#325C1C;text-decoration:underline;text-shadow:5px 5px 5px #000;}
3. Tambahkan
kode font-size:18px;
pada baris terakhir, sebelum } . Sehingga kodenya akan menjadi seperti ini :
a:hover {color:#325C1C;text-decoration:underline;text-shadow:5px 5px 5px #000;font-size:18px;}
Catatan :
- 18px
menunjukkan ukuran font pada link saat pointer diletakkan diatasnya (dalam
satuan piksel). Gantilah sesuai dengan keinginan.
- Jika
parameter font-size: sudah ada dalam template blog Anda, cukup ganti nilai
(angka sebelum px) ukuran font untuk memberikan efek link membesar pada blog.Author NBC Nhazhar
4. Terakhir,
klik Simpan.
Selamat mencoba ‘mengagetkan’
pengunjung blog Anda dengan link yang membesar! Tolong share dan berikan
artikel ini Google +1. Terima kasih, dan salam blogger!
0 komentar:
Posting Komentar