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

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSmKJnsvNd-ME1bwkq6__UNKi7B46fvg2ayhtvSBf8rMqLMO8g9YVgXmJrG43Sym3egPaLNCfRs6jOZn2TBbsRACbW0y8LSCfK8KhLVq_DqCfAkSIJUwgauoRqiChMAS0DiXf4G1Ipop4/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