Cara Membuat Title / Tooltip Link Paling keren dengan css

Habis jalan2 diblognya para master2 eh dapat tutorial keren nich dari System Of Blog,  yaitu Title / Tooltip link dengan css keren jg kalau di terapin pada blog kita, ok gak usah dijelasin panjang lebar, mari langsung aja kita ke pokok pembahasan :




1. Simpan kode di bawah ini di atas kode ]]></b:skin>

.linkSysteM a{
text-decoration:none;
text-transform:uppercase;
font-family:'Anton',sans-serif;
color:#00f;
}
.linkSysteM a::after{
content:attr(alt);
display:none;
margin-left:10px;
color:#ccc;
background: rgb(169,3,41);
padding:3px;
-webkit-box-shadow:0 0 5px 1px #000;
-moz-box-shadow:0 0 5px 1px #000;
box-shadow:0 0 5px 1px #000;
width:300px;
position:absolute;
font-family:'Arial',sans-serif;
line-height:1.5;
letter-spacing:1px;
text-transform: lowercase;
font-size:13px;
}
.linkSysteM a:hover::after{
display:inline;
}
.linkSysteM li{
list-style-type:circle;
}

2. Setelah itu klik SIMPAN / SAVE TEMPLATE.
3. Kode penggunaannya.

<div class='linkSysteM'>
<li><a href='Link Anda' alt='Disini Title / Tooltip'>Nama Link<a></li>
</div>

Anda bisa tambahkan kode linknya lebih dari satu contoh seperti ini.

<div class='linkSysteM'>
<li><a href='Link Anda' alt='Disini Title / Tooltip'>Nama Link<a></li>
<li><a href='Link Anda' alt='Disini Title / Tooltip'>Nama Link<a></li>
<li><a href='Link Anda' alt='Disini Title / Tooltip'>Nama Link<a></li>
<li><a href='Link Anda' alt='Disini Title / Tooltip'>Nama Link<a></li>
</div>

Lihat Demo



Selamat mencoba.




source : http://sin1aja.blogspot.com
Anda baru saja membaca artikel yang berkategori Blogger / Desain Blog dengan judul Cara Membuat Title / Tooltip Link Paling keren dengan css . Anda bisa bookmark halaman ini dengan URL http://klikdul.blogspot.com/2012/08/cara-membuat-title-tooltip-link-paling.html . Terima kasih!
Ditulis oleh: ortega -

1 Komentar untuk " Cara Membuat Title / Tooltip Link Paling keren dengan css "