All About Anime, Template, And Tricks

BUAT ANIMASI TOOLTIP (BOUNCY) VER.3

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.





    Cara membuatnya :
  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Simpan kode berikut diatasnya :

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

-Pemanggilan Kode (xHTML) :

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


Semoga bermanfaat.


Penulis: Unknown

Artikel BUAT ANIMASI TOOLTIP (BOUNCY) VER.3, diterbitkan oleh Unknown pada hari Rabu, 24 April 2013. Semoga artikel ini dapat menambah wawasan Anda. Unknown adalah Seorang Manusia yang selalu ingin menjadi lebih baik ,Karena Bila Anda berpikir Anda bisa,maka Anda benar. Bila Anda berpikir Anda tidak bisa, Anda pun benar… karena itu ketika seseorang berpikir tidak bisa, maka sesungguhnya dia telah membuang kesempatan untuk menjadi bisa

Posting Komentar - Back to Content

WARNING !
Berkomentarlah yang sopan oke, Tidak boleh mengandung Unsur
1. Penghinaan / Pelecahan
2. Berkomentarlah Yang sesuai dengan postingan
3. Spamming ( Spam comment )

Sekian Dari Admin Semoga Artikelnya membantu anda

 
Terima Kasih Atas Kunjungan Anda. Gunakan Google Chrome Atau Mozila Fire Fox Terbaru Untuk Melihat Tampilan Sempurna Blog Ini