Monday, July 05, 2010

CARA MEMBUAT TOOLTIPS DI BLOG...

Bookmark and Share

...Banyak cara untuk memperkeren tampilan blog kita.. membuat perbedaan dengan blog lainnya... ini akan menjadikan blog kita mempunyai ciri khas tersendiri... salah satunya ialah dengan menambahkan efek tooltips di blog.. dimana pada saat di mouseover pada tautan URL (saya fokuskan di tautan saja) akan muncul pop-up Tooltips yang keren...

MySpace...Tooltips yang saya bahas ini merupakan hasil ekperimen saya dalam beberapa hari terakhir ini ...dari source code yang saya dapatkan via Mbah Google... Saya telah mencoba berbagai cara & kode untuk membuat Tooltips versi saya sendiri.. dan berhasil dengan ToolTips yang :
1. Gambar background yang bisa diganti-ganti...
2. Efek transparansi yang bisa diubah-ubah.. atau bisa juga tanpa transparansi...
3. Tidak memberatkan blog.. karena tidak memakai javascript (.js)...
4. Font-text nya bisa diganti-ganti...


...Ini Contoh Tooltips untuk di Postingan.. coba kalian MouseOver Link di bawah ini :


  • CaRa MemBuat ToolTips di bLog...
    Dimana pada saat di MouseOver pada tautan URL (saya fokuskan di tautan saja) akan muncul Pop-Up Tooltips yang keren...




  • ..tapi tooltips ini masih belum sempurna... jadi harap maklum ya.. silahkan sobat blogger sekalian memperbaruinya menjadi lebih baik lagi...

    MySpace...Oke.. langsung saja kita mulai Sharing Knowledge- nya , pahami langkah-berikut ini ;

    A. Kode tooltips untuk di ditempatkan di dalam Kode HTML Template Blog...
    1. Login ke Blogger > Rancangan > Edit HTML ...lalu 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. Cari kode berikut ini.. ]]></b:skin> ..dan Paste -kan 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(http://sites.google.com/site/ecaknyo/blog/image-ecaknyo-1/yellowsoftbgtooltips.PNG) = Gantilah dengan URL gambar background kamu sendiri.. tetapi usahakan ukuran gambarnya disesuaikan... silahkan ganti yang berwarna biru...

    border:1px solid #FFFFFF; = Untuk mengatur ketebalan dari garis border ToolTipnya.. disini saya memakai 1px dengan warna border putih.. silahkan ganti yang berwarna biru...

    -moz-border-radius: = Ini untuk memberi efek Lingkaran pada siku gambar tooltips.. semakin besar nilainya maka hasilnya akan semakin berbentuk lingkaran... jadi biarkan saja default 10px..

    opacity: 0.8;filter:alpha(opacity=80);zoom:1; > angka berwarna biru ini untuk mengatur tingkat Transparansi ToolTips... aturlah sesuka kalian...

    margin-top:-50px; = Untuk mengatur posisi Tinggi rendahnya Tooltips... ubah angka yang warna biru...
    margin-left:-290px; = Untuk mengatur posisi ke kiri-kanannya Tooltips... ubah angka yang warna biru...

    font-family:Rockwell; = Kata yang berwarna biru ini ubahlah dengan font yang sesuai dengan keinginan kalian...

    ..Dan Seterusnya... silahkan kalian Modifikasi sendiri ya... banyak jika harus dijelaskan satu-persatu.. capek ngetiknya.. :)) ..saya yakin kalian mengerti kode-kode sisanya... ;)

    3. Jika telah selesai.. Simpan Template Blog...


    B. Kode untuk memanggil tooltips pop-up (Muncul)...
    1. Perhatikan kode untuk memanggil tooltips ini atau kode agar membuat tooltips -nya 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>

    Ket :
    > Yang saya warnai merah adalah kode terpenting.. jadi jika kalian terlupa memasukannya makan tooltips-nya tidak akan berfungsi...

    ...Ini Contoh Pengunaannya... yang saya gunakan pada widget HTML/Javascripts.. (bisa juga kamu gunakan pada postingan loh..)...
    <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="TOLtip"><p>Permainan uji ketangkasan dalam mengelola lahan Pertanian...</p></div></li>
    ...Contoh ToolTips Nyatanya ada di Blog saya ini.. Coba kalian MouseOver Isi Menu pada Bagian Free DownLoad di sebelah kanan Blog ini.. seperti gambar dibawah ini... :)


    Note :
    > Sebaiknya Kemunculan Pop-Up Tooltip-nya kalian atur munculnya dibawah Link/gambar tautan.. agar Tooltips ini bisa digunakan di seluruh area dalam blog kamu (di widget sebelah kiri/kanan atau di postingan atau di header/footer)...
    > Kode Tooltips ini saya atur sedemikian rupa agar tampilannya sesuai dengan keinginan saya dan tema blog saya... makanya belum tentu akan cocok dengan blog lainnya... jadi silahkan kalian utak-atik sendiri sekreatif mungkin agar sesuai dengan tema blog/ keinginan kalian...


    MySpace
    ... Tooltips yang Simple...

    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. @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
    45. Mantap Bro mampir ke http://socialwap.co.tv dan gabung wap ku OKE=))

      ReplyDelete
    46. @yanuar LK:

      social dalam konteks apa itu gan.. :)

      ReplyDelete
    47. @yanuar LK:

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

      ReplyDelete
    48. @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
    49. askum..!
      makasi broo. atas artikelnya...

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

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

      ReplyDelete
    52. mantab gan ... langsung menuju TKP

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

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

      ReplyDelete
    55. 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.

    Emoticon : Untuk menyisipkan emoticon dalam komentar, silahkan klik pada emoticons icon yang tersedia dibawah ini untuk melihat kodenya lalu tinggal di copy dan di paste [ sisipkan ] kodenya ke dalam komentar.