Kamis, 29 Agustus 2013

Cara Memunculkan Pesan Melayang Saat Di Sorot Mouse

Cara Memunculkan Pesan Saat Di Sorot Mouse - Pernah melihat atau menemukan link atau gambar yang jika di sorot dengan mouse akan muncul pesan melayang dengan beberapa kalimat didalamnya? Sebenarnya pesan melayang saat di sorot mouse tersebut merupakan fungsi yang dinamakan tooltips blog. Untuk tooltips blog sendiri silahkan baca di Macam Macam Tooltips Blog

Cara Memunculkan Pesan Melayang Saat Di Sorot Mouse
Cara Memunculkan Pesan Melayang Saat Di Sorot Mouse

Sudah banyak yang membahas cara memunculkan pesan melayang saat di sorot mouse ini, dan pada artikel sebelumnya saya pernah membuat tutorial yang hampir memiliki fungsi yang sama namun sayang artikel yang merupakan request dari teman di Group FB tersebut tidak sesuai dengan keinginan karena memiliki fungsi tab view yang muncul di tab baru

Cara memunculkan pesan melayang saat di sorot mouse ini sangat simpel dan mudah dipasang di blog Anda, selain tidak menggunakan script sehingga tidak akan mempengaruhi loading blog karena hanya menggunakan kode CSS sederhana saja

Berikut caranya:
  • Masuklah ke akun Blogger Anda
  • Bukan halaman Editing Template
  • Cari kode ]]></b:skin> dan salin kode berikut tepat diatas kode ]]></b:skin>
    
    .icontandatanya {
     display: inline-block;
     width: 16px;
     height: 16px;
     position: relative;
     padding: 0 4px 0 0;
     background: url('http://4.bp.blogspot.com/-vQdCqXudTBE/Uh7G6tt8LoI/AAAAAAAABlw/jyBvYw09toY/s1600/panduantemplateblog.com-qeustwarnnoicons.png') no-repeat;
    }
    .tooltipblog {
     display: none;
     width: 200px;
     position: absolute;
     padding: 8px;
     margin: 4px 0 0 4px;
     top: 0;
     left: 16px;
     border: 1px solid #76B6D7;
     border-radius: 0 8px 8px 8px;
     background: #bedffe;
     font-size: 10px;
     box-shadow: 0 1px 2px -1px #21759B;
     z-index: 999;
    }
    .tandatanya {
     color:#000;
     background-position: 0 0;
    }
    .tandatanya .tooltipblog {
     border-color: #76B6D7;
     background-color: #bedffe;
     box-shadow-color: #21759B;
    }
    .icontandatanya:hover .tooltipblog {
     display: block;
    }
    
  • Simpan template
  • Untuk memasang kode tersebut terserah Anda mau dipasang dimana seperti contoh berikut ini
    Penulisan dalam kode HTML seperti berikut ini
    <span class="icontandatanya tandatanya">
    <span class="tooltipblog">Sebelah kiri adalah icon tandatanya
    Silahkan isi beberapa kalimat disini</span>
    </span>
    Untuk DEMO silahkan sorot dengan mouse tanda tanya dibawah ini
    
    Ini adalah icon tandatanya
    Silahkan isi beberapa kalimat disini
    
    Cara memasang disebelah kanan artikel Cara memasang disebelah kanan artikel
    
    Cara memasang ditengah artikel Cara memasang ditengah artikel cukup mudah juga
    
    Didalamnya ada link juga loh  LINK 
    
    
Untuk pemasangan didalam gambar blog, cukup membuat background gambar yang sesuai lalu pasang kode pesan melayang ini diatas background tersebut atau baca di membuat tombol diatas background

Gimana mudah bukan? Jika masih mengalami kesulitan mari kita diskusikan bersam-sama dengan meninggalkan komentar di artikel ini, Cara Memunculkan Pesan Melayang Saat Di Sorot Mouse

Cara Memunculkan Pesan Melayang Saat Di Sorot Mouse Rating: 4.5 Diposkan Oleh: ana sriwahyuni

12 komentar:

  1. Kayak mirip ads dari infolink ya buk? Jadi kalau kita mengarahkan kursor ke link, maka akan muncul pesan melayang. Kayaknya bisa dicoba untuk dipraktekkan :) Thanks informasinya :)

    BalasHapus
    Balasan
    1. iya betul mbak tapi dalam bentuk image-icon, kalau mau dimodifikasi maka akan menjadi seperti yang dari infolink itu :) makasih juga ya..

      Hapus
  2. kalo mau buat info link gimana caranya bang?

    BalasHapus
    Balasan
    1. yang diatas itu sudah bisa dijadikan info link mas ..

      Hapus
  3. makasih yahh,,
    coment balik y :)

    BalasHapus
  4. tenkyu keren,,,Bisa di pasangi link nggak?

    BalasHapus
    Balasan
    1. di demo kan sudah ada mas? hayoo.. lagi baca atau langsung komentar nich? :D

      Hapus
  5. nice info, saya sangat suka penjelasan agan

    BalasHapus
  6. menarik sekali css nya jadi pengen di coba pasang di blog ane :)

    BalasHapus
  7. Thanks bro atas tutor nya, ane coba dulu . . .

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia