Banyak hal yang dapat dilakukan dalam memodifikasi Blog supaya terlihat menarik. Setelah sebelumnya saya membagikan cara untuk memberikan efek hover pada gambar, pembahasan kali ini masih membahas tentang efek hover, hanya saja sekarang saya akan memberikan efeknya untuk link teks atau tautan yang terdapat pada Blog anda. Jika anda tertarik, ikuti tutorial dibawah,
Langkah-langkah yang harus dilakukan,
- Login ke akun Blog anda.
- Pilih menu "Template".
- Klik "Edit HTML".
- Centang "Expand Template Widget".
- Sekarang anda cari kode a:link, untuk lebih kode lengkapnya lihat dibawah,
a:link {
text-decoration:none;
color: #0000ff;
}
a:visited {
text-decoration:none;
color: #6a6a6a;
}
a:hover {
text-decoration:underline;
color: #ff2707;
}
Keterangan:
Untuk kode yang berwarna Biru, itu merupakan kode warna yang ada diblog anda, jadi kodenya pasti berbeda.
- Berikut adalah beberapa efek yang bisa anda tambahkan,
Efek yang pertama,
Link anda akan berubah ukurannya. Untuk membuat link seperti ini anda hanya perlu meletakkan kode dibawah ini setelah kode a:hover {
font-size:20px;
Keterangan: untuk ukuran perubahannya dapat anda tentukan sendiri sesuai keinginan anda dengan merubah angka "20" (satuan px).
Efek yang kedua,
Pada efek ini saya memberikan sebuah background gambar dari link-nya. Untuk membuatnya letakkan kode dibawah, setelah kode a:hover {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHgTIVJaTUDTb0JswbInWtSgsQT1yEI2sCpeLFDZKrVTFXyAq2AgsWgAqYsndNt_VQGmAqx9mp6zM4M0-VfHE0G74jNu-wYvr6gTUPSaORYpR518XIBwp_Xec512LKNAqPA6seFDeDf1U/s1600/Bintang+Berkilauan.gif);Keterangan: kode berwarna Biru merupakan URL dari gambar, anda dapat merubah dengan URL gambar yang anda punya.
Adapun gambar-gambar lain yang bisa anda gunakan,
Efek yang ketiga,
Efek yang saya tambahkan adalah glow (bercahaya). Untuk membuatnya letakkan kode dibawah setelah kode a:hover {
text-shadow:0 0 10px blue;
Keterangan: kode berwarna Biru merupakan warna dari cahaya yang akan muncul, silakan ubah sesuai kreasi anda.
Efek-efek diatas dapat anda tambahkan secara bersamaan.
- Jika anda sudah menentukan pilihan efek yang ingin anda gunakan, klik "Simpan template".
Itulah beberapa efek yang dapat anda tambahkan pada link atau tautan anda.
Selain efek-efek yang ada diatas masih ada satu efek lagi, hanya saja cara menggunakannya sedikit berbeda dari cara diatas,
Efek yang akan muncul nanti adalah merubah warna dari link yang ada di Blog anda menjadi warna warni (pelangi).
Langkah-langkah membuat link aktif menjadi rainbow (pelangi).
Tata Letak >> Tambahkan Gadget (dimana saja) >> HTML/Javascript >> Isi konten dengan kode dibawah,
<script src='http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/kedip_rainbow.js
' type='text/javascript'/></script>
Jika sudah klik "Simpan".
