- Efek Hover pada Tooltips
- Muncul untuk semua link yang diberi Tag [title]
DEMO PAGES [click here!]
Sudah liat kehebatan dari Special Jquery Tooltips itu? Yuk dilihat bagaimana cara membuat.
- Buka Blogger.com
- Saat Disahsboard Klik Layout → Edit HTML
- Copy code berikut tepat bawah kode <head>
- Kemudian letakan kode berikut diatas kode ]]></b:skin>
- Kemudian Save Template!
- Tooltips akan muncul ketika sobat meletakan kode title="deskripsi". Contoh
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://css-tricks.com/examples/CSS3Tooltips/js/tooltips.js"></script>
<script> $(function() { $("body a, span, p, div[title]").tooltips(); }); </script>
.tooltip { pointer-events: none; opacity: 0; display: inline-block; position: absolute; padding: 6px 12px; color: white; border-radius: 7px; margin-top: 20px; text-align: center; font-size:14px; font-family:Comic Sans ms; box-shadow: 0 0 3px black; } .tooltip, .arrow:after { background: black; border: 2px solid white; } .arrow { width: 70px; height: 16px; overflow: hidden; position: absolute; left: 50%; margin-left: -35px; bottom: -16px; } .arrow:after { content: ""; position: absolute; left: 20px; top: -20px; width: 25px; height: 25px; -webkit-box-shadow: 6px 5px 9px -9px black,5px 6px 9px -9px black; -moz-box-shadow: 6px 5px 9px -9px black,5px 6px 9px -9px black; box-shadow: 6px 5px 9px -9px black,5px 6px 9px -9px black; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .tooltip.active { opacity: 1; margin-top: 5px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; } .tooltip.out { opacity: 0; margin-left: 100px; }
<a href="URL" title="deskripsi">TEXT</a>
<div title="deskripsi">TEXT</div>
<span title="deskripsi">TEXT</span>
dan lain lain
Akhir Dapat Pertamax ga ya?
BalasHapusTutorial mantebs Master.Izin Oprek-oprek dulu ya.
Kembali lagi, akhir maksudnya akhir Pekan.Master kapan ngadain Kontes Lagi ^_^
BalasHapuswah.......mntab neh........
BalasHapusizin nyoba gan
wahhh.....Lumayan Keduaxxx....
BalasHapusmanstabb....tetor yang scrollbar webkitnye dah suksess ane coba di blog ane, thanks...
skrg tinggal yang ini di coba dulu lagi nih...
ke Tkp dulu ahh....
Nice 4 share....
kaya punya ente yang kemaren ya sob,...??
BalasHapusTo Bisnis Online Blog : selamat ya sob pertamaxnya :)) =)) silahkan di oprek oprek :))
BalasHapusTo IT-Soft Center : hehehe silahkan di cobain sob jika mau :)
To Zaenal Blog : oke gan hehehehe selamat mencicipi tutorial yang ini ya gan :)
To BLOGCUNAYZ : bukan gan beda lagi. yang dulu kan postingan lama itu.
BalasHapusTo Bisnis Online Blog : ojo panggil master lah kita kan sama sama belajar :) ada deh sob kapan kapan nanti ulang tahun ane :)
wah bolh juga nih buat di coba2 thanks sob
BalasHapuswawwwww, , sumpah! keren mas!!
BalasHapusTo Zh!nTho : hehehe iya sob boleh banget :) silahkan dicoba :)
BalasHapusajib2,, keren tooltips nya =)) izin kenyott kk faris,, emah, emah,, :-* :-* wakwakwak =))
BalasHapusKeren mas lanjutkan kreasinya
BalasHapusruaarrbiasa..demo-nya saja keren abis sobat :-)
BalasHapuslagi2 sangat cool sob cssnya...
BalasHapusMantaf faris.. Pokokde tak jajal terus dah hehee..
Thanks sob..
To Rama88 : silahkan disedot gan kodenya huahaha :)) =)) oke dewh dek rama.
BalasHapusTo Yudi Glanter : oke mas dilanjutkan kapan kapan aje :)) =))
To BlogS of Hariyanto : hehehe kalau berkenan di cobain aja sob di blog :) hihihi
BalasHapusKomentar ini telah dihapus oleh administrator blog.
BalasHapusmantep bener sob tipsnya.nanti tak cobain ya..
BalasHapuskeren sakali ni trik ane jadi kagum sangat
BalasHapusTo V-MediaKom : makasih banget ya gan support komentarnya :) silahkan di jajal :))
BalasHapusTo Ageboy : hehehe makasih banyak ya sob komentarnya dan juga supportnya :)
BalasHapusTo Admin-Wahid Sahidu : hehehe ane juga kepingin pakai ini gan :)
Wahh,, Nice Share n Nice Tipss
BalasHapusPraktek langsung
To Mharjipes : makasih ya gan :) silahkan di praktekan :)
BalasHapus=)) ane terakhir lagi :D Hemmm... :D
BalasHapusJquery ya Sob.. :D manteb nih Mainnya Script2 ginian terus :D
Sukses deh blognya :D
N tutornya menarik mulu :D
Nice :D
wew...mantap mas..
BalasHapusitu asli css semua ya mas..
tampa pake gambar satu pun...
mmm...pasti rumit bgt bini nya...
Di coba ah..heheheh.:D
God Job :D brother :>
BalasHapuswah, ketinggalan.. tak coba ah..
BalasHapusbolak balik dari rumah dateng kesini izin belajar lagi om.hehee
BalasHapussoalnya klo copaz trus nggak ngerti2 nanti fungsi codingnya.=))
To Aku mau Gratisan : hahahha banyak banget gan emoticonnya huahahhaa :D iya deh sob kapan kapan ane gak mainan script dlu :) refreshing :))
BalasHapusTo Andre Pandet Rank Khoerai : ente kirain gambar ya sob :D efek after dan before sob biasa :D silahkan di coba :)
To Domain gratis [dot] IN : thanks bro hehehe makasih ya kunjungannya :)
Mantapp,, bro ngejreng efek jquerynya. blog aku belum jadi mass.. jadi gak ada identitas. ntar ya kalau udah ada bloknya ;;) :>
BalasHapusTo awelqq : silahkan di coba sob :)
BalasHapusTo Ageboy : hehehe iya sob itulah kelemahan dari kopas kopasan sob :) heheheh :))
To Anonim : oalah gitu ya sob, ane tunggu deh blog ente yang bagus itu :)
BalasHapusoh gitu toh,nice2 lanjutkan sob :))
BalasHapusTo BLOGCUNAYZ : hehehe iya sob kalau yang ini beda lagi sob :D special nih buat ente :)) =))
BalasHapusdapat yang baru lagi tiap main ke blog ini...nice post sob ;D
BalasHapushahaha..bener sob,.
BalasHapusdan sangat kebetulan sekali tugas kul saya disuruh nghafalin coding..tambah mantap mumetnya.hahaa
wah ane jadi tambah ilmu lg nih, lumayan ribet juga ya baca kodenya (˘ڡ˘)
BalasHapusTo Ageboy : waawww kuliah jurusan apa sob sampe hafalin kodingan :D IT ya? :D mantap!
BalasHapusTo Herry : hehehe alhamdulillah ya gan sesuatu banget :) hehehe iya gan :))
berhasil gan.. :D
BalasHapusTo awelqq : waw berhasil ya gan :d selamat deh sob :)) huahahhaa
BalasHapusbruakkakaka,, dek rama,, =)) =)) ngakak we ahh,, =))
BalasHapusdulu pernah posting kayak gini kan gan? ternyatas simpel ya kodenya. ok kapan2 saya coba di blog ane. nice info
BalasHapusTo Rama88 : makanya jgn sok sokan manggil gua kakak huahaha tau rasa kau :)) =))
BalasHapusTo sejuta trik blogger : iya gan dulu pernah gan :) tetapi beda jauh gan sama sekarang :)
Tooltips sama title fungsinya sama aja kan sob?
BalasHapusoya ada artikel tentang Navigasi Breadcrumb dan menambahkan title pada semua judula artikel?
kl belum ada ane request ya sob. ;)
To Liandri Eko : tooltips untuk lebih erlihat hidup dan keren sob. Ane sudah posting sob tentang menambah title pada semua judul DISINI
BalasHapus(y) kasih 2 jempol (y)
BalasHapusSeperti biasanya..tooltips nya keren sob...
BalasHapusJempol buat sobat faris dech
Dengan Tooltips Special ini pembaca serasa disapa,ini bagus sob untuk lebih mengakrabkan kita.Ane praktek dulu kawan,makasih ya,happy blogging aja.
BalasHapusTo awelqq : heheheh disini gak ada emo jempol sob disini :D huhahaha
BalasHapusTo cardiacku : hehehe makasih ya gan supportnya :) thanks kunjungannya :)
Kunjungan malam sahabat..sepertinya blognya makin rame sahabat dan juga tipsnya bagus-bagus sahabat
BalasHapusbtw ane pengen banget pasang Tooltips kaya gitu , tapi jadi tambah berati blog ane :(
BalasHapushahahahaaha ente ditipu sma bang Andre Ris =)) udah jago dia begituan :D
BalasHapussambut pagi hari yang indah dirumah sahabat
BalasHapusKeren nih tutornya sob,, ijin coba dulu,,
BalasHapusThank's sob ,,btw saya temukan tutorial ini dari artistutorial.blogspot.com lengkap disana
BalasHapusgan fariz, maaf baru sempet bales kunjungan karena terkendala aktifitas outdoor..
BalasHapusaye, gan. udah ada beberapa artikel baru di rumah saya, hehehe..
monggo, silahkan kalo berkenan boleh berkomen disana..
thanks ya gan.
walopun saya ga mudeng sama penjelasan agan faris di atas, tapi silaturahminya tetep jalan gan..
ok..
hv a great day gan..
salam sinergi.. heheheh :)
mejeng2 lagi ahh dimari,, wakwakwak =))
BalasHapushahay special ya sob :Love lah wkwkwk
BalasHapusjquery bikin motion makin mesra,
BalasHapus=))
makasih sharenya :D
To Ibnu Siswuyo : alhamdulillah sobat datang nih :D sekian lamanya vakum ya? :))
BalasHapusTo Mukhammad : thanks ya kunjungan dah follow nya :) segera di follback :)
To Mbah Qopet : hehehehe ane gak tau deh sobb soal berat atau gaknya :)
To Mbah Qopet : hehehe ae juga udah tau kalau dia itu jago sob :)) cuman iseng aja :)
BalasHapusTo Admin-Wahid Sahidu : selamat datang di wilayah terlarangku pagi tadi :)
To AYROY ZONE : hehehehe oke sob silahkan di coba :)
To Dangstars : ohhh gitu ya sob :) selamat deh sob penemuannya :))
BalasHapusTo Outbound Malang : hehehe oke gan gak apa apa kerjain dulu dunia offlinenya baru dumay :) masa sih gak mudeng. jgn di gak mudeng gak mudengin. ntar beneran gak ngerti selamanya lho :D
To Rama88 : silahkan di pejeng pejengin dulu sob :))
To BLOGCUNAYZ : iya sob special banget untuk sobat :Love
BalasHapusTo Paypal VS Ayu Ting Ting : hehehe iya sob =)) makasih ya komentarnya
saing hari disini lagi semoga mas farixsan senang
BalasHapusTo Wahid Sahidu : hehehehe makasih sudah datang, alhamdulillah ane senang :)
BalasHapusSaya masih belajar yang namanya jquery
BalasHapusCoba dulu ya gan, kayaknya menarik ni..
BalasHapusKomentar saya ini KEBERAPAXXX ya?
Hehehe..
xixixi...
BalasHapusahhahaha, emang dasar ga mudeng aja kali saya nya..
panggil ane nolimit ajah gan..
nama dumay itu..
hhohoho..
#ngekngok :D
Demonya cakep :) He..he.. :D
BalasHapusIni kesannya auto ya Sob..Setiap link ber-tag akan keluar tooltip-nya. Beda dengan yang pake css biasa seperti yang pernah gue praktekkin..ini lebih kompleks...Nice share Sob
BalasHapusTo Aryo Seno : saya juga masih belajar kok sob
BalasHapusTo Kopiah Putih : silakhan di cobain sob. gak tau dah sob :))
To Outbound Malang : gitu kah? :) oke deh nolimit oke dah :)) =))
To Aku mau Gratisan : hehhee iya gan :) namanya juga DEMO hahaha :))
BalasHapusTo Iskaruji dot com : iya sob namanya juga special hehehe. ada yang css nya ya :) mantap deh
To Berbagi Ilmu Pengetahuan : makasih ya sob supportnya :) ane udah dapat PR sob :))
gak ada emo jempol gpp, hayalin aja jadi jempol (y) :-*
BalasHapusTo Raihan Mar'ie Ramadhan : hehehe benar sekali itu sob, terasa lebih hidup :) silahkan :)
BalasHapusTo Bayu Rifai : hehehe sebenernya sudah lama sob tetapi baru ini saja updatenya :)
To Bayu Aldi Yansyah : wwwwww. menurut ane juga seperti itu :) makasih ya komentarnya
KOMENTAR KALIAN BERTIGA MASUK DAFTAR SPAM!! ane publish lagi aja
To awelqq : ntar ane tambahin kok emoticon jempol di blog :)
BalasHapusjquery ya hmm.. saya jarang sih pake-2 ginian. btw sip lah tutorial nya :)
BalasHapusmakin lama makin keren nih tipsnya.. hihi
BalasHapusmantap sob :D
To Dhani : iya sob Jquery :) hehehe di cobain aja sob :)
BalasHapusTo Seandainya saya menjadi Anggota DPD RI : makasih ya sob supportnya hehehe makasih juga kunjungannya :D
malu ane nyebutin jurusannya sob,,coding aja belum hafal.hahaaa
BalasHapusnnti klo udah hafal codingnya tak kasih tau dah.wkkw:)
To Ageboy : jgn jaim dulu om :) buka bukaan saja kan gak apa apa ;;)
BalasHapushadir.,
BalasHapusjgn lupa mampir yahh.
baca baca postingan sobat lagi ah :D
BalasHapusTo Candra : makasih ya kehadirannya :)
BalasHapusTo Deganshah Putra : silahkan di baca baca sob :) makasih ya kunjungannya
dateng lagi ni sob, semoga kau bahagia
BalasHapuskunjungan perdana gan....
BalasHapusditunggu kunjungan baliknya...
To Yudi Jounk : selamat datang kembali son hehehe :)
BalasHapusTo IsalBlog.com : makasih sob kunjnugan perdananya :)
ikut nyimak aja dah..... gak ngerti ai....
BalasHapusTo obinhut : khusus pengguna PC sepertinya yang bisa melihat sob :) hehehe
BalasHapusselalu tutorial yang bermanfaat bagi saya.. nice share sob :)
BalasHapuswih..sangat bermanfaat mas farix...
BalasHapusselalu saja postingannya baru saya tahu..nice info + pengetahuan nih gan...
BalasHapusdari pd nggak pernah pertamaxx saya yang Terakhirxxx ajah lah..hehehe..
komen ane gga d jawab :( :D :D :D
BalasHapuspermisi mas faris nyari keong :D
yeeeeeey, :D udah ada (y) ... wkwkwkwk =))
BalasHapushadir malam mas farixsan heheheh da betul to namanya
BalasHapusmikum2 ada orang gak ya??
BalasHapusdah tidur kali ya :))
yaudah good night masbro =)) =))
buka-bukaan malu diliat orang ntar omm.wkwkkw
BalasHapussetiap hadir disini selalu tempalte backgroundnya berubah terus ya,,,dan selalu keren,,,
BalasHapuscantik nian mau belajar dikit-dikit juga mas, saya
BalasHapushadir lagi sob, selamat pagi
BalasHapusKembali lagu dulu ah bang faris, mau nganter undangan nih buat zakat.
BalasHapusmantab sob animasinya,,,
BalasHapusgk berat juga,,,,
makasih eaaa
mantap sob, tampilannya juga begitu segar... happy blogging.
BalasHapuswah. ini yang saya cari sobat, ini bisa saya gunakan pada link download saya untuk memberikan informasi berapa jumalah file size yg akan di-download, saya pelajari dulu yach sobat...
BalasHapusahhaha, sipp de gan..
BalasHapusmonggo kalo mau kesini yuk dimari..
xixixi :)
ane diskon dah..
ahhahaha X)
To Jobkolom : kebetulan aja sob ini :) makasih banyak ya sob komentarnya :)
BalasHapusTo BELAJAR SEGALA TRIK : thanks ya supportnya :) alhamdulillah kalau bermanfaat :)
To Arif-Bloggers : heheheh alhamdulillah kalau nambah ilmu :) gak ada yang terakhir sob :)
To Bayu Aldi Yansyah : cek dulu sebelum komen 8-} jgn asal komen tanpa bukti sob :)) =)) udah ane bales juga
To awelqq : huahahaha iya sob lagi mau nambah yang lainnya :)) :bad dan (y)
BalasHapusTo BLOGCUNAYZ : wahhh walikum sob :)) ane ngantuk!
To Ageboy : huahahaha iya juga sih sob. :)) kecuali orang yang urat malunya terpotong :)) =))
To al kahfi : hhehehe makasih banyak ya sob pujiannya :) makasih supportnya
BalasHapusTo smp3lembang : pelajari saja sob lebih lanjut :)
To Bisnis Online Blog : "lagu" ada juga "lagi" huahahaha =)) oke deh :)
To >>> Ichwan HAUSGAME : makasih ya kehadirannya :)
BalasHapusTo Windows 7 Blog : iya sob gak terlalu berat :)
To Said Arsyad : segar bagaikan melihat apa itu sob =))
To Asis Sugianto : wahhh bagus banget tuh sob kalau di kombinasi dengan link download. pasti keren :) selamat mencoba
BalasHapusTo Outbound Malang : diskon berapa persen om? 100% okelah huahahaha =)) canda
Ini yang saya cari,... thank sob, nanti malam saya coba ,,,
BalasHapuswah keren ne gan
BalasHapuskalo di wordpress bisa gak gan???
BalasHapushmmmm ,, . iya tuh baru ane cari di rombongan banyak padahal kan ane komennya di atas, , piss deh mas :*
BalasHapus:D
keren sob :D
BalasHapusTo Sakahayang Kang Asep : hehehe alhamdulillah ya sob ketemu juga :)
BalasHapusTo Bangjal Dua Tiga : makasih gan suport dan kunjungannya :)
To DODE : ane gak tau sob kalau wordpress :)
custom post nya mana,, =))
BalasHapusTo Rama88 : nanti :))
BalasHapusnice post gan,,oya kalo boleh saya mau tukeran link,,ini link saya
BalasHapushttp//blog.umy.ac.id/ghea
kalo sudah terpasang kabarin yah,,terima kasih.. :D
ow begitu ya sob, oya kalau yang Navigasi Breadcrumb ada gak?
BalasHapusmantap gan tooltips nya,, bisa dicoba nih. (y)
BalasHapusTo ghea : pasang dulu linkku baru ane pasang link mu :)
BalasHapusTo Liandri : navigasi breadcrumb? ane blm posting gan
To Resolusi Juara 2012 : iya sob memang mantap :) silahkan di coba :)
hehehe keren juga sob, kalau ada tema yang unik. tips ini boleh di coba.
BalasHapusfarixsan tps memang mantab lagi hahahahaha
happy blogging
To Wisata Murah : hehehe iya sob di coba saja sob :)
BalasHapusaduhh makasih ya gan supportnya :)
kweren sob..klo ane test deh sob
BalasHapuskeren banget gan (y)
BalasHapusnumpang tanya, supaya tooltip nya berada di tengah gimana ya gan ?
BalasHapusTo binkbenk : maksudnya sob? gak ngerti
BalasHapusTo 4JIE BLOG : untuk pa sob di letakannya di tengah :) hehe kalau di letakan di tengah beda lagi sob cssnya
iya, kalau dikiri malah gak nampak tooltipnya...
BalasHapuskalau dibuat ketengah, CSS apa yang harus di edit ?
To 4JIE BLOG : kalau untuk ketengahin sepertinya sulit sob. tetapi untuk membuat jarak dari kiri tambahkan saja menjadi .tooltip {margin-left:20px; .....
BalasHapusoke deh, saya coba dulu ya gan :D
BalasHapuskapan2 aq coba ya sob insya Allah..., mantap ni :), thx ilmux gan...,
BalasHapusTo 4JIE BLOG : silahkan di coba cibi sob kalau begitu :)
BalasHapusTo Rohis Facebook : oke gan kapan kapan di cobain :) hehehe
dicoba ya gan, untuk jquery.min.js itu yang terbaru ya gan
BalasHapusTo Belajar Komputer : enggak gan :) masih ada lagi yang terbarunya :)
BalasHapuswah keren banget jquerynya bang...
BalasHapussalam blogger
To campor bawor : iya jquery memang keren bang :) saalam blogger juga :)
BalasHapusnumpang crot dulu gan
BalasHapuswkwkw ngapain gan pake crot segala
Hapuskeren ni sob, thanks ya..
BalasHapusmaksih banyak infonya....
BalasHapusTutorial tooltips nya bagus bro, saya coba ya..THANKS! :)
BalasHapusNice gan desain artikelnya. . update terus ya informasinya
BalasHapussalam sehat
Artikelnya mantap gan. . update terus ya
BalasHapusthank agan to share information
BalasHapuspengobatan tradisional radang pankreas
Cara menghilangkan ganglion
BalasHapusobat katup air mani bocor
cara menipiskan dinding rahim yang tebal
obat pengecil dan pengencang payudara
obat pengering luka pasca operasi
Special Jquery Tooltips
BalasHapus