CSS Bubble Tooltips
Ingin blog anda lebih variatif? mungkin anda bisa menggunakan teknik CSS Bubble Tooltips. Dengan CSS Bubble Tooltips anda dapat memberikan syatu keterangn singkat suatu link yang di inginkan dan keterangan ersebut akan muncul apabila pengunjung blog menyorotkan cursor mouse pada link yang anda beri efek tooltips.
Silahkan arahkan mouse komputer anda pada link yang ada pada halaman tersebut, dan seharusnya ada akan melihat efek bubble tooltips.
Teknik Tooltips yang dipakai adalah 100% menggunakan CSS, jadi tentunya tidak akan terlalu membebani loading blog anda. Cara untuk mengimplementasikan CSS Bubble Tooltips terbilang sangat mudah, berikut caranya.
Langkah #1
Contoh :
Langkah #2
Untuk mencoba memasang di bagian sidebar, berikut caranya :
< (((((((( \\\\\\\\\\\\\\\\\\\\ LIve Demo ///////////////////// )))))))) >
Silahkan arahkan mouse komputer anda pada link yang ada pada halaman tersebut, dan seharusnya ada akan melihat efek bubble tooltips.
Teknik Tooltips yang dipakai adalah 100% menggunakan CSS, jadi tentunya tidak akan terlalu membebani loading blog anda. Cara untuk mengimplementasikan CSS Bubble Tooltips terbilang sangat mudah, berikut caranya.
Langkah #1
- Silahkan login ke blogger dengan ID anda.
- Klik Tata Letak.
- Klik Tab Edit HTML.
- Jangan lupa untuk Membackup template anda terlebih dahulu, klik link Download Template Lengkap.
- Silahkan cari kode ]]>
- Copy lalu paste kode berikut diatas kode ]]> /*---------- 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/AVvXsEggNSpaSFd9dO4E7HYVcKAQlaAc3t7usKeTyj41ALGDy8VO2xduQuEpd5xDgcgdRHm9U8rLm8Bn8E3dYlWp46K5idnLYkgxwTVrYSSR3pVIlvDkCYXnsCxXePL61am_AhgBgiVgHinp7Bo/) 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/AVvXsEibqYkE03OAfZN56DIQwLM-LH_8bmgJAKnuFizOawuSdoDRQ9_ltUYMaX4xa4sB8gT54cPoD9BGTkV8orJkyZyyHLjaD-9h43UpDQlzaZPxo1EzsbnnWUNiGQBlvnYnMR2-pSuDjvTxSFI/) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggNSpaSFd9dO4E7HYVcKAQlaAc3t7usKeTyj41ALGDy8VO2xduQuEpd5xDgcgdRHm9U8rLm8Bn8E3dYlWp46K5idnLYkgxwTVrYSSR3pVIlvDkCYXnsCxXePL61am_AhgBgiVgHinp7Bo/) no-repeat bottom;
}
- Klik tombol SIMPAN TEMPLATE.
- Langkah pertama selesai.
class="tt">Teks link yg munculPesan yang akan muncul
Contoh :
Bagi yang ingin belajar membuat blog di blogspot, coba kunjungi deh class="tt">Kolom Tutorialpanduan lengkap membuat blog di blogspot, di jamin puas karena tutorialnya gratisss.
Langkah #2
Untuk mencoba memasang di bagian sidebar, berikut caranya :
- Silahkan login ke blogger dengan ID anda.
- Klik Tata Letak.
- Klik tab Elemen Halaman.
- Klik Tambah Gadget.
- Klik tanda plus (+) untuk HTML / Javascript
- Masukan kode link yang anda inginkan ( lihat kode diatas).
- Klik SIMPAN.
- Selesai.
Silahkan mencoba!
0 komentar: