Jumat, 18 Mei 2012

Cara Membuat Bubble Tooltips Dengan CSS


By on 17.05

Blazer Blog, CSS - Kembali lagi dengan postingan Blogger, kali ini saya akan membahas bagaimana cara membuat Bubble Tooltips Dengan CSS pada link, fungsi Bubble Tolltips adalah memberikan sedikit deskripsi atau keterangan pada suatu Link, untuk lebih jelasnya silahkan lihat gambar dibawah ini.


Jadi kesimpulannya yang dimaksud Tooltips itu sebuah deskripsi singkat saat kursor diarahkan pada suatu link.

Cara membuatnya :

1. Login ke blog kamu.
2. Pilih Rancangan.
3. Pilih EDIT HTML.
4. Cari kode ]]></b:skin>
5. Setelah ketemu letakan kode dibawah ini tepat diatas kode nomor 4 berwarna merah tadi.
/*---------- 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(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcrZtXeiI/AAAAAAAACes/f3SeQ8tdw5A/bubble_filler_thumb%5B1%5D.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat bottom;
}
Simpan templatenya.

6. Langkah terakhir untuk mengaktifkan Tooltips pada suatu link cukup gunakan kode dibawah ini.
<a href="URL Link Disni" class="tt">Link Text<span class="tooltip"><span class="top"></span><span class="middle">ToolTips Message</span><span class="bottom"></span></span></a>
Ganti kode yang berwarna merah dengan URL Link.
Ganti kode yang berwarna biru dengan Text yang sesuai dengan URL posting.
Ganti kode yang berwarna ungu dengan Deskripsi Tooltips nya, jadi pada saat disorot oleh mouse maka akan muncul kata-kata yang berwarna ungu.

Apakah anda paham, jika paham silahkan praktekan, jika belum silahkan tanyakan lewat komentar.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

1 komentar:

  1. thanks gan ..
    salam dari http://tembokartikel.blogspot.com

    BalasHapus