Home » » Cara Membuat Tooltip pada Blog
| 2 komentar ]

Bagi teman-teman yang pingin Tooltip Seperti Ini...Tooltip merupakan suatu fasilitas yang berguna untuk memberikan keterangan sesuatu yang sedang dituju oleh pembaca. silahkan baca aja trus tutorialnya ya...! Tooltip merupakan suatu fasilitas yang berguna untuk memberikan keterangan pada sesuatu yang sedang dituju oleh pembaca. Ada beberapa cara untuk membuat tooltip tersebut. Untuk permulaan, sekarang saya akan menjelaskan trik dasarnya yaitu dengan menggunakan kode CSS.

Menyiapkan Kode CSS
1. Login ke akun Blogger anda, lalu pilih Layout > Edit HTML

2. Cari kode ]]></b:skin>, lalu paste kode css berikut 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;
top:auto;
left:auto;
right:2px;
bottom:auto;
line-height:14px;
font-size:12px;
font-weight:normal;
}



Untuk mengatur posisi tooltip, ada bisa mengaturnya dengan memainkan kode top:auto; left:2px; right:auto; bottom:auto;.

3. Klik Save Template.


Menerapkan Tooltip pada Blog



<a class='tip' href='#'>kesini<span>Tooltip merupakan suatu fasilitas yang berguna untuk memberikan keterangan sesuatu yang sedang dituju oleh pembaca.</span></a>





Dan hasilnya Seperti Ini...Tooltip merupakan suatu fasilitas yang berguna untuk memberikan keterangan sesuatu yang sedang dituju oleh pembaca.

Mudah bukan?

Selamat mencoba....



Share |

Artikel Terkait :



2 komentar

sHinDu mengatakan... @ 17 Mei 2010 01.02

thx, infonya... sangat berguna~!

Last Memoar mengatakan... @ 20 Desember 2010 13.28

thanks info na

Poskan Komentar

Recent Reader

GET UPDATE VIA EMAIL
Dapatkan artikel terbaru langsung ke email anda!