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

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 sobat, selain tidak menggunakan script sehingga tidak akan mempengaruhi loading blog karena hanya menggunakan kode CSS sederhana saja

Berikut caranya:

• Masuklah ke akun Blogger sobat
• 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1_6lgrKcOpGLDLPOUK6TnXIdRKO1Q8pW62q81tFvOsNKrZhCyAOmHpu6cAkkhiJmK65n_TlKeiJ2WvRfcPfVzswkd6t82y52SVoT4EFNGFeEmmBJlz98R1WgaRd4kpg7KATb5oXQOqE4/s1600/all-trick-blogs.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 sobat 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