Lompat ke konten Lompat ke sidebar Lompat ke footer

cara mempercantik link dengan css


vbphotoshop.blogspot.com
vbphotoshop.blogspot.com
Assalamu'alaikum Wr Wb.
cara mempercantik link dengan css. Alhamdulillah, setelah sekian lama. Akhirnya bisa bikin postingan baru lagi nih sob. Dan masih di blog saya vbphotoshop.blogspot.com. Kali ini saya akan membagikan tutorial tentang web. Tutorial ini temasuk sangat penting dan harus di kuasai supaya bisa membentuk sebuah website yang enak dipandang. :).. Di kesempatan kali ini saya akan membagikan tutorial cara mempercantik link yang ada pada website kita, yang Biasanya link default hanya berwarna biru dan bergaris bawah. Oke deh, langsung aja

Buat atau buka script link yang sudah ada pada script editor, seperti notepad dan lain lain. Tapi kali ini saya akan mencotohkan untuk membuat linknya.


1. Buka text editor kesukaan kamu.
2. Ketikan atau copas script ini.


<html>

<head>

      <title>Mempercantik link</title>

</head> 

<body>

      <p><a href="#">Ini adalah link</a></p>

</body>

</html>

3. Nah sekarang udah jadi linknya. Tapi masih berbentuk default. Supaya lebih enak dipandang, tambahkan kode css berikut diantara tag <head> dan </head>


<head>

<title>Mempercantik link</title>

<style type="text/css">

a{

color:red; 

text-decoration:none; 

}

</style>

</head> 

Catatan : color untuk menentukan warna link dan text-decotration untuk menghilangkan garis bawah.

Sekarang link sudah tidak terlalu kaku, tapi masih ada yang sedikit kurang.

4. Memberikan effect pada link saat dihampiri cursor mouse. tambahkan lagi kode berikut.


<head>

<title>Mempercantik link</title>

<style type="text/css">

a{

color:red; 

text-decoration:none;}



a:hover{

color:red;

background-color:black;

} 

</style>

</head> 

Nah, sekarang link sudah menjadi lebih ajib. Ini adalah hasilnya


Oke, mungkin cuma itu tutorial dari saya kali ini. Kalo ada yang tidak dimengerti silahkan ditanyakan.

Posting Komentar untuk "cara mempercantik link dengan css"