Bagian CSS yang memberi aturan pada link ada 4 jenis:
1. a : tampilan dasar suatu link
2. a:hover: tampilan link saat mouse berada di atas link (mouse hovering)
3. a:visited: tampilan link setelah di-click atau saat halaman link tersebut telah dibuka.
4. a:active: tampilan link saat di-click ( saat halaman gres 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, teman 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 teman (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 bab awal, biasanya setelah variable dan setelah body {...}
Contoh aturannya ibarat 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 bab berwarna biru itulah teman mampu memodifikasi tampilan link, baik tampilan awal link (a), saat mouse di-hover di atas link (a:hover), dan saat 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 saat di-hover, harus ditambahkan text-decoration: none. Sedangkan untuk warna, teman mampu pula mengganti value warna di link di tempate teman dengan mengganti aba-aba di belakang color: dengan aba-aba 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 ibarat 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 ibarat itu, jadi tidak boleh terbalik-balik, kecuali bila salah satunya tidak ada, boleh eksklusif melompat ke aturan link lain.
Jika ingin mengubah tampilan link secara individual dan berbeda dari aturan default link yang mengikuti aturan template, teman mampu eksklusif 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 jadinya akan ibarat ini:
(Note: Penggunaan text decoration berjenis blink di atas hanyalah untuk contoh, perhatikan benar-benar penggunaan text decoration ibarat ini alasannya ialah 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 bila teman ingin mengutak-atik tampilan link blog silahkan dicoba dengan memperhatikan aturan-aturan CSS dan cara di atas. Yang penting, utak-atik, coba terus, mencar ilmu dan belajar! Good luck!
mencuri ialah pekerjaan pengecut! © buka-rahasia.blogspot.com
Nah, sekarang bila teman ingin mengutak-atik tampilan link blog silahkan dicoba dengan memperhatikan aturan-aturan CSS dan cara di atas. Yang penting, utak-atik, coba terus, mencar ilmu dan belajar! Good luck!
mencuri ialah pekerjaan pengecut! © buka-rahasia.blogspot.com
Komentar
Posting Komentar