- Kelebihan dari tooltip ini yaitu secara otomatis akan muncul pada setiap link yang ada pada blog kita. Tooltip ini menampilkan Alamat URL dari suatu link disertai dengan gambar . Untuk contoh, silahkan lihat gambarnya diatas , Atau arahkan cursor anda pada setiap link di blog ini
- Langsung aja sobat untuk Langkah-langkahnya silahkan Klik Open dibawah ini
Untuk membuat tooltip ini login dulu ke blog anda , dan ikuti langkah-langkah dibawah ini ;
- Pilih Rancangan
- Pilih EDIT HTML (centang Expand template widget)
- Sekarang simpan kode CSS berikut diatas kode ]]></b:skin>
/* Start Tooltip Animasi */
body div#toolTip {
position:absolute;
z-index:1000;
min-width:100px;
background:#000 url(
http://i1206.photobucket.com/albums/bb455/binkbenk/elmodance.gif)no-repeat center ;
border:2px double #E80101;
text-align:center;
padding:10px;
min-height:100px;
-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;
}
body div#toolTip p {
margin:0;
padding:0;
color:#FF8000;
font:12px/12px trebuchet MS,arial,sans-serif;
font-weight:bold;
}
body div#toolTip p em {
display:block;
margin-top:3px;
color:#585858;
font-style:normal;
font-weight:normal;
}
body div#toolTip p em span {
font-weight:bold;
color:#FF8000;
}
/* End Tooltip Animasi*/
- Lalu letakan kode javascript dibawah ini tepat diatas kode: </head>
<script src='http://cueros.googlecode.com/files/tooltipURL.js' type='text/javascript'/>
<script src='http://cueros.googlecode.com/files/Tooltipz33s.js' type='text/javascript'/>
- Kode Url warna biru silahkan ganti dengan Url gambar Sobat , bisa juga anda ganti dengan foto sobat ..
- Kode (-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;) silahkan rubah ukurannya , supaya menghasilkan bentuk yang berbeda
- Lalu Simpan template
Selamat mencoba
Posted On : 6 September 2011 Time : 22.50
