Cara Memodifikasi Tampilan Link di Blogger/Blogspot

modifikasi CSS link
Tips-tricks Blogger kembali lagi membahas wacana mengedit tampilan link di template Blogger/Blogspot. Kali ini diupayakan secara lengkap dan esensial supaya nanti sahabat dapat mengutak-atik bab tampilan link secara mandiri.

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, sahabat 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 sahabat (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 sahabat 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, sahabat mampu pula mengganti value warna di link di tempate sahabat 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 jikalau salah satunya tidak ada, boleh pribadi melompat ke aturan link lain.

Jika ingin mengubah tampilan link secara individual dan berbeda dari aturan default link yang mengikuti aturan template, sahabat mampu pribadi 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 kesudahannya akan ibarat ini:


(Note: Penggunaan text decoration berjenis blink di atas hanyalah untuk contoh, perhatikan benar-benar penggunaan text decoration ibarat ini alasannya yaitu 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 jikalau sahabat ingin mengutak-atik tampilan link blog silahkan dicoba dengan memperhatikan aturan-aturan CSS dan cara di atas. Yang penting, utak-atik, coba terus, berguru dan belajar! Good luck!

mencuri yaitu pekerjaan pengecut! © buka-rahasia.blogspot.com

Subscribe to receive free email updates: