Buat Animasi Tooltip (Bouncy) Ver.3

Assalamu Alaikum Wr.Wb.
Pada Kesempatan kali ini saya kembali akan memberikan Trik Mengenai Blogger yaitu Cara 'Buat Animasi Tooltip (Bouncy) Ver.3', dimana pada postingan saya yang lalu pernah juga membahas trik seperti ini antara lain :

1. Buat Tooltip Otomatis Sederhana. dan,
2. Buat Tooltip  Simple Tapi Keren With CSS.

Jadi Ini adalah sebuah Tooltip dengan efek Bouncy, dimana Tooltip dapat ditampilkan dengan bergeser dan memantul saat onmouseover diatas Text atau Link.

Pada prinsipnya tooltip ini diciptakan dengan metode $.tools.tooltip.addEffect, dimana argumen pertama adalah nama efek yang akan digunakan, argumen kedua adalah fungsi yang mendefinisikan bagaimana tooltip akan ditampilkan dan argumen ketiga mendefinisikan bagaimana tooltip akan berakhir.

Baiklah contoh seperti pada tampilan gambar berikut :


Nah bagaimana Apakah Anda Tertarik?? bila ia silahkan sobat ikuti langkah-langkah di bawah ini.

/* Uttooltip V3 Bonce */
.uttooltip{display:none;border:3px solid rgba(200,0,0,0.7);background:rgba(0,0,0,0.6);font-size:13px;max-width:20%;padding:10px;color:#fff;text-align:center;outline:1px solid rgba(255,255,255,0.05);outline-offset:0px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;box-shadow:0px 0px 10px rgba(255,0,0,0.4);-moz-box-shadow:0px 0px 10px rgba(255,0,0,0.4);-webkit-box-shadow:0px 0px 10px rgba(255,0,0,0.4);font-weight:bold;text-shadow:0 -1px 1px #000;}

4. Selanjutnya Masukkan kode javascript berikut diatas </body>

<!-- UTtoltip V3 -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ut2a-4down-blogspot-com.googlecode.com/files/uttooltipbonce.js' type='text/javascript'/>
<script type='text/javascript'>
$(&quot;.akaTipUT a[title]&quot;).uttooltip({effect: &#39;utbouncy&#39;});
$(&quot;.akaTipUT img[title]&quot;).uttooltip({effect: &#39;utbouncy&#39;});
$(&quot;.fade img[title], .fade a[title]&quot;).uttooltip({offset: [10, 2], effect: &#39;slide&#39;})
.dynamic({ bottom: { direction: &#39;down&#39;, utbounce: true }
});
</script>
<!-- End UTtoltip V3 -->

5. Simpan Template.

Keterangan:
- Script jquery (yang berwarna biru muda) jika sudah memasang ditemplate sobat, maka kode diatas tidak perlu dipasang lagi (biar tidak double).

6. Langkah terakhir dengan pemanggilan kode "Tooltip"Nya.

<div id="akaTipUT">
<a href="Link atau URL anda" title="Your Title Here">Text Anda Disini</a>
</div>

7. Gunakan xHTML dalam posting atau bagian lain blog.
8. Selesai deh.

Tambahan ::
- Jadi intinya untuk pemanggilan tooltip ini, kita hanya menambahkan class='akaTipUT'


Please rate this article: