About Me

Animasi Tooltip Balon dengan jQuery

                                             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..

 

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="#">Home<span>START PAGES</span> </a></li>

       <li><a href="#">About<span>WHO I AM</span> </a></li>

       <li><a href="#">Portofolio<span>LOOK AT MY WORK</span> </a></li>

    </ul>

  </div>


 
Copyright© 2011 xDark™ | Template Blogger Designer by : Laronity
Template Name : [+]