Blog Inspirasi Digital

Blog Inspirasi Digital

Tutorial Mikrotik, Hotspot, Blog, SEO, WEB 2.0, HTML, CSS, Javascript dan Inspirasi Digital

Membuat "Bubble Tool Tips" 100% menggunakan CSS

Penulis: Eldo A Pradana | dindingcoret.com


Bubble Tool Tips ini berguna sekali untuk memberikan informasi tentang sebuah link (bisa link refferal supaya banyak orang yang ikutan). Jika digerakkan diatas link (hover) maka secara otomatis bubble tool tips akan keluar dengan segala informasi yang ada yang dituliskan. Biasanya untuk membuat balon tip ini sebagian orang memanggilnya dengan javascript yang akan membebani blog dengan size yang sangat besar. Nah ini ada trik yang menggunakan CSS murni sebagai pemanggilan codenya. Untuk lihat live previewnya silahkan klik aja link ini .


 

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>


124 komentar:

  1. makasih kang oom,,Membuat "Bubble Tool Tips" 100% menggunakan CSS sangat bermanfaat buat saya,,insya allah saya terapkan

    BalasHapus
  2. sepertinya ringan nih... kalau pakai javascript bisa membuat blog jadi gendut...hehe

    terima kasih o-om... langsung praktek ahh

    BalasHapus
  3. lebih ringan lebih ga males lagi dech brosing hehehehe :p makasih... :d

    BalasHapus
  4. manfaat banget om di coba deh

    BalasHapus
  5. moel css nih om yang Rizky suka

    BalasHapus
  6. waw.... langsung sedot ilmunya, dan ijn tkp kang

    BalasHapus
  7. wah aku agak bingung neehh, tak coba2 terus deh, makaishhhh :D

    BalasHapus
  8. wah,,jadi menambah ilmu saya nih saya suka otak-atik

    BalasHapus
  9. makasih dah share kang, saya coba tips nya dulu

    BalasHapus
  10. Ini yang selama ini saya cari! Trims telah berbagi!

    BalasHapus
  11. waw, ribet banget sih...
    coba 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 ...

    BalasHapus
  12. nice info ya.. Wah.. Iklan nanti juga bisa dipasang ya? Oke deh.. Ku coba.. Thx ya..

    BalasHapus
  13. hebat :)
    iya nanti saya coba deh.
    salam dari blogger solo.

    BalasHapus
  14. Wahhh... keren nich...

    Coba dulu ahhh...

    BalasHapus
  15. Terima kasih infonya om ... langsung ke TKP ni ..

    BalasHapus
  16. beneran gak pake JawaScript gan?

    BalasHapus
  17. wah mantap banget,, Thanks tutorialnya :) :D
    Regards

    BalasHapus
  18. Wah thanks Infonya.
    eh mampir ke Blog q ya: http://indonesian-blogspot.blogspot.com/

    BalasHapus
  19. Mantap kali tutor tool tips-nya gan. :)

    BalasHapus
  20. @ardianz : iya 100% CSS kog sobat. jadi ngga buat blog jadi gemuk javascript, memang implementasinya aga susah dan bribet tapi sukses kog.

    @ OOM : Makasih om dah di publish artikel saya :)

    BalasHapus
  21. om, thx infonya ya.. lumayan buat nambah info

    BalasHapus
  22. keren.... tkp mang......

    BalasHapus
  23. kerennnnnnnnnnnnn tpi masih kurang bagus kayaknya? :)

    BalasHapus
  24. Ini yang mirip di Wordpress itu ya???

    BalasHapus
  25. makasih om sekarang emang semua lagi doyan soal 'cuma pake css'
    lagi 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....

    BalasHapus
  26. Wew...Keren nih infonya. Thanks

    BalasHapus
  27. Hmmm....Ikutan ach. Thanks for share

    BalasHapus
  28. wah bagus juga nie langsung sedooot up coba ::)

    BalasHapus
  29. Boleh juga oom, saya akan membuat "Bubble Tool Tips" banyak manfaatnya untuk rekrut refferal, thanks

    BalasHapus
  30. Bagus nih mas Eldo pakai CSS jadi lebih ringan loadingnya ^_^

    BalasHapus
  31. dimonitor .. Om, thanks..

    BalasHapus
  32. Thanks Scriptnya Om ...^_^

    BalasHapus
  33. aku sudah pasang Om ^_^

    BalasHapus
  34. bang mau tanya, kok sekarang gambar2 yg di posting di blogspot kok ilang semua ya alias g muncul???

    BalasHapus
  35. Wah.. agak bingung deh, scriptnya mau taruh dimana ya?

    BalasHapus
  36. Mantab om langsung praktek :D

    BalasHapus
  37. waduh om saya sebenarnya masih bingung nih,maklum newbie...tapi satu yang pasti salam action

    BalasHapus
  38. Mang mak nyos trus tips nya...
    Muanteep tenan!

    BalasHapus
  39. Repot banget ya.....saya sih yang penting content aja deh, kalo urusan kayak gitu belakangan, toh O-om juga terkenal karena contentnya.

    BalasHapus
  40. soal ini pernah dibahas sama kang abu farhan om, kang rohman juga pernah review tapi sumbernya juga dari abu farhan..
    tapi kalau pake itu ntar berat ga om loadingnya
    karena kalao kenbanyakan script takutnya jadi lemot

    BalasHapus
  41. 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 ;))

    BalasHapus
  42. Tips 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?

    BalasHapus
  43. perlu dicoba nih....

    BalasHapus
  44. akhirnya ada juga totor yang andra cari.
    pake css lagi... mantap...
    makasih banyak tutornya.

    BalasHapus
  45. 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.

    BalasHapus
  46. Mangstab om...ilmu yang sangat bermanfaat..dipelajari dulu nie.. :D

    BalasHapus
  47. kaya wordpress nih om

    BalasHapus
  48. Wah patut dicoba nich. Tq, tutorial yang bagus.

    BalasHapus
  49. wah sangat menarik infonya mas, n patut dicoba neh :) btw, numpang ngiklan mas Agus ^^

    English 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.

    BalasHapus
  50. Bagus Om, sangat bermanfaat.

    BalasHapus
  51. masih belum mudeng...agak ribet kayaknya..

    tapi di coba deh..

    BalasHapus
  52. Langsung d'coba ahh... ;;)

    Wulan

    BalasHapus
  53. bookmark dulu deh, thanks atas infonya

    BalasHapus
  54. bagus ini sobat..
    memang kta juga sangat perlu memberikan penjelasa lebih lanjut dan biasanya menarik perhatian :D ;)

    BalasHapus
  55. wah agak panjang nih kodenya, nyobanya perlu pelan2..
    hehhee.. ^^

    BalasHapus
  56. mantap o-om. .
    salam kenal ya. .

    BalasHapus
  57. ga tambah berat tuh?

    BalasHapus
  58. bagus nih mas o-om trik
    Membuat "Bubble Tool Tips" 100% menggunakan CSS. entar kapan2 kapten teknologi coba ya. thnx

    BalasHapus
  59. thanks buat kodenya om.. CSS makin hebat nih penggunaannya makin luas..

    BalasHapus
  60. please visit http://www.whitehackcommunity.co.cc/

    BalasHapus
  61. tx's ni 'om ats infonya,,

    BalasHapus
  62. Info yang sangat berharga..

    BalasHapus
  63. thanks, mw nyoba dulu..

    BalasHapus
  64. Sepertinya banyak yang gak ngerti y. Bukan masalah Trik ini sulit diterapkan atau tidak...tetapi tidak ngerti cara berkomentar itu seperti apa!

    Semuanya 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.

    BalasHapus
  65. Boileh dicoba nih om tipsnya,... bermanfaat buat blog saya nih. segera ke TKP...

    BalasHapus
  66. thanks infonya om

    BalasHapus
  67. kerennn.. makasi yaa !

    BalasHapus
  68. wah ini yang saya cari

    BalasHapus
  69. Asyik nih!!!!!!!!! Ntar praktekin Q;

    BalasHapus
  70. wah asyiik banget ya tipsnya...

    BalasHapus
  71. belum mudeng kali yah akunya,he he he,ga bisa pakenya

    BalasHapus
  72. pake tool tips emang ok kang, aq juga sering pake dipostinganku, thanks udah share ilmunya.

    BalasHapus
  73. tips o-om Rocks! keren abis...thanks ya

    BalasHapus
  74. wah keren ni oom!oke dah langsung ajah di coba,nakasih tas ilmunya oom

    BalasHapus
  75. :-) okelah kalo begitu

    dicoba

    BalasHapus
  76. akang o-om ini ngak habis habis ilmu - terus simak om sambil belajar

    BalasHapus
  77. Indra Meissa7/4/10

    Wah bagus om, tapi lebih bagus kalo di tambah sedikit script dari jQuery atau MooTools buat effect nya om ;)

    BalasHapus
  78. sedot mang ilmunya........:)) =))

    BalasHapus
  79. mantap mas, makasih ilmunya.

    BalasHapus
  80. maaf, sebenarnya sangat tertarik untuk mencobanya tapi masih kebingungan penerapannya. tapi dalam waktu dekat optimis pasti bisa..sukses

    BalasHapus
  81. keren OM ... langsung coba ...

    BalasHapus
  82. http://www.imtikhan.co.cc

    BalasHapus
  83. Anonim3/5/10

    o-om , tolong dunk ajari cara buat formulir untuk iklan di blog dan iklan nya langsung masuk di blog kita ............
    tolong ya o-om , plis
    makasih

    BalasHapus
  84. Terima kasih atas tips membuat bubble tool ini sob... mudah2an ntar bisa dipraktekkan.

    BalasHapus
  85. Wah. luar biasa! Langsung tancap dah........

    BalasHapus
  86. Thanks tipsnya boss..tak coba ah

    BalasHapus
  87. wuiiii``,sy mohon izin ambil neh css,buat blog ,,eh,,OM,ada gk ya templte sdah lngkap,dan berisi ,bubble toltip didalamnya,,,

    BalasHapus
  88. bingung uy , , , , keren pngn ngikut tp bingung . .

    BalasHapus
  89. Dengan 'Bubble Tool Tips' ini artikel menjadi lebih informatif dan menarik. Trims tutorialnya. :X

    BalasHapus
  90. Anonim25/6/10

    PERTAMAX OM TUTORNYA..
    DAN SANGAT BERMANFAAT..
    ANE SANGAT TERTARIK SEMUA TUTOR OM..;;0

    BalasHapus
  91. thank's infonya oom!

    BalasHapus
  92. makasih kang tipsnya..langsung gw coba nih

    Tips Komputer

    BalasHapus
  93. MeNggamBArKAn ISi / inforMAsi LinK YAnG AKAn ditujU ... KURAnG LEbIH Seperti Itu Y? He he

    aRMStrOng_ProDucT@yahOo.co.ID

    BalasHapus
  94. Berkunjung menambah pengetahuan & mempererat tali persaudaraan. Thanks ya buat infonya. Salam kenal

    BalasHapus
  95. info yang sangat bagus kang oom, makasi ya tas tutorialnya moga sukses selalu

    BalasHapus
  96. Wa...aaahhh ini serba komplit, kayak jamu aja, makasih pak boz

    BalasHapus
  97. wah bagus banget tapi cara pasangnya dimana om? di tag head, tag body atau tag footer??

    BalasHapus
  98. bagian tag gini saya ngga pintar,,bingung mas,,padahal katanya yg udah mahir ini sangat mendukung seo ya,,saya mau belajar

    BalasHapus
  99. WAH SAYA TELAH BERHASIL MEMBUATNYA DARI PADA CUMA KOMTAR DOANG PRAKTEKIN KAWANN, MAU TAHU KEBERHASILAN GW LIAHTA DI POSTING GW YANG INI DI BAWAH

    http://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

    BalasHapus
  100. Makasih banget informasinya. Bermanfaat banget buat saya.

    BalasHapus
  101. thank you very helpful information

    BalasHapus
  102. wah keren om infonya... boleh nich di coba...

    BalasHapus
  103. waaaah top deh om tips nya.... maklum newbie ane mah kagag tau apa"

    BalasHapus
  104. Kunjungan dari ane gan.... thanks infonya yg sangat menari ini

    BalasHapus
  105. banyak yang gak ngerti ane

    BalasHapus


 

Back to Top