Mengenai Saya
Label
Entri Populer
-
Setelah sebelumya ane menjelaskan Cara Membuat Blog Di Blogspot I Tutorial Membuat Blog , pada postingan ane kali ini, ane akan menjelaskan ...
-
A pakah sobat memasang buku tamu dengan mengunakan shoutmix ? Bagaimana rasanya setelah terpasang ? Tentu semakin seru saja kan, wa...
-
Haii sobat :), di kala senja dan hujan ini ane akan membagikan sembako Cara Membuat Follow Twitter Berbentuk Burung I Tutorial Widget B...
-
Postingan kali ini ane tujukan bagi kamu yang gemar menulis artikel , kenapa? ya sesuai judulnya, maka kita akan mendapatkan uang dengan ...
-
Sobat pasti pernah bookmarks situs kesayangan di browser milik sobat, ini agar supaya mudah sewaktu-waktu kembali ke situs atau website ters...
Diberdayakan oleh Blogger.
Jumat, 23 Mei 2014
Setelah cukup lama tidak update dan mumpung ada kesempatan,kali ini saya ingin berbagi pada teman blogger khususnya blogger baru yang mungkin masih belum tahu bagaimana membuat tooltip dengan menggunakan css. Saya memilih untuk menggunakan tooltip dengan css ini karena menganggap cukup ringan dari pada dengan menggunakan javascript.
Untuk membuatnya sobat bisa menggunakan cara di bawah ini:- Seperti biasa login ke blog sobat.
- Pilh tata letak.
- Klik edit html.
- Letakkan kode di bawah ini di atas kode ]]></b:skin>hingga posisinya sbb:
.tooltip {position:relative;}
.tooltip span {display:none;}
.tooltip:hover span {
display:block;
position:absolute;
width:200px;
left:20px;
top:20px;
background-color:#006633;
border:3px solid #0099FF;
padding:5px;
font-size:15px;
color:#000000;
text-decoration:none;
font-family:Verdana,arial, helvetica, sans-serif;}
]]></b:skin>
- Kemudian klik simpan.
- <a href="http://activekita.blogspot.com/2010/04/membuat-tooltip-dengan-menggunakan-css.html" class="tooltip"><span>MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSS</span>Tooltip</a>
Ganti link yang dicetak merah dengan link milik sobat.
Sedang yang berwarna hijau adalah text yang akan keluar,bisa diganti dengan text yang sobat inginkan.
Jika ingin mengganti background dengan sebuah gambar, maka sobat cukup menganti background-color:#006633; dengan alamat gambar milik sobat.
Cara menulis kodenya seperti di bawah ini:
background:url("http://i761.photobucket.com/albums/xx252/darma_bucket/gambar10.jpg")no-repeat bottom;
Ganti alamat gambar yang dicetak merah dengan alamat gambar milik sobat.
Contoh hasilnya kurang lebih seperti di bawah ini.
Untuk melihat hasilnya arahkan mouse pada link di bawah.
MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSSTooltip
Langganan:
Posting Komentar
(Atom)
0 komentar:
Posting Komentar