Pengertian Bubble Tooltips -Mungkin sebagian dari bogger sudah mengenal tentang Tools satu ini, tools ini sangat menarik jika diterapkan Diblog kita, bagaimana tidak? karena tools ini bisa membuat Blog kita lebih profesional.
Bubble tooltips akan menampilkan keterangan tambahan jika kursor mouse diletakkan/saat melewati link akan memberikan keterangan yang unik dengan efek seperti ballon, bagaimana apakah anda tertarik menggunakan Bubble Tooltips di blog anda? Silahkan ikuti langkah-langkah ini.
#Langkah pertama yang harus dilakukan :
1. Silahkan Login ke dashboard Blog sobat.
2. Buka halaman Template kemudian lanjut ke EDIT HTML
3. Kemudian cari kode ]]></b:skin> menggunakan CTRL + F agar lebih cepat.
4. Setelah ketemu silahkan Copy paste Kode dibawah ini tepat Diatas kode ]]></b:skin>
------------------------------------------------------------------------------------------------------------------
/*---------- bubble tooltip-----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3ZvV_bHBf9gqP4xmPTDsE4cS24k_Ak0ysYxjdUPchrRNBKkBt8F6_EP01DTPuOG8TS8xG5p2ZMo52NILR9gotVyX0hwY6G-i0Cx-BlBdcI1YxtJe0xc3k6lrkWtAD9jwEg6Rvh1tJxy4/s320/bubble-712378.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRI3y6cJ5zsV9lcnjtpqNfUaDMZSkyVYFjrBH75ENSLaKIO7S_EMeAgd7Ngdq6RVAXLZqPQVKCh2qnh8cKuQ4j3-IXzZsFAoD_-i59mo1yiQcj1T-tAWg5NiE3DzZTiJneHTUtqf5BF4w/s320/bubble_filler-711451.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3ZvV_bHBf9gqP4xmPTDsE4cS24k_Ak0ysYxjdUPchrRNBKkBt8F6_EP01DTPuOG8TS8xG5p2ZMo52NILR9gotVyX0hwY6G-i0Cx-BlBdcI1YxtJe0xc3k6lrkWtAD9jwEg6Rvh1tJxy4/s320/bubble-712378.gif) no-repeat bottom;
}
-------------------------------------------------------------------------------------------------------------------
5. Kemudian lanjutkan dengan memasukan Kode dibawah ini
-------------------------------------------------------------------------------------------------------------------
<a href="alamat_link" class="tt">nama_link
<span class="tooltip">
<span class="top"></span>
<span class="middle">
teks_yang_tampil_di_bubble_tooltips
</span>
<span class="bottom">
</span>
</span>
</a>
______________________________________________________________________________
KETERANGAN :
Untuk tulisan yang berwarna Biru silahkan ganti dengan ALAMAT LINK
Untuk Tulisan yang berwarna merah Ganti dengan Keterangan Link
Setelah itu save template dan coba lihat hasilnya diblog sobat, apakah sudah sesuai seperti yang diharapkan atau belum, jika ada masalah silahkan hubungi sya, lakukan pratinjau terlebih dahulu sebelum save template. Happy Blogging.
No comments:
Jangan hanya dibaca saja.Berkomentarlah dengan sopan