Gelembung Tooltip

Demo :

Blog Nano Yulianto

---

Cara membuatnya

Dari Dashboard >> Design >> Edit HTML.

Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>

div.speechbubbles{
background-color:#EDEDED; /* warna background tooltip*/
color:#000;
font:11px verdana,arial;
border:1px solid black;
position:absolute;
top:0;
z-index:100;
visibility:hidden;
line-height:1.3em;
padding:8px;
width:200px;
border-radius:8px; /*CSS3 border radius*/
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow:0 0 10px #888888; /*CSS3 shadow*/
-moz-box-shadow:0 0 10px #888888;
-webkit-box-shadow:0 0 10px #888888;
}
div.speechbubbles div.speechbubbles-arrow{
border-color: transparent transparent #EDEDED transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
top:-19px;
left:20px;
z-index:101;
_display:none;
}
div.speechbubbles div.speechbubbles-arrow-border{
border-color: transparent transparent black transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
top:-20px;
left:20px;
z-index:101;
_display:none;
}
div.downversion div.speechbubbles-arrow{
border-color: #EDEDED transparent transparent transparent;
top:auto;
bottom:-19px;
}
div.downversion div.speechbubbles-arrow-border{
border-color: black transparent transparent transparent;
top:auto;
bottom:-20px;
}

Langkah kedua > Penempatan URL dan JavaScript
dibawah ]]></b:skin>
........
diatas </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://pagenano.googlecode.com/files/Gelembung%20Tooltip.js"></script>

<script type="text/javascript">
jQuery(function($){
 $('a.addspeech').speechbubble()
})
</script>

URL atau induk JQuery yang berwarna merah jika sudah ada, ganti dengan yang ini !, ini JQuery versi terbaru.

Langkah ketiga > Eksekusi pada Link
didalam tag <a>

<a href="link anda" title="teks yang muncul" class="addspeech">Blog Nano Yulianto</a>

Teks yang berwarna merah adalah eksekusinya !.

---

Credit : Dynamic Drive

Alhamdulillah