Select Menu

Slider

Adsense Banner 970 x 90

Blog Archive

Footer W 2

Footer W 1

Footer W 3

Travel

Performance

Cute

My Place

Slider

Racing

Popular Posts

Videos

» » » » » » Amazing Easy Tooltips
«
Next
Posting Lebih Baru
»
Previous
Posting Lama

Seperti yang saya jelaskan ketika saya posting tentang Tooltips juga disini [baca : Bubble Tooltips]. Tooltips adalah sebuah object yang menandai object lain dengan cara mengeluarkan sebuah tulisan lain yang bisa diartikan deskripsi dari sebuah object. Ini adalah postingan kedua tentang Tooltips Jquery. Yaitu Easy Tooltips. Tooltips kali ini berbeda dengan sebelumnya yaitu mengikuti kearah cursor pindah.

Perhatikan itu, gerakan kursor di Link itu. Rasakan dan Lihatlah apa yang akan terjadi. Rupanya link mengeluarkan kata kata ajaibnya yaitu title="Ini adalah contoh Easy Tooltips Jquery" . Title sebagai deskripsi/tulisan yang keluar dari sebuah link atau object lain. Tapi bagai mana bisa mengeluarkan Deskripsi yang berbeda tampilan itu? Kuncinya ada di bawah ini :

  1. Buka Akun blogger.com dengan password dan ID tentunya
  2. Saat di dasboard klik Layout/DesignEdit HTMLCari kode <head>
  3. Letakan kode berikut tepat di bawah kode Head :
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://sites.google.com/site/farixsantips/scripts/vtip.js"></script>

    <style type="text/css">
    p#vtip { display: none; position: absolute; padding: 10px; left: 5px; font-size: 0.8em; background-color: white; border: 1px solid #a6c9e2; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999 }
    p#vtip #vtipArrow { position: absolute; top: -10px; left: 5px }
    </style>
    Kata bercetak tebal adalah kode Css/tampilan Easy Tooltips ini
  4. Berikutnya tinggal dimana sobat meletakan Object apapun dengan di tambah Class="vtip". Sebagai Contoh :
    1. Link →
      <a href="http:farixsantips.blogspot.com" class="vtip" title="Berikut adalah Blog tutorial">Farixsantips</a>
      Tulisan Merah adalah Url Link, Tulisan Biru adalah Class yang harus vtip, sedangkan Tulisan Unggu adalah Deskripsi dari sebuah Object itu.
    2. Gambar →
      <img src="URL_GAMBAR" class="vtip" title="Deskripsi dari sebuah gambar"/>
      Tulisan Merah adalah Url Gambar, Tulisan Biru adalah Class yang harus vtip, sedangkan Tulisan Unggu adalah Deskripsi dari sebuah Object itu.

  5. Selesai.
Semoga Easy Tooltipsnya bisa membantu dalam perawatan blogger sobat :), kurang lebihnya mohon maaf saya akhiri dengan wassalam :)

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
«
Next
Posting Lebih Baru
»
Previous
Posting Lama

Tidak ada komentar