Animasi Tooltip dengan jQuery

ok selamat malam semua kali ini saya akan memulai posting kembali di blog ini.setelah lama saya vacum kali ini saya akan sedikit berbagi postingan.ok bro langsung aja ya.kali ini saya akan share cara membuat TOOLTIP dengan JQUERY atau link terbang seperti saya ini.ok langsung aja bro.

Untuk membuatnya ikuti langkah-langkah dibawah ini.
   1. Login blogger
   2. Tata Letak/Layout - Edit HTML
   3. Klik pada Expand Template Widget.
   4.  Selanjutnya cari kode ]]></b:skin>
Jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode]]></b:skin>

/* dimash */
    #dimash a {    
           color:#fff;
           text-shadow:0 0 1px #fff;
    }
    #dimash span {
           width: 245px;
           height:auto;
           z-index:60;
           background: -moz-linear-gradient(top, #999, #252525, #999); 
           position:absolute;
           padding: 3px;
           left:35%;
           text-align: center;
           text-decoration:none;
           display: none;
           line-height:90px;
           font-size:30px;
           color:#bbb;
           text-shadow: 1px 1px 2px  #000;
           border:1px solid #111;
           -moz-border-radius:20px;
          -moz-box-shadow: 0px 10px 20px #000
    } 

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

<script src='http://dimash.waphall.com/jquery.min.js'></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
      $("#balon li").hover(
        function(){
           $(this).find("span").attr({
              "style": 'display:block'
           });
           $(this).find("span").animate({opacity:0.9,top: "200px"}, {queue:false, duration:400});
        },
        function(){
           $(this).find("span").animate({opacity:0,top: "-9999px"}, {queue:false, duration:1000}, "linear",
           function(){
             $(this).find("span").attr({"style": 'display:none'});
           }
        );
      });
    });
    </script> 

Dan ini kode untuk pemanggilan nya melalui HTML /  JAVASCRIPT
<ul id="dimash">
    <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> 

Selesai Selamat mencoba sob.............

Animasi Tooltip dengan jQuery 9out of 10 based on 10 ratings. 9 user reviews.