MOHON PERHATIAN!!!........ Sehubungan sedang "ERROR"nya situs HTTP://WWW.RIPWAY.COM, maka bila Anda menemukan tutorial yang menggunakan kode dengan nama situs tersebut, sementara waktu JANGANLAH Anda gunakan. Mohon maaf, semoga anda memakluminya.............................

Mengucapkan Selamat Datang, Semoga Dapat Berkenan Di Hati Anda



SYAMSUDINNAMAKU telah hadir

KUNJUNGI CHANNEL YOUTUBE SAYA

Cara Membuat Bubble Tooltips Dengan CSS Seri 2


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 comments:

Posting Komentar