Cara Mengubah Model Link yang ada di Blog Sesuai Keinginan Kita Sendiri


Sambil menikmati sorenya hari di teras rumah dengan ditemani teh hangat dan roti kesukaan saya. Sempat terlintas dipikiran saya untuk melanjutkan pembahasan CSS yang ada diblog ini. Kali ini saya ingin membahas "Cara Mengubah Model Link yang ada di Blog Sesuai Keinginan Kita Sendiri". Mana tau, ilmu ini berguna buat teman-teman yang sedang belajar mendesain blog.

Dalam daerah CSS kita dapat mengatur atau mengubah suatu elemen yang ada di template blog tersebut. Termasuk mengatur warna serta bentuk tulisan yang kita inginkan. Mungkin sobat pembaca pernah atau acap kali melihat blog-blog yang mempunyai warna dan bentuk link yang menarik sebelum atau sesaat disentuh. Hal itu dapat juga sobat tiru atau terapkan pada blog sobat. Tidak terlalu sulit untuk melakukan hal demikian. Yang diperlukan hanya pemahaman bahasa CSS saja.

Berikut ini adalah langkah-langkahnya:
Pertama - masuk ke ruang Edit HTML dan cari daerah CSS. (Buat yang belum tau apa itu CSS, silahkan pelajari disini)

Kedua - Cari a:link , a:visited , dan a:hover . Penjelasan: a:link adalah text link sebelum disentuh, a:visited adalah text link setelah diklik, dan a:hover adalah saat digulingkan atau saat link disentuh. Tahap berikutnya adalah memasukkan perintah-perintah untuk mengubah model link yang diinginkan.

a:link { color: #warna yang diinginkan; } begitu juga dengan a:visited dan a:hover. Untuk meberikan sedikit modifikasi yang berbeda bisa sobat berikan perintah font-weight: bold / italic / underline dan diakhiri dengan tanda titik koma (;). Dan kita juga bisa memasukkan perintah lainnya, seperti: memberikan efek shadow (bayangan pada teks link tersebut).

Penjelasan lengkapnya:
a:link { color: #FE2E2E; font-weight: underline;}
a:visited { color: #2A1B0A; font-weight: italic;}
a:hover { color: #FE2E2E; font-weight: bold;}

Ketiga - Lakukan pratinjau untuk mengecek apakah perintah yang kita berikan sudah bekerja atau belum. Jika sudah, silahkan di simpan pekerjaan sobat tadi.

Sumber Gambar: extramoneyanswer.com
No comments :

Show Emoticon

Contact Form

Name

Email *

Message *

Back to top