Sabtu, 06 Agustus 2011

0 Cara Membuat Bubble Tooltips Dengan CSS Seri 2


Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Seperti pada umumnya bila hanya menggunakan
kode CSS, maka pembuatan Bubble Tooltips ini
jadi lebih mudah. Lihatlah screenshots Bubble
Tooltips yang dimaksud dalam tutorial ini.


Cara membuatnya adalah seperti berikut ini :


1.   Pertama masuk ke Edit HTML.

2.   Carilah tag </head>

3.   Letakkan di atas tag </head> ini
      kode css berikut lalu simpan template Anda.


<style type="text/css">

p {
margin: 15px 0;
padding: 5px;
}

p a {
position: relative;
color: #000;
text-decoration: none;
}

a span {
display: none;
}

a:hover {font-size: 100%;} /* IE/Win requires some link change on hover in order to show the tooltips */

a:hover span { /*the span will display just on :hover state*/
display: block;
position: absolute;
opacity:1.0;
z-index:10;
top: 5px;
left: 40px;
width: 220px;
border: 2px solid #f00;
-moz-border-radius: 0px 8px 0px 8px;
background-color: #ffff00;
color: #f00;
padding: 10px;
font-size: 12px;
}

p.test a }

</style>

KETERANGAN :

Anda bisa sesuaikan warna border,
warna background dan warna teksnya
dengan warna yang Anda sukai.

4.   Penggunakan kode pada linknya,
      awali dengan kode <p class="test">
      sebelum link yang Anda miliki.

Contohnya jadi seperti ini :

<p class="test">
<a target="_blank" href="URL link Anda">Judul link<span>Teks kalimat tooltips</span></a></p>

Selamat mencoba, good luck!

0 komentar:

1. Good Girl
2. D'MASIF -sudah perih ini
3. Haney Bunny Sweety-G-String.mp3
4. ARMADA-Mau Dibawa Kemana.mp3
5. Ayang Ayangku.mp3
6. Tak Semestinya Kita Berpisah (TSKB).mp3
7. When The Children Cry - White Lion.mp3
Info

Catatan HUGGENG|CYBER

SELAMAT DATANG DI BLOG SAYA :), MAAF KALO DI BLOG INI ISI DARI KONTEN KURANG MENARIK< TETAPI SAYA AKAN MEMBUAT PARA PENGUNJUNG SENANG DI BLOG INI

Sekilas Tentang Admin

Saya Buakanlah Profesional Pembuat Blog Atau Web, Saya Masih Butuh Belajar, Dari Rekan2 Bloger. INFO:
BLOG ANAK INDONESIA UNTUK ANDA SEMUA

Follow

Follow HUGGENG|CYBER

Nikmati Layanan TV Online Gratis di HUGGENG|CYBER *