Bagian CSS yang memberi aturan pada link ada 4 jenis:
1. a : tampilan dasar suatu link
2. a:hover: tampilan link ketika mouse berada di atas link (mouse hovering)
3. a:visited: tampilan link setelah di-click atau ketika halaman link tersebut telah dibuka.
4. a:active: tampilan link ketika di-click ( ketika halaman baru belum terbuka secara sempurna)
Sedangkan style text CSS memiliki beberapa jenis:
1. color: warna link, valuenya berupa warna hexadesimal, RGB, maupun color name.
2.
Text decoration: hiasan pada link, berupa underline (garis bawah, ini
bawaan secara default), none (tanpa hiasan), overline (garis di atas)
dan blink (berkedip)
3. Font-size: ukuran teks, biasanya dalam pixel (px), em, persen (%), dll.
4.
dan masih banyak lagi jenis text-style yang lainnya, sobat nantinya
silahkan mempelajari sendiri cara-cara memodifikasi tampilan teks dengan
CSS.
Nah, setelah mengetahui beberapa
properti style CSS pada link, untuk mengubah tampilan default link pada
blog, silahkan lihat pada template Blogger/Blogspot sobat (lihat
melalui edit HTML), kemudian cari aturan CSS yang mengatur link, yaitu
a, a hover, .... dan seterusnya.
Clue: aturan CSS terletak di antara <b:skin><![CDATA[ dan ]]></b:skin>, aturan link berada di bagian awal, biasanya setelah variable dan setelah body {...}
Contoh aturannya seperti ini (namun tidak sama persis tergantung aturan CSS teks-nya):
a {color: #1C4991; text-decoration: none;}
a:hover {color: #f2984c; text-decoration: underline;}
a:visited {color: 1C4991; text-decoration:none;}
Pada bagian berwarna
biru
itulah sobat bisa memodifikasi tampilan link, baik tampilan awal link
(a), ketika mouse di-hover di atas link (a:hover), dan ketika link telah
di klik/dikunjungi (a:visited). Ingat, tampilan dasar link selalu
bergaris bawah, maka untuk
menghilangkan garis bawah (underline) link pada tampilan link dasar maupun ketika di-hover, harus ditambahkan
text-decoration: none. Sedangkan untuk warna, sobat bisa pula mengganti value warna di link di tempate sobat dengan mengganti kode di belakang
color: dengan kode warna lain yang diinginkan. Untuk mengetahui kode-kode warna, gunakan
Hex Color Code Chart Generator.
Jika ingin menambahkan aturan link lain yang belum ada di template
sobat, misalnya belum ada a:hover, maka tinggal ditambahkan saja, dengan
catatan urutannya harus seperti ini:
1. a {aturan css text styling}
2. a:hover {aturan css text styling}
3. a:visited {aturan css text styling}
4. a:active {aturan css text styling}
Keempatnya
harus memiliki unrutan seperti itu, jadi tidak boleh terbalik-balik,
kecuali jika salah satunya tidak ada, boleh langsung melompat ke aturan
link lain.
Jika ingin mengubah tampilan link secara individual dan berbeda dari
aturan default link yang mengikuti aturan template, sobat bisa langsung
memasukkan perintah CSS text-style ke dalam link yang ingin diberi
tampilan berbeda (style="....."), misalnya:
<a href="http://buka rahasia.blogspot .com" style="color:#FF9900;text-decoration:blink;font-size:24px">tips-tricks blogger</a>
Maka hasilnya akan seperti ini:
(Note: Penggunaan text decoration
berjenis blink di atas hanyalah untuk contoh, perhatikan benar-benar
penggunaan text decoration seperti ini karena dapat membuat mata lelah
dan sakit. Ga percaya? Silahkan dilihat terus link di atas dalam waktu 2
atau 3 menit. Hehe... Padu padankan warna, ukuran, serta
urgensi/kepentingan penggunaannya sehingga benar-benar pas dan tidak
berlebihan).
Nah, sekarang jika sobat ingin
mengutak-atik tampilan link blog
silahkan dicoba dengan memperhatikan aturan-aturan CSS dan cara di
atas. Yang penting, utak-atik, coba terus, belajar dan belajar! Good
luck!
