Assalamualaikum wr.wb
oke,,,, kali ini saya akan sedikait menjelaskan bagaimana Mengubah tampilan link pada blog anda,,, nah,,,
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;}
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 underline 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 Generatorj
ika 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}
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>
(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 yang ingin mengutak atik link di blog silahkan dicoba dengan memperhatikan aturan-aturan CSS dan cara di atas. Yang penting, utak-atik, coba terus, belajar dan belajar!
Semoga Berhasil
Nah, sekarang jika sobat yang ingin mengutak atik link di blog silahkan dicoba dengan memperhatikan aturan-aturan CSS dan cara di atas. Yang penting, utak-atik, coba terus, belajar dan belajar!
Semoga Berhasil
langsung mencoba. terima kasih infonya terus berkarya
ReplyDeletesama sama,,
ReplyDeletesilahkan dicoba