Seperti yang saya jelaskan ketika saya posting tentang Tooltips juga disini [baca : Bubble Tooltips]. Tooltips adalah sebuah object yang menandai object lain dengan cara mengeluarkan sebuah tulisan lain yang bisa diartikan deskripsi dari sebuah object. Ini adalah postingan kedua tentang Tooltips Jquery. Yaitu Easy Tooltips. Tooltips kali ini berbeda dengan sebelumnya yaitu mengikuti kearah cursor pindah.
Perhatikan itu, gerakan kursor di Link itu. Rasakan dan Lihatlah apa yang akan terjadi. Rupanya link mengeluarkan kata kata ajaibnya yaitu title="Ini adalah contoh Easy Tooltips Jquery" . Title sebagai deskripsi/tulisan yang keluar dari sebuah link atau object lain. Tapi bagai mana bisa mengeluarkan Deskripsi yang berbeda tampilan itu? Kuncinya ada di bawah ini :
- Buka Akun blogger.com dengan password dan ID tentunya
- Saat di dasboard klik Layout/Design → Edit HTML → Cari kode <head>
- Letakan kode berikut tepat di bawah kode Head :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
Kata bercetak tebal adalah kode Css/tampilan Easy Tooltips ini
<script type="text/javascript" src="https://sites.google.com/site/farixsantips/scripts/vtip.js"></script>
<style type="text/css">
p#vtip { display: none; position: absolute; padding: 10px; left: 5px; font-size: 0.8em; background-color: white; border: 1px solid #a6c9e2; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999 }
p#vtip #vtipArrow { position: absolute; top: -10px; left: 5px }
</style> - Berikutnya tinggal dimana sobat meletakan Object apapun dengan di tambah Class="vtip". Sebagai Contoh :
- Link →
<a href="http:farixsantips.blogspot.com" class="vtip" title="Berikut adalah Blog tutorial">Farixsantips</a>
Tulisan Merah adalah Url Link, Tulisan Biru adalah Class yang harus vtip, sedangkan Tulisan Unggu adalah Deskripsi dari sebuah Object itu. - Gambar →
<img src="URL_GAMBAR" class="vtip" title="Deskripsi dari sebuah gambar"/>
Tulisan Merah adalah Url Gambar, Tulisan Biru adalah Class yang harus vtip, sedangkan Tulisan Unggu adalah Deskripsi dari sebuah Object itu.
- Link →
- Selesai.
Tidak ada komentar
Posting Komentar