CARA MEMBUAT TOOLTIPS DI BLOG

Pada saat pertama kali Education for all mengunjungi blog tetangga EFA sangat terpesona ketika mose EFA menyentuh links tiba tiba muncul descripsi atau keterangan dari links tersebut, sehingga EFA bertanya tanya bagaimana cara membuatnya. sehingga EFA mencari cari atau istilahnya blogwalking dari satu blog ke blog yang lain dan tak satupun EFA menemukanya. ada sih beberapa blog yang mencoba meneragkan tapi tak membuat EFA cukup mengerti. sehingga EFA mencoba dari snapshot, ternyata bukan. akhirnya setelah lama mencari cari ketemu juga yaitu dari blog tetangga  http://ecaknyo.blogspot.com  dan EFA coba untuk membuatnya alhamdulilah berhasil. Contoh Tooltips untuk di Postingan.. coba kalian MouseOver Link di bawah ini atau pada link Artikel education for all yang ada diwidget sebelah kiri :

cara membuat tooltip di blog

Jangan heran seperti saya dulu ketika mose menyentuh kursor maka akan keluar deskripsi blog. Lengkapi blog sobat dengan tooltip

Apabila sobat blogger berniat untuk membuatnya silahkan ikuti langkah langkah berikut ini:

Login ke Blogger > Rancangan > Edit HTML ...lalu Copy kode ToolTips dibawah ini..dan letakan diatas kode ]]></b:skin>

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://i1128.photobucket.com/albums/m493/wonglampung1/hitam.jpg ) 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;
}

Ket :

background:url(http://i1128.photobucket.com/albums/m493/wonglampung1/hitam.jpg ) = Gantilah dengan URL gambar background kamu sendiri.. tetapi usahakan ukuran gambarnya disesuaikan... silahkan ganti yang berwarna merah

border:1px solid #FFFFFF; = Untuk mengatur ketebalan dari garis border ToolTipnya.. disini saya memakai 1px dengan warna border putih.. silahkan ganti yang berwarna biru...

-moz-border-radius: = Ini untuk memberi efek Lingkaran pada siku gambar tooltips.. semakin besar nilainya maka hasilnya akan semakin berbentuk lingkaran... jadi biarkan saja default 10px..

opacity: 0.8;filter:alpha(opacity=80);zoom:1; > angka berwarna biru ini untuk mengatur tingkat Transparansi ToolTips... aturlah sesuka kalian...

margin-top:-50px; = Untuk mengatur posisi Tinggi rendahnya Tooltips... ubah angka yang warna biru...
margin-left:-290px; = Untuk mengatur posisi ke kiri-kanannya Tooltips... ubah angka yang warna biru...

font-family:Rockwell; = Kata yang berwarna biru ini ubahlah dengan font yang sesuai dengan keinginan  sobat blogger mania. jika sudah selesai jangan lupa simpan template
Perhatikan kode untuk memanggil tooltips ini atau kode agar membuat tooltips -nya 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>
 

   
Ket :
> Yang saya warnai merah adalah kode terpenting.. jadi jika kalian terlupa memasukannya maka tooltips-nya tidak akan berfungsi...  


Contoh Pengunaannya... yang digunakan pada widget HTML/Javascripts.. (bisa juga sobat gunakan pada postingan  

<li><a href='http://fajar7siblings.blogspot.com/2011/08/cara-memperlebar-kolom-dan-halaman-blog.html'>Cara Memperlebar Kolom dan Halaman Blog</a><div class="tooltips"><p>   Cara Memperlebar Kolom dan Halaman Blog</p></div></li>

Contoh ToolTips Nyatanya ada di Blog saya ini.. Coba kalian MouseOver Isi Menu pada Bagian widget artikel menu education for all di sebelah kiri Blog ini..

 
  


    

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «