Bikin Animasi Tooltip Melayang Keren

Selamat malam sahabat blogger :D Kali ini saya ingin membuat request yang di berikan oleh sobat Adhi, yaitu membuat tooltip. Seperti apa tooltip yang di inginkannya? Silahkan lihat sendiri screen shotnya...

Tooltipnya juga lumayan keren sih...  Jadi saya langsung membuatnya, Sebelum kita lanjut ke bawah saya ingin mengabadikan gambar berikut...

Langsung ikuti langkah-langkah berikut... :)



1. Login Blogger.com

2. Masuk ke Rancangan ~> Edit HTML

3. Cari kode </body>..

4. Pastekan kode berikut tepat di atasnya...

<script src='http://www.alprasite.cc.cc/js/tooltip.js' type='text/javascript'/>

<script type='text/javascript'>

$(&quot;.bonce a[title]&quot;).tooltip({effect: &#39;bouncy&#39;});

$(&quot;.bonce img[title]&quot;).tooltip({effect: &#39;bouncy&#39;});

$(&quot;.download&quot;).tooltip({ effect: &#39;slide&#39;});

$(&quot;.fade img[title], .fade a[title]&quot;).tooltip({offset: [10, 2], effect: &#39;slide&#39;})

.dynamic({ bottom: { direction: &#39;down&#39;, bounce: true }

});

</script>

5. Kemudian Cari kode ]]></b:skin>.

7. Letakan kode berikut tepat di atasnya...

.tooltip{display:none;border: 5px solid #2379d7; background:url(http://i1202.photobucket.com/albums/bb372/alprablog/others/bluegrad.png) top left repeat-x; font-size:12px;width:200px;padding:10px;color:#fff;outline: 1px solid #777;outline-offset:0px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;box-shadow:0px 0px 20px rgba(125,124,250,.9);-moz-box-shadow:0px 0px 20px rgba(125,124,250,.9);-webkit-box-shadow:0px 0px 20px rgba(125,124,250,.9);filter: progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=135, Strength=7);

font:12px Georgia;font-weight:bold;text-shadow:.2em .2em 0.2em #000000;}

8. Simpan template...



Untuk memasang tooltipnya silahkan edit sendiri HTML berikut...



Tooltip untuk link text

<div class="bonce">



<li><a href="http://alprablog.blogspot.com/" target="_blank" title="Alprablog™">Alprablog™</a></li>



</div>

Tooltip untuk link gambar

<div class="bonce">



<a href="http://alprablog.blogspot.com/" target="_blank" title="Alprablog™"><img src="http://i1202.photobucket.com/albums/bb372/alprablog/banner.jpg"/></a>



</div>

Silahkan ganti sendiri text yang berwarna merah dengan url blog Anda dan url gambar Anda.



Sekian Terima kasih



Salam Blogger....

Real Page http://alprablog.blogspot.com/