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.
pertamaX
BalasHapusPERTAMAX dolo,, :D :D
BalasHapusjah JQuery lagi... :P
BalasHapusfungsinya hampir sama dengan Alt kan ??
surimm =,=" gagal lagi dah. :(( :((
BalasHapus@Rama : ngimpi ente :D
BalasHapusohiya itu tooltips kyk yg di blog ente ya faris..? :)) :)) keren tuh,, cocok gak ya buat tempe ane, =)) =))
BalasHapusTo Mbah Qopet dan Rama : Selamat Pertamaxnya meski ada yang ngaku ngaku pertamax :P
BalasHapusTo Mbah Qopet : ya emang Jquery :P terserah bro mau make atau gak kan cuman share :)) beda jauh lah alt untuk gambar
To Rama : bukan ini yang biru, kalau yang di blogku warna hitam :|
waaaa... keren nih sob ... :)
BalasHapusAduh Terlambat...
BalasHapushe.he kalo bukan JQ sih udah tak pake...berarti hampir sama donk :P
BalasHapusneh maseh pakek mobile. .
BalasHapusGag kleatan demonya. . Besok kalo dah pakek PC kesini lagi ah . . Kayaknya bagus nih. . :)
*minta kopi dulu boleh gan? . . Hahahahha ;D
wah jadi keren y sob kalo pke ni script.
BalasHapusEmang harus pakai karakter "vtip" ?
BalasHapusKalau lgsg title ngak bsa ya?
Newbie .js :D
hummm .. cuman putih doank ya?? tak kira kayak di gambarnya :>
BalasHapuswawakwakwak,, iya faris ane udah tau kok,, :P :P ntar ane coba ahh kalo gak berat,, =)) =))
BalasHapusTO ALL : MAAF ABIS PULANG SEKOLAH JADI LAMA BANALAS KOMENTAR.
BalasHapusTo Shinobi : memang keren bro
To Gregorio : Hahaha kalau komen ojo spam bro :P
To Mbah Qopet : halah bisa aja sih lu :))
To Bayu : Kopinya silahkan diminum gan nih :)) bisa di edit css juga bro :-/
To Liandri : iya sob keren keren :P
To Aku mau gratisan : yaiyalah!! nanyanya aneh banget sih om :D vtip itu sumber class nya
To Rama : hahahaha teliti sebelum meneliti bro =))
Sangat inofatif sob..!
BalasHapusTapi nambahin berat blog nggak ya..?
Ih keren..kalo ada kayak ginian itu bisa bikin berat blog nggak?
BalasHapusmampir ah.. boleh kan? hehe
BalasHapusTo prapatan kretek dan arr rian : cobain dulu, kalau berat copot lagi :D [kurasa gak berat]
BalasHapusTo Danu Akbar : boleh boleh boleh :))
Tukeran link yuk Sob, link sudah saya pasang di blogroll ane
BalasHapusthanks
ada yg salah kah kata2ku, jangankan judul artikel n isinya bahkan kode2 itu aku perhatikan dann aku ingin nyoba bbagusnya tooltips ini hmmmmm
BalasHapusSimpel tapi keren :D
BalasHapusTips yang menarik sob, link blog terpasang sekalian follow ya sob
BalasHapuswih keren banget sob, sepertinya pas jika diterapkan di blog saya dech...
BalasHapusTo earth : udah succes bro :)
BalasHapusTo anisayu : maksudnya.... yaudah deh :) gak apa apa :) maafi aku ya :( liat postku sebelumnya deh
To musa : hehehe sangat simple :P
To Kerajaan air mata : thanks ro, segera dilaksanakan :)
To Asis Sugianto : diterapkan saja om :)
blog ini juga keren banget sob.
BalasHapuslanjutkan share tutornya,
Bisa mengartikan atau memperjelas objek yang kita tunjuk.Asyik nieh sob tutornya.Makasih yach,happy blogging.
BalasHapussumpeh mas gak ngarti,love,peace and gaul.:((
BalasHapusTo Zona Download Gratis : thanks bangetz ya om :)
BalasHapusTo Er'end : memang asyik nih , bisa di terapkan di blog ente juga :P
To saryadinilan : itu ada contohnya yang berkedap kedip itu
Boleh juga kirain g ada demonya hehehehe
BalasHapuskeren jadinya, ntar dicoba deh, makasih mas udah share :)
BalasHapusTo Zh!nTho : di blog tutor pasti ada demo lah sob :)
BalasHapusToTituitbom : thanks juga udah supportnya :)
mntap ini
BalasHapuslengkap sama previewnya :D
makasih masbro
oke gan , , makasih ya gan kopinya, , :)
BalasHapusoiya seh, , manteb manteb!
boleh juga nih di coba tuh tooltipsnya,,,, so seandainya juga itu bisa di terapkan di judul blog ya,, ups ato emng bisa juga akah
BalasHapusTo Dayz : iya preview selalu ada :D
BalasHapusTo Bayu : kopinya enak kan? kopi luwak :P
To Alkahfi : semua kode html yang di beri sentuhan class="vtip" jadi om
hmmmmbermain dengan CSS n JQUERY emang ga ada abis abisnya yah sob ... butuh keuletan n imajinasi juga hihihih mksh tipsnya ... boleh dicoba ini sekalian menghemat space juga buat postingan klo klo gambarnya butuh penjelasan panjang lebar :)
BalasHapusTo Green KLOPERER : memang tidak ada habisnya jika dikombinasikan dengan script lagi :D silahkan :D
BalasHapusKunjungan malam sambil ngemil sob..... heheh
BalasHapusNice info
wahh asik sob ijin nyoba ilmunya
BalasHapuswah keren sob,,,
BalasHapusane izin nyoba dulu ;;)
To Abdugreen : yayaya.... thanks
BalasHapusTo binkbenk : silahkan dicoba ilmunya :P
To A-NX : silahkan di coba triknya :)
moga bermanfaat bagi banyak orang nih mas.. sukses terus buat mas nya :)
BalasHapusSob, apa tooltip kaya gini bisa jalan untuk seluruh browser? coz pernah coba dengan selain FF kadang ada yang ga jalan.. :(
BalasHapusgagal pertamax.
BalasHapusMastah tooltipnya kok ga jalan ya?dimana yang salahnya saya nih ^_^
To Majalah Masjid Kita : ya om sukses terus :)) thanks ya om
BalasHapusTo SEM : bisa jalan disemuah browser kok, cuman stylenya seperti css3 gak semua sob :D
To BOB : orang bisa kok mas. mungkin ada kode yang ketinggalan kali,
sipp gan.. ane pernah make tool tips yg otomatis.. syangnya setelh beberapa hari dah gk bekerja. n membuat loading blog tersa berat. setelah ane hapus eh trafik tiba2 banjir lagi neh.. mungkin klo pke kode yg ini gak zaw? ea boleh ikutan tukar link gak sob?? di pasang di footer blog ini ky tmen2 juga.. :D?
BalasHapusane bisa ndak minta theme kaya blog ini gan?? bagus banget neh.. soalnya blog ane baru n belum ada theme yg pas
BalasHapustips manfaat sobat. thanks sdh kunjung ya.
BalasHapusTo Tutorial SEO : ohhhh mungkin terlalu banyak kode jquery yang lainnya mungkin :) boleh banget tuh di fooeter :)
BalasHapusTo syaiful khobir : kayaknya blogku khusus saya aja yang make deh bro :) itu theme kerja keras ane dari awal [buta kode css dan html] sampe saat ini sob :) perjuangan mati matian [halah kwkwwk]. jadi mohon maaf ya bro :)
To Drummer : thanks ya bro :) sama sama
tutorial yang keren nih mas bro,,,. btw minta theme dong bro
BalasHapussaya suka desain blockquote.nya..hehe
BalasHapusmantapp boss..
lanjutkan kreasi blognya.
Pena hadir dan absen malam dan langsung dipraktekkan alhamdulillah berhasil...
BalasHapusTerima kasih sob atas tipsnya nih..sukses selalu sob
To Anonim : maaf bro template ane khusus untuk ane aja, tidak untuk mum :)
BalasHapusTo Purbojati : thanks bro hihihi. siap :))
To tautanpena : alhamdullilah berhasil :) sukses juga om :)
Beratin loading ndak sob...blog nya udah keberatan soalnya.Pengin nyoba juga sich
BalasHapuskalau berkunjung ke blog sahabat ini pasti disuguhi tips yang bagus...Makasih
BalasHapusTo cardiacku : untuk semua blog beda beda bro, kalau jquerynya dikit mungkin gak
BalasHapusTo ibnu : hheeheh bisa aja sih mabro :D
Lum ada posting baru nih... :((
BalasHapusTo Aku Mau Gratisan : Sabar lah om, lagi mikir mikir ini bro :D hahaha
BalasHapusnice share gan .... , di tungu artikel menarik lainnya :)
BalasHapusnongkrong dlu aah, sambil nungguin news post nya ... :D
BalasHapuswahh belom update2 nih adminnya,, =)) =)) ditunggu post anyarnya sob,, :)) :))
BalasHapusHahaha..Komentatornya rebutan PERTAMAX ya??
BalasHapusSaya gag begitu js mas, bikin lemot blog.
Hehehe
Tapi makasih ya..
To bhotol : thanks gan jgn komen kentut dong :D
BalasHapusTo Shinobi dan Rama88 : oke siap update deh hari ini :D
To Kopiah putih : tau tuh :| ohh gitu ya yasudah :D
datang kembali dan ucapkan terima kasih telah memajang link sehat kita semua disini.
BalasHapusLink sobat juga sudah terpasang...laporan selesai
to cardiacku : sama sama bro :) terimakasih juga sudah memasang link saya :)
BalasHapusmantep sobb..eieie..agan rama n mbah Qopet ane donk yang pertamaxxx.....dari bawah tapi hihihihi...=))
BalasHapusTo binkbenk : hahahahah ayo mas rebut dari mereka :D
BalasHapusthat's relly nice post :)..
BalasHapustahnk you..
Ia sob ane dah ilangin verifikasi chaptanya?? coba lagi sob kalau susah juga kasih tau ane lagi ;) Terima kasih dah bagi saran :)
BalasHapusTo socafahreza's blog : thanks back :))
BalasHapusTo Deganshah Putra : wahhhh iya tuh sob ane dah komeng dah gak ada chaptanya :D terimakasih juga untuk responsifnya :)
top tricknya thx kawan ;)
BalasHapusbisa buat belajar nih ... aku jadikan inspirasi yach ...
BalasHapusmakasih buanyaaakkk ....
DEMONYA GAN ?
BalasHapusTo Admin - Ari Software : thanks juga untuk kunjungannya :)
BalasHapusTo Dhafian : hehehhee alhamdullilah jika bisa di jadikan inspirasi :)
To Syndicate OS : itu ada kok demonya, "LINK TOOLTIP"
wah di link ama gambar dapat di beri tool tip ya? ini yang gw cari. blognya bagus.
BalasHapusTo iya gan bisa gan dua duanya :) makasih banyak ya pujiannya :) aduhh senyum sendiri
BalasHapusPena hadir dan absen sore sobat...
BalasHapusSetelah berganti template pena mencari tips yang dulu pernah pena gunakan yaitu mengenai ini sobat...
To tautanpena : wah mntap ya sepertinya sobat templatenya :) selamat ya
BalasHapusTerima kasih atas infonya, nanti akan saya tambahkan juga ke dalam blospot saya
BalasHapusBagus-bagus semua tutorial di blog ini! NICE..
BalasHapus