Animasi Tooltip Balon dengan jQuery

Animasi Tooltip Balon dengan jQuery

Hasil dari animasi balon dengan jQuery kali ini kurang lebih akan seperti berikut,contoh nya di blog gw ini,oh eaa. ini kode nya udah gw otak atik jadi,klw misal nya ada salah mohon maaf  yeee..


sebagai contoh cOba kLik gamabar di bawah ini:

• Berhasil bukan...!!!

Untuk membuatnya ikuti langkah-langkah dibawah ini.

1. Login blogger
2. Tata Letak/Layout - Edit HTML
3. Klik pada Expand Template Widget.

 Selanjutnya cari kode ]]></b:skin>, Jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode

/* ---------------BALON http://pandet-pandet.blogspot.com/2011/02/animasi-tooltip-balon-dengan-jquery.html---------------------------------- */#balon { height:25px; top:0; left:0; width: 300px; }#balon li { float:left; position:relative; margin-left:7px; width:auto; display: block;}#balon span {    background:-moz-linear-gradient(left,#000,cyan,#000);    width: 1300px;    height: 160px;    position: absolute;    top: 100px;    left: 150px;    text-align: center;    text-decoration:none;    padding: 3px;    display: none;    line-height:150%;    color:white;    cursor:default;    font-family:Helvetica;    font-size:22px !important;      border: solid 1px cyan;      padding-bottom: 1px;      width: 245px;      height: 95px;      text-shadow: 1px 1px 1px cyan;      border-radius: 18px;     -moz-border-radius: 18px;     -webkit-border-radius: 18px;      padding: 2px;      margin: 2px 2px 1px 2px;      border: 1px solid cyan;      border-radius: 20px;     -moz-border-radius: 20px;     -webkit-border-radius: 20px;      box-shadow: -4px -1px 20px cyan;     -moz-box-shadow: -4px -2px 20px cyan;     -webkit-box-shadow: -4px -2px 20px cyan;
}

Simpan kode di bawah ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
  $(&quot;#balon li&quot;).hover(
    function(){
       $(this).find(&quot;span&quot;).attr({
          &quot;style&quot;: &#39;display:block&#39;
       });
       $(this).find(&quot;span&quot;).animate({opacity: 1, top: &quot;-35px&quot;}, {queue:false, duration:100});
    },
    function(){
       $(this).find(&quot;span&quot;).animate({opacity: 200, top: &quot;-1000px&quot;}, {queue:false, duration:400}, &quot;linear&quot;,
       function(){
         $(this).find(&quot;span&quot;).attr({&quot;style&quot;: &#39;display:none&#39;});
       }
    );
  });
});
</script>

Dan ini kode untuk pemanggilan nya: 

 ۞bisa sobat masukan di edit-thtml/tambah gadged

<div>
<ul id="balon">
<li><a href="#">Edit semAu mu<span>Edit semAu mu</span> </a></li>

</ul></div> 

keterangan:

*warna hijau adaLah Link tujuan

*warna kuning sEbagai judul

*warna Biru sEbagai Animasi balon (teks)