Cara Memodifikasi Tampilan Link di Blogger/Blogspot

Tips-tricks Blogger pulang lagi membahas mengenai mengedit tampilan link di template Blogger/Blogspot. Kali ini diupayakan secara lengkap serta esensial agar nanti sobat bisa mengutak-atik bagian tampilan link secara mandiri.

Bagian CSS yang memberi anggaran pada link ada 4 jenis:
1. A : tampilan dasar suatu link
2. A:hover: tampilan link saat mouse berada pada atas link (mouse hovering)
3. A:visited: tampilan link sesudah pada-click atau waktu halaman link tadi sudah dibuka.
 4. A:active: tampilan link ketika pada-click ( ketika page baru belum terbuka secara sempurna)

Sedangkan style text CSS mempunyai beberapa jenis:
1. Color: rona link, valuenya berupa rona hexadesimal, RGB, maupun color name.
2. Text decoration: hiasan dalam link, berupa underline (garis bawah, ini bawaan secara default), none (tanpa hiasan), overline (garis di atas) serta blink (berkedip)
3. Font-size: berukuran teks, umumnya pada pixel (px), em, persen (%), dll.
4. Serta masih banyak lagi jenis text-style yang lainnya, sobat nantinya silahkan memeriksa sendiri cara-cara memodifikasi tampilan teks menggunakan CSS.

Nah, sehabis mengetahui beberapa properti style CSS pada link, buat mengganti tampilan default link dalam blog, silahkan lihat dalam template Blogger/Blogspot sobat (lihat melalui edit HTML), kemudian cari anggaran CSS yg mengatur link, yaitu a, a hover, .... Dan seterusnya.

Clue: aturan CSS terletak di antara serta , aturan link berada pada bagian awal, umumnya setelah variable serta setelah body ...

Contoh aturannya seperti ini (tetapi nir 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 mampu memodifikasi tampilan link, baik tampilan awal link (a), ketika mouse di-hover di atas link (a:hover), serta waktu link sudah di klik/dikunjungi (a:visited). Ingat, tampilan dasar link selalu bergaris bawah, maka buat menghilangkan garis bawah (underline) link dalam tampilan link dasar maupun ketika di-hover, wajib dibubuhi text-decoration: none. Sedangkan untuk warna, sobat bisa pula mengganti value rona pada link di tempate sobat menggunakan mengganti kode di belakang color: dengan kode rona lain yg diinginkan. Untuk mengetahui kode-kode warna, pakai Hex Color Code Chart Generator.

Jika ingin menambahkan anggaran link lain yang belum ada pada template sobat, contohnya belum ada a:hover, maka tinggal ditambahkan saja, menggunakan catatan urutannya wajib misalnya ini:
1. a aturan css text styling}
2. a:hover aturan css text styling}
3. a:visited aturan css text styling}
4. A:active anggaran css text styling
Keempatnya harus mempunyai unrutan misalnya itu, jadi tidak boleh terbalik-kembali, kecuali apabila galat satunya tidak ada, boleh eksklusif melompat ke aturan link lain.

Jika ingin membarui tampilan link secara individual dan tidak sinkron dari anggaran default link yang mengikuti aturan template, sobat bisa langsung memasukkan perintah CSS text-style ke dalam link yang ingin diberi tampilan tidak sinkron (style="....."), contohnya:
style="color:#FF9900;text-decoration:blink;font-size:24px">tips-tricks blogger
Maka hasilnya akan misalnya ini:


(Note: Penggunaan text decoration berjenis blink di atas hanyalah buat model, perhatikan benar-sahih penggunaan text decoration seperti ini karena dapat membuat mata lelah serta sakit. Ga percaya? Silahkan dipandang terus link pada atas pada waktu dua atau 3 mnt. Hehe... Padu padankan rona, ukuran, serta urgensi/kepentingan penggunaannya sehingga benar-benar pas serta tidak berlebihan).
Nah, sekarang jika sobat ingin mengutak-atik tampilan link blog silahkan dicoba menggunakan memperhatikan aturan-aturan CSS serta cara pada atas. Yang penting, utak-atik, coba terus, belajar dan belajar! Good luck!
mencuri merupakan pekerjaan pengecut! © tentang-soal.blogspot.com

Tidak ada komentar untuk "Cara Memodifikasi Tampilan Link di Blogger/Blogspot"