Tooltip Dengan Efek Bouncy | Buku Catatan si Ugi

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.

D E M O

Silahkan letakan cursor pada text, link atau gambar untuk melihat contoh Bouncy Tooltips...




More Detail :
Cara Memasang Bouncy Tooltips

Langkah Pertama :
Tambahkan kode berikut ini ke dalam tag <head> templat anda.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script src="https://sites.google.com/site/archivesiugi/javascr/BouncyTooltip.js">

/***********************************************
* Tooltip Dengan Efek Bouncy (c) Buku Catatan si Ugi (http://caprt3a.blogspot.com)
* This notice MUST stay intact for legal use
* Visit http://caprt3a.blogspot.com/ for this script and more.
***********************************************/

</script>

<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/archivesiugi/javascr/BouncyTooltip.css" />

Langkah Kedua :
Berikut adalah konfigurasi tooltip untuk menentukan bagaimana tooltip dapat ditampilkan dan anda dapat meletakannya diatas kode </body>.

<script type="text/javascript">
$("#jqtips a[title]").tooltip({effect: 'bouncy'});
$("#jqtips img[title]").tooltip({effect: 'bouncy'});
</script>

Langkah Terakhir :
Dibawah ini adalah contoh markup yang dapat anda gunakan untuk menampilkan Bouncy Tooltip pada halaman website anda dan anda dapat memasangnya dalam tag <body> atau dimanapun anda ingin menampilkan Bouncy Tooltip ini pada halaman website anda dengan menambahkan sintak seperti contoh dibawah ini pada setiap link.

<div id="jqtips">
<a href="Link atau URL anda" title="Ini Adalah Isi Tooltip Dengan Efek Bouncy">Text untuk Link yang akan ditampilkan</a>
</div>




8 komentar:

  1. mas saya kesulitan naroh deskripsi tooltipnya.taroh dimana ya....di edit html atau widget?bantu ya...

    ReplyDelete
    Replies
    1. Abang @bedi javas Tooltip ini sebenarnya dapat ditempatkan dimana saja pada blog atau halaman website anda. Begitu pula dengan deskripsi Tooltip, abang bisa menyisipkannya pada setiap link dalam template atau dengan menambahkan widget dan meletakan syntax kedalamnya.
      contoh:
      <div id="jqtips">
      <a href="http://caprt3a.blogspot.com" title="Klik disini! lihat full artikel di Buku Catatan si Ugi.">Kembali Ke Beranda</a>
      </div>
      Ok Abang selamat mencoba dan terimakasih sudah berinteraksi dengan Admin.

      Delete
  2. aduh mksh bgt ats tanggapnnya.nti sy coba lgi.dgn style bru edit agk bingung.klw gagal sy contac lg mas ugi.s-x mksh banget.....

    ReplyDelete
  3. mksh bgt mas ugi.sy dah nyba ada ke gagaln,okay sy coba lg.dgn style edit html yg bru agk bingung.s-x lg mksh,mklum sy bljr otodidak.Style your blog amazing....

    ReplyDelete
  4. mas ugi.sy mau nyoba bullet depan link arsip blog. Ada brpa gambar bullet?tiga ya?sy dah upload ke photobucket.gmn cara pemasangannya?

    ReplyDelete
    Replies
    1. Abang @bedi javas, saya hanya menggunakan sebuah gambar untuk membuat blog archive tersebut, selebihnya menggunakan CSS. Untuk custom Blog Archive, abang bisa lihat tutorialnya disini terimakasih

      Delete
  5. [blockquote style='padding:5px;border:1px solid #f00';]<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/archivesiugi/javascr/BouncyTooltip.css" />[/blockquote]

    yang ini stylesheetnya ya sob,, kalo boleh nanti saya edit ya

    ReplyDelete


Catatan :

Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon







 

Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )

Mohon maaf untuk sementara Anda tidak dapat melihat halaman ini, silahkan kembali lagi setelah Anda menonaktifkan filter yang Anda gunakan. Abaikan