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>
tips-tricks blogger
(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!
0 komentar:
Posting Komentar