Tooltip Adalah Sebuah Widget Yang Muncul Berisi Deskripsi Sekilas Tentang Isi Link...
Coba Kalian
Arahkan Cursor Ke Link ini
1. Masuk dulu ke akun blogger Sahabat
2. Setelah berada di Dashboard Klik Design --> Edit HTML
3. Backup Dulu Template Sahabat dengan mengKlik Download Full Template
(Ini dilakukan jika dirasa perlu, atau lewatkan saja).
3. Centang Expand Template Widget
4. Cari Kode
]]></b:skin> 5. Copy-Paste Kode CSS dibawah tepat Di Atas
]]></b:skin>
a.tooltip {
position: relative;
text-decoration: none;
}
a.tooltip::before {
position: absolute;
content: attr(data-title);
background: #000;
width: 200px;
padding: 5px 10px;
color: #fff;
top: -1000px;
text-align: justify;
z-index: 99;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
border: 5px solid #A52A2A;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration: blink;
visibility: hidden;
font: normal 12px/20px Arial,sans-serif;
}
a.tooltip:hover::before {
top: 100%;
visibility: visible;
}
6. Untuk Memanggil Tooltipnya Silahkan Sisipkan Kode Ini Di Link Anda
<a href="URL-LINK" class="tooltip" data-title="Effect tooltip">Arahkan Cursor Ke Link ini </a>
7. Untuk Gambar
<a class="tooltip" href="URL-LINK" data-title="TITLE-TOOLTIP!"><img alt="title" src="URL-IMAGE.JPG" width="300" height=225px" class="tooltip"/></a>
Title : Membuat Tooltip Dengan Efek Jquery
Description : Tooltip Adalah Sebuah Widget Yang Muncul Berisi Deskripsi Sekilas Tentang Isi Link... Coba Kalian Arahkan Cursor Ke Link ini 1. Masuk d...
