Siang-siang begini sambil menunggu waktunya sholat jum'at mendingan belajar berbagi aja deh..."Membuat Tooltip" yaa, itulah topik kali ini.... tooltip ialah berguna untuk memberikan keterangan sesuatu yang sedang dituju oleh pembaca. ketika kursor kita diarahkan ke kata tertentu yang sudah di beri tooltip maka akan muncul keterangan tentang kata tersebut. tooltip ini bisa kita aplikasikan ke postingan dll.
mari kita berbagi....
- Login Ke Blogger
- Pilih Tata Letak >>> Edit HTML
Perhatian!!! Saya sarankan Anda untuk membackup dulu template anda dengan mengklik full download template|
- cari kode ]]></b:skin> dan copas(copy/paste) code di bawah ini tepat di atasnya :
a.tip {position:relative}
a.tip span {
display:none;
padding:5px;
z-index:100;
background:#000;
color:#fff;
text-decoration:none;
width:200px; /* lebar tooltip */
height:auto;
-moz-border-radius:2px;
-webkit-border-radius:2px
}
a:hover.tip {
font-size:99%;
cursor:pointer
}
a:hover.tip span {
display:block;
position:absolute;
-moz-opacity:0.7;
opacity:0.7;
font-size:12px;
font-weight:normal;
}
a.tip span {
display:none;
padding:5px;
z-index:100;
background:#000;
color:#fff;
text-decoration:none;
width:200px; /* lebar tooltip */
height:auto;
-moz-border-radius:2px;
-webkit-border-radius:2px
}
a:hover.tip {
font-size:99%;
cursor:pointer
}
a:hover.tip span {
display:block;
position:absolute;
-moz-opacity:0.7;
opacity:0.7;
top:auto;
left:auto;
right:2px;
bottom:auto;
line-height:14px;font-size:12px;
font-weight:normal;
}
Untuk mengatur posisi tooltip anda bisa mengaturnya dengan mengganti kode yang berwarna biru, gunalanlah kreativitasmu
Jangan Lupa Save Template Anda
- Untuk menampilkan Tooltip di postingan harus memakai code di bawah ini :
<a class='tip' href='#'>kata yang di tooltip<span>tooltipnya/informasi kata berada disini</span></a>
Hasilnya :
kata yang di tooltiptooltipnya/informasi kata berada disini
NB: kode di atas bisa ditulis di dalam mode compose ataupun Edit HTML
Posting Komentar
Budayakan Berkomentar Setelah Membaca dan Tolong Jangan Menaruh SPAM, Terima Kasih....