Category : Labels: CSS Tutorial, Desain, Template, Tips Trik
Tutorial ini akan menunjukkan cara membuat block hover link. Dengan link bergaya ini, link anda akan terlihat lebih cantik dari link biasa. Seperti gambar dibawah ini nantinya link anda akan berwujud. Warna kuning background link adalah yang dimaksud Block Hover Link.
Link Block Hover Effect
Cara Membuatnya.
1. Anda akan menyisipkan secara manual kedalam deskripsi link anda dengan tag <em> dan <span> . Dikarenakan IE (Internet Explorer) hanya mendukung elemen :hover untuk link, dan juga karena anchor link harus mempunyai block style. Maka dari itu, kita tambahkan tag <em> dan <span> diantara tag <li>....</li>.
2. Berikut contoh struktur dari kode HTML link.
<div id="linkBox">
<ul>
<li><a href="#">Link Heading One
<em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus.</em>
<span>20th june 2009</span></a></li>
<li><a href="#">Link Heading Two
<em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus.</em>
<span>21th june 2009</span></a></li>
<li><a href="#">Link Heading Three
<em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus.</em>
<span>22th june 2009</span></a></li>
</ul>
</div>
3. Dan berikut CSS kodenya. Copy dan paste kode dibawah ini diatas kode
]]></b:skin> .
#linkBox ul {
list-style-type: none;
width: 400px;
}
#linkBox li {
margin: 5px 0;
border-bottom:1px dotted #ccc;
border-top:1px dotted #ccc;
}
#linkBox li a {
color: #E67701;
display: block;
font: bold 100.1% "Georgia", Times New Roman, Times, serif;
padding: 5px;
text-decoration: none;
line-height:182.5%;
}
* html #linkBox li a { /* make hover effect work in IE */
width: 400px;
}
#linkBox li a:hover {
background: #eeeeee;
}
#linkBox a em {
color: #333;
display: block;
font: normal 82.5% "Georgia", Times New Roman, Times, serif;
line-height: 182.5%;
}
#linkBox a span {
color: #006AFF;
font: normal 82.5% "Georgia", Times New Roman, Times, serif;
line-height: 150%;
}
hade euy...
pusing euy tutorial blog teh naon deui nya...wkwkkwkwkwkw
ngehang tarang nih sob....hauhauhauhauah