Monday, July 05, 2010

Membuat Fitur Tooltips



Efek tooltips adalah dimana pada saat di mouseover pada link url maka akan muncul pop-up tooltips, seperti di bagian top menu blog ini.

Namun tooltips ini masih belum sempurna, jadi harap maklum ya, silahkan sobat blogge memperbaruinya menjadi lebih baik lagi.

Langkah-langkah sbb :

1. Login ke blogger > rancangan > edit html, copy kode tooltips dibawah ini.
li.sfhover .tooltips, li:hover .tooltips {
display:block;
}
.tooltips {
margin:6px 6px 0 6px;
padding:15px 10px 15px;
position:absolute;
width:250px; >
display:none;
background:url(http://sites.google.com/site/ecaknyo/blog/image-ecaknyo-1/yellowsoftbgtooltips.PNG) bottom repeat-x;
opacity: 0.8;filter:alpha(opacity=80);zoom:1;
border:1px solid #FFFFFF;
-moz-border-radius:10px;
}
.tooltips {
margin-top:-50px;
margin-left:-290px;
}
.tooltips:hover {
display:none!important;
}
.tooltips p {
font-size:12px;
font-family:Rockwell;
font-weight:bold;
color: #0060C8;
text-align:center;
margin:0 15px 0 0;
}

2. Ctrl F cari kode berikut ini ' ]]></b:skin> ' dan paste kode tadi diatasnya, seperti contoh dibawah ini.
li.sfhover .tooltips, li:hover .tooltips {
display:block;
}
.tooltips {
margin:6px 6px 0 6px;
padding:15px 10px 15px;
position:absolute;
width:250px;
display:none;
background:url(http://sites.google.com/site/ecaknyo/blog/image-ecaknyo-1/yellowsoftbgtooltips.PNG) bottom repeat-x;
opacity: 0.8;filter:alpha(opacity=80);zoom:1;
border:1px solid #FFFFFF;
-moz-border-radius:10px;
}
.tooltips {
margin-top:-50px;
margin-left:-290px;
}
.tooltips:hover {
display:none!important;
}
.tooltips p {
font-size:12px;
font-family:Rockwell;
font-weight:bold;
color: #0060C8;
text-align:center;
margin:0 15px 0 0;
}

]]></b:skin>

Ket.

background:url
Gantilah dengan gambar backgroundnya, ukuran gambarnya disesuaikan, ganti yang berwarna biru.

border:1px solid #FFFFFF;
Untuk mengatur ketebalan dari garis border tooltipnya.

-moz-border-radius:
Untuk memberi efek lingkaran pada siku tooltips.

opacity: 0.8;filter:alpha(opacity=80);zoom:1;
Untuk mengatur tingkat transparansi tooltips.

margin-top:-50px;
Untuk mengatur posisi tinggi rendahnya tooltips.

margin-left:-290px;
Untuk mengatur posisi ke kiri-kanannya tooltips.

font-family:Rockwell;
Ubahlah dengan font yang sesuai keinginan.


3. Simpan template blog.


4. Ini kode untuk memanggil tooltips ini atau kode agar membuat tooltipsnya berfungsi.
<li><a href="http://.....url yang berkaitan dengan tooltips...." > judul url yang berkaitan dengan tooltips </a><div class="tooltips"><p> kata-kata untuk ditampilkan pada pop-up tooltips</p></div></li>


Contoh pengunaannya.
<li><img src="http://i466.photobucket.com/albums/rr22/wong284/arrow_download.gif" /><a href="http://www.ziddu.com/downloadlink/7138173/FarmFrenzy2.rar" > Game Farm Frenzy 2</a><div class="tooltips"><p>Permainan uji ketangkasan dalam mengelola lahan pertanian.</p></div></li>

Contoh gambar.





Selamat mencoba.


73 comments:

  1. waw, mantap nih
    saya pelajari dulu kang

    ReplyDelete
  2. Coretan Felix > silahkan saja gan... pahami dulu.. :)

    ReplyDelete
  3. contohnya yg gmn nih gan?? ada gambarnya ga??

    ReplyDelete
  4. BOOK ONLINE > contohnya ada di blog saya ini gan.. coba kamu mouseover pada Bagian isi konten dari Free Download.. :)

    ReplyDelete
  5. wah makasih nih tipsnya..ntar ane coba...

    ReplyDelete
  6. Manchester United Tech > silahkan dicoba2 gan.. :)

    ReplyDelete
  7. wah bikin tambah menarik, ijin save ya
    thanks

    ReplyDelete
  8. mixedfresh > silahkan sj gan.. ;)

    ReplyDelete
  9. makin lengkap nh tutornya di sini...

    ReplyDelete
  10. silaturrahmi ne kawan
    banner nya sdh aku pasang...
    info balik ya..trims

    ReplyDelete
  11. etam grecek > saya usahakan update tutornya tiap minggu gan.. mudah2an bisa.. :)

    odah etam > oke..thx..ntar wa mampir balik gan.. :)

    ReplyDelete
  12. wah mantab bang Andi ijin copy untuk dipelajari, salam

    ReplyDelete
  13. Warna Tulisan > Silahkan johnson.. pahami sj dulu.. :)

    ReplyDelete
  14. wahh, mantap sob infonya..bisa saya coba nih

    ReplyDelete
  15. AZ COMSOFT > silahkan gan.. smoga berhasil :D

    ReplyDelete
  16. sob nih artikel manfaat bnget yach ... btw txs ya .................. :D

    ReplyDelete
  17. trik yang jitu..menambah cantik tampilan blog..mau di coba dulu..

    ReplyDelete
  18. Reynaldi > silahkan dicoba gan :)

    archv3nture > kalo kita lebih kreatif malah akan lebih keren lgi tooltip-nya gan.. ;)

    ReplyDelete
  19. sipp deh tipzznya..
    dicoba ahhh.. :)

    ReplyDelete
  20. Lagi menyimak, abis itu lgs latihan ke tkp. Thanks bro, infonya mantaab :)

    networkblognya aq follow ya

    ReplyDelete
  21. gaelby > silahkan dipelajari & dipahami gan.. :)

    ReplyDelete
  22. Selamat sore sob..kunjungan sore nih,,,thanks masukannya yah

    ReplyDelete
  23. okok teman, mantab (pake B) tutornya.
    terima kasih atas sharenya, bermanfaat bagi saya sebagai orang yang masih beLajar di dunia bLogging.
    seLamat maLam dan seLamat istirahat aja, saLam sukses seLaLu.

    ReplyDelete
  24. Hamz > rajin2 mampir gan.. :)

    om rame > thX (pake X gede) gan.. =))

    ReplyDelete
  25. menyapa pagi kawan
    baru bangun ne habis begadang nonton PD tadi malam....
    sukses slalu mat aktifitas ya

    ReplyDelete
  26. wah.., hasil experiment yang keren tuh master.., ijin nyimak and praktek yach :)) slam kenal master.. :D

    ReplyDelete
  27. odah etam > met aktivitas jg gan.. :D

    Newbie > silahkan saja newbie.. ;)

    Om Canel > silahkan dicoba gan... :)

    ReplyDelete
  28. Bagus juga ni sobat tooltipsnya...
    bikin link di articel kita berwarna warni...
    biar pengunjung betah berlama-lamaan di blog kita.

    salam blogger

    ReplyDelete
  29. wah ...kpn2 pengen cb nih...terima kasih infonya

    ReplyDelete
  30. jaya > membuat blog kita berbeda (unik) gan.. :)

    osi > kapan2 dicoba jg gkppa osi.. ;)

    ReplyDelete
  31. Aku pernah nyoba buat tooltip pke caranya oom, tapi kebanyakan css jadi lemot,

    ReplyDelete
  32. trims buat artikel
    by http://mata-kuliah.co.cc/

    ReplyDelete
  33. Ka Damar > itu betul gan.. :)

    Anonim > oke ..ntar wa mampir n bls komeng gan ;)

    ReplyDelete
  34. Download Gratis > thx gan.. :D

    ReplyDelete
  35. Multi Info > makasih gan.. silahkan baca2 :)

    ReplyDelete
  36. bung masih problem nda muncul toll nya

    ReplyDelete
  37. KRESEKpikiran > toll apanya gan ? bisa lebih spesifik lagi.. :)

    ReplyDelete
  38. inti nya saya uda coba sesuai dengan ptunjuk pak bos ... namun Pop-Up Tooltip-nya nda nongol...

    ReplyDelete
  39. KRESEKpikiran > sudah sesuai prosedur tutor..gk berfungsi yaa..?? heuum.. coba gw bisa liat widget template mu gan..

    jual beli liberty reserve > siip :)

    ReplyDelete
  40. Tutorial yang bagus gan....saya plajari dulu yah.....

    ReplyDelete
  41. Sob, aku dah folbak yaaa. makasiii yaaa, tukaran link yuuuk :))

    ReplyDelete
  42. hadi > silhkan dipelajari gan.. :)

    semua butuh belajar > link sdh terpasang gan.. thx ya.. ;)

    ReplyDelete
  43. mantab dan bagus banget nich blognya, kunjungan balik ya bro di download ebook gratis

    ReplyDelete
  44. kayanya anda seorang programer????

    ReplyDelete
  45. @Belajar Blogging:

    kok tw.. tpi itu dulu sewaktu masi coding Visual basic... skrg gk lagi..dah byk yg lupa script-nya..& trik2nya :D maklum dah mulai tuwir.. kekekkek

    ReplyDelete
  46. Mantap Bro mampir ke http://socialwap.co.tv dan gabung wap ku OKE=))

    ReplyDelete
  47. @yanuar LK:

    social dalam konteks apa itu gan.. :)

    ReplyDelete
  48. @yanuar LK:

    SCRIPT EMOT-nya gw ilangin gan..krn ngangu widget FOLower google gw.. :D

    ReplyDelete
  49. @Mufid:

    testing emot ya..sory bro ..tpi script js emot-nya utk smentara wa del dulu..abisnya bentrok dg google follower..jd error.. :D

    ReplyDelete
  50. askum..!
    makasi broo. atas artikelnya...

    ReplyDelete
  51. mantap bro.. artikelnya.. oh iya.. hampir lupa. makasi ya uda berkunjung di blog saya..

    ReplyDelete
  52. Mantab Neh Gan, sekalian ijin follow ya...

    ReplyDelete
  53. mantab gan ... langsung menuju TKP

    ReplyDelete
  54. keren gan jadi pengen nyoba juga nih, saya bookmark dulu aja , soalnya masih mau nglanjutin perjalanan (blogwalking)

    ReplyDelete
  55. Kok g di sertai contoh gambarnya mas... msh blm paham mas

    ReplyDelete
  56. kok ane gak bisa ya mas??

    kunjungi = www.duniaq-duniamu.com ya gan...

    ReplyDelete
N.B.
1. Berkomentarlah dengan sopan.
2. Dilarang membuat spam, terutama yang mengandung SARA/ Pornografi/ Judi dan Iklan.