Lihat contoh link membesar dan berubah warna saat disentuh cursor dibawah ini, arahkan cursor pada link demo.
Cara Membuat Link Membesar Dan Berubah Warna Saat Di Sorot Mouse :
Langkah 1 : Login pada blogger
Langkah 2 : Pada halaman Dasbor klik Rancangan => Edit HTML
Langkah 3 : Centang pada Expand Template Widget, berfungsi untuk menampilkan seluruh kode didalam template.
Langkah 4 : Temukan kode a:link dan a:hover, kode lengkapnya seperti dibawah ini :
a:link {
color: #4680C2;
outline: none;
}
a:hover {
text-decoration:underline;
outline: none;
}
NB :
Setiap template tidaklah sama, Anda hanya perlu mencari kode yang mirip seperti kode diatas.
Tips : Gunakan tombol CTRL+F pada keyboard untuk mempermudah menemukan kode diatas.
Langkah 5 : Hapus seluruh kode diatas kemudian ganti dengan dengan kode dibawah ini :
a:link {
color:#FF0000;
font-size:10px;
text-decoration:none;
cursor:default;
}
a:hover {
color:#0000FF;
font-size:18px;
text-decoration:none;
cursor:wait;
}
Keterangan :
Pada a:link { ,tag color: #FF0000; adalah kode warna asli dari link tersebut, kemudian pada a:hover { ,tag color :#0000FF adalah kode warna link apabila link disorot mouse.
Pada a:link { font-size:10px menunjukkan ukuran font asli dari link tersebut yaitu 10px, kemudian pada a:hover { font-size:18px adalah ukuran font saat link disorot mouse membesar menjadi 18px..
cursor:default;} dan cursor:wait;} adalah kode yang harus Anda tambahkan.
Silahkan ganti warna link serta ukuran link sesuai keinginan Anda sendiri.
Langkah 6 : Simpan template
Selesai.
0 komentar:
Posting Komentar