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

Cara Membuat Bubble Tooltips Dengan CSS Seri 1


Jalan-jalan menelusuri gemerlapnya dunet (dunia
internet) tidak sia-sia. Buktinya pada hari ini Saya
dapat " berbagi " kepada Anda semua tentang
Cara Membuat Bubble Tooltips Dengan CSS yang
pembuatannya sangat simpel seperti pada umumnya
bila kita menggunakan kode CSS.

Sebelumnya, seperti biasa blog ini selalu meng-
usahakan setiap tutorialnya disertai dengan contohnya.
Tujuannya hanya satu agar tutorial ini benar adanya dan
Anda bisa melihat terlebih dahulu sebelum membuatnya.

Sorot atau arahkanlah cursor Anda pada link-link
yang ada di bawah ini :


Membuat Efek Pintu Geser jQueryCara membuat efek pintu geser ke bawah dengan JQuery


Membuat Tombol Show & HideCara membuat tombol show & hide


Membuat Keterangan Gambar jQueryCara membuat keterangan gambar dengan jQuery


Untuk membuatnya, langkahnya sebagai berikut :


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">
body{font: 14px Arial,sans-serif; background: transparent; color: #333333}
div#container{width: 500px; margin:0 auto}
h1{ color: #F60; margin: 1em 0 0; letter-spacing: -2px; }
p{margin: 0 0 1.7em; }

/*---------- bubble tooltip -----------*/
a.tt{
    position:relative;
    z-index:24;
    color:#3CA3FF;
 font-weight:bold;
    text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
 padding: 15px 0 0 0;
 width:200px;
 color: #993300;
    text-align: center;
 filter: alpha(opacity:90);
 KHTMLOpacity: 0.90;
 MozOpacity: 0.90;
 opacity: 0.90;
}
a.tt:hover span.top{
 display: block;
 padding: 30px 8px 0;
    background: url(https://lh6.googleusercontent.com/-QpwSl7Nf0hg/Ti0E1rcSktI/AAAAAAAABmc/jN3UNI6gpgc/bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
 display: block;
 padding: 0 8px; 
 background: url(https://lh3.googleusercontent.com/-PLhFbVRj1qg/Ti0E16aiTFI/AAAAAAAABmY/2pZn8hYLMB4/bubble_filler.gif) repeat bottom; 
}
a.tt:hover span.bottom{
 display: block;
 padding:3px 8px 10px;
 color: #548912;
    background: url(https://lh6.googleusercontent.com/-QpwSl7Nf0hg/Ti0E1rcSktI/AAAAAAAABmc/jN3UNI6gpgc/bubble.gif) no-repeat bottom;
}
</style>

4.   Penggunakan kode pada linknya, sisipkan
      kode class="tt", class="tooltip", class="top",
      class="middle" dan class="bottom"
      pada setiap link Anda.

Contohnya seperti ini :

<a href="URL Anda di sini" class="tt">Keterangan link<span class="tooltip"><span class="top"></span><span class="middle">Teks tooltipsnya di sini</span><span class="bottom"></span></span></a>

Selamat mencoba, good luck!


1 comments:

Nomor Cantik - www.BannerNomorCantik.com mengatakan...

klo yg auto tooltip ada ga ya gan ? thx u

Posting Komentar