

Penerapan trik ini pake CSS, dan ini dia codenya:
/*---------- balon tips -----------*/
a.bt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.bt span{ display: none; }
/*background:; ie hack, harus mengubah sesuatu untuk menampilkan di IE*/
a.bt:hover{ z-index:25; color: #aaaaff; background:;}
a.bt:hover span.balontips{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.bt:hover span.atas{
display: block;
padding: 30px 8px 0;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif)
no-repeat top;
}
a.bt:hover span.tengah{
display: block;
padding: 0 8px;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcrZtXeiI/AAAAAAAACes/f3SeQ8tdw5A/bubble_filler_thumb%5B1%5D.gif)
repeat bottom;
}
a.bt:hover span.bawah{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif)
no-repeat bottom;
}
/*---------- balon tips END-----------*/
Untuk penggunaannya:
1. Link yang udah dibuat di kasih deklarasi class="bt".
Link dalam code HTML bentuknya seperti ini <a href="http://dindingcoret.com"></a> Setelah diberi deklarasi akan jadi seperti ini : <a class="bt" href="http://dindingcoret.com"></a>
2. Deklarasikan balontips. Panggil code balontips dengan menuliskan <span="balontips"></span>. Masukkan diantara code link.
3. Panggil gambar atas dengan cara ketik <span="atas"></span>. Masukkan diantara kode "balontips".
4. Panggil gambar tengah dengan cara ketik <span="tengah"></span>. Masukkan diantara kode "balontips" dibawah code "atas". Ditempat inilah sobat menuliskan komentar sobat.
5. Panggil gambar bawah dengan cara ketik <span="bawah"></span>. Masukkan diantara kode "balontips" dibawah code "tengah".
Contoh penulisan code bisa dilihat disini:
<a class="bt" href="URL
SOBAT">
kata-kata terserah deh..
<span class="balontips">
<span class="atas">
</span>
<span class="tengah">
Tempat sobat tulis info tentang link dan akan keluar sebagai bentuk balon
</span>
<span class="bawah">
</span>
</span>
</a>
makasih kang oom,,Membuat "Bubble Tool Tips" 100% menggunakan CSS sangat bermanfaat buat saya,,insya allah saya terapkan
BalasHapusTrim's atas infonya..
BalasHapussepertinya ringan nih... kalau pakai javascript bisa membuat blog jadi gendut...hehe
BalasHapusterima kasih o-om... langsung praktek ahh
lebih ringan lebih ga males lagi dech brosing hehehehe :p makasih... :d
BalasHapusmanfaat banget om di coba deh
BalasHapusmoel css nih om yang Rizky suka
BalasHapuswaw.... langsung sedot ilmunya, dan ijn tkp kang
BalasHapuswah aku agak bingung neehh, tak coba2 terus deh, makaishhhh :D
BalasHapuswah,,jadi menambah ilmu saya nih saya suka otak-atik
BalasHapusmakasih dah share kang, saya coba tips nya dulu
BalasHapusIni yang selama ini saya cari! Trims telah berbagi!
BalasHapuswaw, ribet banget sih...
BalasHapuscoba deh pakai ini... gampang bgt..
http://maribinablog.blogspot.com/2010/01/memasang-sweettiles-tooltip-pada-blog.html
contoh blognya bisa lihat blog saya..
bukan promosi tp membantu ...
nice info ya.. Wah.. Iklan nanti juga bisa dipasang ya? Oke deh.. Ku coba.. Thx ya..
BalasHapushebat :)
BalasHapusiya nanti saya coba deh.
salam dari blogger solo.
Wahhh... keren nich...
BalasHapusCoba dulu ahhh...
Terima kasih infonya om ... langsung ke TKP ni ..
BalasHapusbeneran gak pake JawaScript gan?
BalasHapuswah mantap banget,, Thanks tutorialnya :) :D
BalasHapusRegards
Wah thanks Infonya.
BalasHapuseh mampir ke Blog q ya: http://indonesian-blogspot.blogspot.com/
Mantap kali tutor tool tips-nya gan. :)
BalasHapus@ardianz : iya 100% CSS kog sobat. jadi ngga buat blog jadi gemuk javascript, memang implementasinya aga susah dan bribet tapi sukses kog.
BalasHapus@ OOM : Makasih om dah di publish artikel saya :)
om, thx infonya ya.. lumayan buat nambah info
BalasHapuskeren.... tkp mang......
BalasHapuskerennnnnnnnnnnnn tpi masih kurang bagus kayaknya? :)
BalasHapusIni yang mirip di Wordpress itu ya???
BalasHapusmakasih om sekarang emang semua lagi doyan soal 'cuma pake css'
BalasHapuslagi ramenya dimana mana
ane males pake car ini karena nulis linknya jadi ribet. Kalua menuerut aku petunjuk link malah lebi nyeni jiuka dim asukkan dalam kalimat... gak usah tootip tootltipan hehehe :D
karena aku newbi kali yak gak paham code
tapi thx om.. pasti berguna bagi yg pengent ampil cantik blognya....
Wew...Keren nih infonya. Thanks
BalasHapusHmmm....Ikutan ach. Thanks for share
BalasHapuswah bagus juga nie langsung sedooot up coba ::)
BalasHapusboleh juga tu om,,,,
BalasHapusBoleh juga oom, saya akan membuat "Bubble Tool Tips" banyak manfaatnya untuk rekrut refferal, thanks
BalasHapusBagus nih mas Eldo pakai CSS jadi lebih ringan loadingnya ^_^
BalasHapusdimonitor .. Om, thanks..
BalasHapusThanks Scriptnya Om ...^_^
BalasHapusMakasih buat scriptnya om
BalasHapusaku sudah pasang Om ^_^
BalasHapusbang mau tanya, kok sekarang gambar2 yg di posting di blogspot kok ilang semua ya alias g muncul???
BalasHapusWah.. agak bingung deh, scriptnya mau taruh dimana ya?
BalasHapusMantab om langsung praktek :D
BalasHapuswaduh om saya sebenarnya masih bingung nih,maklum newbie...tapi satu yang pasti salam action
BalasHapusMang mak nyos trus tips nya...
BalasHapusMuanteep tenan!
Repot banget ya.....saya sih yang penting content aja deh, kalo urusan kayak gitu belakangan, toh O-om juga terkenal karena contentnya.
BalasHapussoal ini pernah dibahas sama kang abu farhan om, kang rohman juga pernah review tapi sumbernya juga dari abu farhan..
BalasHapustapi kalau pake itu ntar berat ga om loadingnya
karena kalao kenbanyakan script takutnya jadi lemot
hmmm...tooltips ini berjalan kalo dipostingan keknya, tapi kalo dipake didalam menu template (link yg ada di dalam sebuah template) suka ada bentrok. ya karena adanya penulisan span yg terlalu banyak itu kali yak!!! may be :d ;))
BalasHapusTips yang sangat menarik, sayangnya kalau harus "bongkar" HTML cukup repot juga. Tidak adakah cara lain yg lebih sederhana misalnya cukup menuliskan script ke widget baru?
BalasHapusperlu dicoba nih....
BalasHapuskeyeen...
BalasHapusakhirnya ada juga totor yang andra cari.
BalasHapuspake css lagi... mantap...
makasih banyak tutornya.
hmmm nice tutorial sob, aku udah liat previewnya keren juga. Berguna banget buat ngebantu preview dan note tentang link yang disorot. Thank ya aku bookmark dulu baru tar dicoba.
BalasHapusMangstab om...ilmu yang sangat bermanfaat..dipelajari dulu nie.. :D
BalasHapuskaya wordpress nih om
BalasHapusWah patut dicoba nich. Tq, tutorial yang bagus.
BalasHapuswah sangat menarik infonya mas, n patut dicoba neh :) btw, numpang ngiklan mas Agus ^^
BalasHapusEnglish Tutors Urgently Required
A fast-growing National English Language Consultant is hunting for
English Tutors
Qualifications:
1) Competent, Experienced, or Fresh Graduates
2) Proficient in English both spoken & written
3) Friendly, Communicative, & Creative
4) Available for being placed in
1. Balikpapan (0542-737537)
2. Batam (0778-460785)
3. Samarinda (0541-273163)
4. Banjarmasin (0511-3362559)
5. Palembang (0711-350788)
6. Makassar (0411-451510)
If you meet the qualifications above, please send your resume to: easyspeak.recruitment@gmail.com. Contact Person: 081 24 111 111 9 (Dodi)
Send your application before April 10, 2010
Visit http://www.easyspeak.co.id for further information.
sip la
BalasHapusBagus Om, sangat bermanfaat.
BalasHapusmasih belum mudeng...agak ribet kayaknya..
BalasHapustapi di coba deh..
Langsung d'coba ahh... ;;)
BalasHapusWulan
bookmark dulu deh, thanks atas infonya
BalasHapusbagus ini sobat..
BalasHapusmemang kta juga sangat perlu memberikan penjelasa lebih lanjut dan biasanya menarik perhatian :D ;)
wah agak panjang nih kodenya, nyobanya perlu pelan2..
BalasHapushehhee.. ^^
mantap o-om. .
BalasHapussalam kenal ya. .
ga tambah berat tuh?
BalasHapusbagus nih mas o-om trik
BalasHapusMembuat "Bubble Tool Tips" 100% menggunakan CSS. entar kapan2 kapten teknologi coba ya. thnx
thanks buat kodenya om.. CSS makin hebat nih penggunaannya makin luas..
BalasHapusplease visit http://www.whitehackcommunity.co.cc/
BalasHapustx's ni 'om ats infonya,,
BalasHapusInfo yang sangat berharga..
BalasHapusthanks, mw nyoba dulu..
BalasHapusSepertinya banyak yang gak ngerti y. Bukan masalah Trik ini sulit diterapkan atau tidak...tetapi tidak ngerti cara berkomentar itu seperti apa!
BalasHapusSemuanya asal asalan memberi komentar padahal saya yakin mereka belum baca secara keseluruhan.
1. Penulis trik ini = Eldo A Pradana...malahan masih ada yang bilang ini o-om yang nulis. Kelihatan kalau dia hanya baca judulnya saja.
2. Trik ini murni menggunakan CSS...anehnya masih ada yang bilang ini menggunakan javascript??? Bahkan ada yang bilang ini memberatkan blog???...toel toel.
Sebelum berkomentar baca dulu dengan benar.
Boileh dicoba nih om tipsnya,... bermanfaat buat blog saya nih. segera ke TKP...
BalasHapusthanks infonya om
BalasHapuskerennn.. makasi yaa !
BalasHapuswah ini yang saya cari
BalasHapusGokil nih trik
BalasHapusBisa dicoba
BalasHapusGitu toh caranya!!
BalasHapusAsyik nih!!!!!!!!! Ntar praktekin Q;
BalasHapusCss jitu A'
BalasHapuswah asyiik banget ya tipsnya...
BalasHapusbelum mudeng kali yah akunya,he he he,ga bisa pakenya
BalasHapuspake tool tips emang ok kang, aq juga sering pake dipostinganku, thanks udah share ilmunya.
BalasHapustips o-om Rocks! keren abis...thanks ya
BalasHapusboleh di coba tuh
BalasHapuspraktek dulu
wah keren ni oom!oke dah langsung ajah di coba,nakasih tas ilmunya oom
BalasHapus:-) okelah kalo begitu
BalasHapusdicoba
akang o-om ini ngak habis habis ilmu - terus simak om sambil belajar
BalasHapusWah bagus om, tapi lebih bagus kalo di tambah sedikit script dari jQuery atau MooTools buat effect nya om ;)
BalasHapuswah, Terimakasih ya
BalasHapusthanks ya Om
BalasHapussedot mang ilmunya........:)) =))
BalasHapusmantap mas, makasih ilmunya.
BalasHapusmaaf, sebenarnya sangat tertarik untuk mencobanya tapi masih kebingungan penerapannya. tapi dalam waktu dekat optimis pasti bisa..sukses
BalasHapuskeren OM ... langsung coba ...
BalasHapushttp://www.imtikhan.co.cc
BalasHapuskayaknya bagus ya...
BalasHapuso-om , tolong dunk ajari cara buat formulir untuk iklan di blog dan iklan nya langsung masuk di blog kita ............
BalasHapustolong ya o-om , plis
makasih
Terima kasih atas tips membuat bubble tool ini sob... mudah2an ntar bisa dipraktekkan.
BalasHapusWah. luar biasa! Langsung tancap dah........
BalasHapusThanks tipsnya boss..tak coba ah
BalasHapusijin sedot ilmu nya mas o-om
BalasHapuswuiiii``,sy mohon izin ambil neh css,buat blog ,,eh,,OM,ada gk ya templte sdah lngkap,dan berisi ,bubble toltip didalamnya,,,
BalasHapusbingung uy , , , , keren pngn ngikut tp bingung . .
BalasHapusDengan 'Bubble Tool Tips' ini artikel menjadi lebih informatif dan menarik. Trims tutorialnya. :X
BalasHapusPERTAMAX OM TUTORNYA..
BalasHapusDAN SANGAT BERMANFAAT..
ANE SANGAT TERTARIK SEMUA TUTOR OM..;;0
thank's infonya oom!
BalasHapusmakasih kang tipsnya..langsung gw coba nih
BalasHapusTips Komputer
MeNggamBArKAn ISi / inforMAsi LinK YAnG AKAn ditujU ... KURAnG LEbIH Seperti Itu Y? He he
BalasHapusaRMStrOng_ProDucT@yahOo.co.ID
Berkunjung menambah pengetahuan & mempererat tali persaudaraan. Thanks ya buat infonya. Salam kenal
BalasHapusinfo yang sangat bagus kang oom, makasi ya tas tutorialnya moga sukses selalu
BalasHapusWa...aaahhh ini serba komplit, kayak jamu aja, makasih pak boz
BalasHapuswah bagus banget tapi cara pasangnya dimana om? di tag head, tag body atau tag footer??
BalasHapusbagian tag gini saya ngga pintar,,bingung mas,,padahal katanya yg udah mahir ini sangat mendukung seo ya,,saya mau belajar
BalasHapusWAH SAYA TELAH BERHASIL MEMBUATNYA DARI PADA CUMA KOMTAR DOANG PRAKTEKIN KAWANN, MAU TAHU KEBERHASILAN GW LIAHTA DI POSTING GW YANG INI DI BAWAH
BalasHapushttp://id-blogku.blogspot.com/2011/02/keygen-software-pengubah-trial-jadi.html
MOUSENYA DI ARAHKAN KE TULISAN DOWNLOADNYA
DI JAMIN BERHASIL DEH
SALAM KENAL UNTUK SEMUANYA
Makasih banget informasinya. Bermanfaat banget buat saya.
BalasHapusthank you very helpful information
BalasHapuswah keren om infonya... boleh nich di coba...
BalasHapuswaaaah top deh om tips nya.... maklum newbie ane mah kagag tau apa"
BalasHapusKunjungan dari ane gan.... thanks infonya yg sangat menari ini
BalasHapuskeren jg ni :D
BalasHapusikutan koment gan
BalasHapusProfessional Indemnity Insurance,Professional Indemnity Insurance Quote, What Is Professional Indemnity Insurance
wah, Terimakasih
BalasHapusthanks infony
BalasHapusbanyak yang gak ngerti ane
BalasHapuskeren infonya
BalasHapus