Monday, July 05, 2010

Membuat Fitur Tooltips



Efek tooltips adalah dimana pada saat di mouseover pada link url maka akan muncul pop-up tooltips, seperti di bagian top menu blog ini.

Namun tooltips ini masih belum sempurna, jadi harap maklum ya, silahkan sobat blogge memperbaruinya menjadi lebih baik lagi.

Langkah-langkah sbb :

1. Login ke blogger > rancangan > edit html, copy kode tooltips dibawah ini.
li.sfhover .tooltips, li:hover .tooltips {
display:block;
}
.tooltips {
margin:6px 6px 0 6px;
padding:15px 10px 15px;
position:absolute;
width:250px; >
display:none;
background:url(http://sites.google.com/site/ecaknyo/blog/image-ecaknyo-1/yellowsoftbgtooltips.PNG) bottom repeat-x;
opacity: 0.8;filter:alpha(opacity=80);zoom:1;
border:1px solid #FFFFFF;
-moz-border-radius:10px;
}
.tooltips {
margin-top:-50px;
margin-left:-290px;
}
.tooltips:hover {
display:none!important;
}
.tooltips p {
font-size:12px;
font-family:Rockwell;
font-weight:bold;
color: #0060C8;
text-align:center;
margin:0 15px 0 0;
}

2. Ctrl F cari kode berikut ini ' ]]></b:skin> ' dan paste kode tadi diatasnya, seperti contoh dibawah ini.
li.sfhover .tooltips, li:hover .tooltips {
display:block;
}
.tooltips {
margin:6px 6px 0 6px;
padding:15px 10px 15px;
position:absolute;
width:250px;
display:none;
background:url(http://sites.google.com/site/ecaknyo/blog/image-ecaknyo-1/yellowsoftbgtooltips.PNG) bottom repeat-x;
opacity: 0.8;filter:alpha(opacity=80);zoom:1;
border:1px solid #FFFFFF;
-moz-border-radius:10px;
}
.tooltips {
margin-top:-50px;
margin-left:-290px;
}
.tooltips:hover {
display:none!important;
}
.tooltips p {
font-size:12px;
font-family:Rockwell;
font-weight:bold;
color: #0060C8;
text-align:center;
margin:0 15px 0 0;
}

]]></b:skin>

Ket.

background:url
Gantilah dengan gambar backgroundnya, ukuran gambarnya disesuaikan, ganti yang berwarna biru.

border:1px solid #FFFFFF;
Untuk mengatur ketebalan dari garis border tooltipnya.

-moz-border-radius:
Untuk memberi efek lingkaran pada siku tooltips.

opacity: 0.8;filter:alpha(opacity=80);zoom:1;
Untuk mengatur tingkat transparansi tooltips.

margin-top:-50px;
Untuk mengatur posisi tinggi rendahnya tooltips.

margin-left:-290px;
Untuk mengatur posisi ke kiri-kanannya tooltips.

font-family:Rockwell;
Ubahlah dengan font yang sesuai keinginan.


3. Simpan template blog.


4. Ini kode untuk memanggil tooltips ini atau kode agar membuat tooltipsnya berfungsi.
<li><a href="http://.....url yang berkaitan dengan tooltips...." > judul url yang berkaitan dengan tooltips </a><div class="tooltips"><p> kata-kata untuk ditampilkan pada pop-up tooltips</p></div></li>


Contoh pengunaannya.
<li><img src="http://i466.photobucket.com/albums/rr22/wong284/arrow_download.gif" /><a href="http://www.ziddu.com/downloadlink/7138173/FarmFrenzy2.rar" > Game Farm Frenzy 2</a><div class="tooltips"><p>Permainan uji ketangkasan dalam mengelola lahan pertanian.</p></div></li>

Contoh gambar.





Selamat mencoba.