Selasa, 25 Januari 2011
Memasang Baloon Tooltip Dengan Kode CSS di Blog
Tutorial blog kali ini saya akan membahas tentang memasang Tooltip di blog. Bagi temen-temen yang belum tahu saya akan jelaskan Tooltip adalah tampilan informasi dalam bentuk teks (bisa juga gambar) yang muncul ketika kita melakukan mouse over ke dalam suatu item di website. Biasanya Tooltip berbentuk kotak kecil yang melayang di atas item tersebut. Jika temen-temen penasaran dapat dilihat disini. Klik pada tulisan Norah Jones maka akan muncul tooltip.
Jika temen-temen tertarik untuk membuatnya, berikut ini langkah-langkahnya :
1. Login ke Blogger Kalian
2. Masuk ke rancangan / tata letak
3. Pilih Edit HTML ( Back Up template dulu )
4. Cari kode ]]></b:skin>
5. Lalu sisipkan kode berikut diatas kode tadi
/*---------- bubble tooltip -----------*/6. SIMPAN template.
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/AVvXsEgJ6m4IoVzfFeIaoSrZLoi50mvQFElNAktr1p8lxGqOmhsaOCCraoN1_gz5v14Ff36VluilheepBhpiIK4cmyORvDrOK_l-aXSoDy4-xuQLnfPpqaaLe1EQOstKZ-y3TRfrwNDa9sq5V2M/) 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/AVvXsEg6BfNsyet5rHbBqz8xPFAalXeIP0eQ_ZxxSxAnxPteBfvFGWvFmiZqDkXR0WYxRFk5UPADD3HMgyR9u5qE1oatUHhRATs4gT37vQi2ONcFNe-__fAldFXVo8CwZT_arir0Z38n1qEh0bQ/) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ6m4IoVzfFeIaoSrZLoi50mvQFElNAktr1p8lxGqOmhsaOCCraoN1_gz5v14Ff36VluilheepBhpiIK4cmyORvDrOK_l-aXSoDy4-xuQLnfPpqaaLe1EQOstKZ-y3TRfrwNDa9sq5V2M/) no-repeat bottom;
}
Jika anda ingin menampilkan Balloon tooltipnya contohnya seperti kode di bawah ini :
<a href="Link yang akan dituju" class="tt">Teks Baloon Tooltip<span class="tooltip"><span class="top"></span><span class="middle">Isi dari Baloon Tooltip</span><span class="bottom"></a>
- Kode warna merah : text yang kalian tulis
- Kode warna biru : Link yang akan diberi tooltip
- Kode warna Hijau : keterangan didalam balloon tooltip
- Kode warna pink : Link tujuan
Gampang sekali kan? Itu tadi tutorial hari ini mengenai cara memasang Baloon Tooltip di blog. Jika ada yang mau copy paste silahkan saja, blog saya ini bebas kalau mau di copy di blog temen-temen. Selamat mencoba dan semoga bermanfaat.
Label:
tutorial blog