Home
Tukaran Link
Pasang Iklan
Contact Me
Cara Mudah Membuat Tooltip Dengan Kode CSS
Tooltip merupakan suatu fasilitas yang berguna untuk memberikan keterangan 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 di Blog
Anda bisa menggunakan tooltip ini di postingan atau di bagian lain blog anda. Kodenya:
<a class='tip' href='#'>kesini<span>Tooltip merupakan suatu fasilitas yang berguna untuk memberikan keterangan sesuatu yang sedang dituju oleh pembaca.</span></a>
Hasilnya: Kesini donk...Tooltip merupakan suatu fasilitas yang berguna untuk memberikan keterangan sesuatu yang sedang dituju oleh pembaca.
Gimana? Mudahkan?
Jangan lupa kasih komentar ya...
Bagikan Artikel Ini!
:))
:)]
;))
;;)
:D
;)
:p
:((
:)
:(
:X
=((
:-o
:-/
:-*
:|
8-}
~x(
:-t
b-(
:-L
x(
=))
14 komentar:
hmm...begitu maksudnya, maklum belum ngerti soal yang begianian sob, harus banyak blajar disini...
Ya.. Karena itu rajin aja berkunjung...
Bagus juga dengan dipasang tooltip, tapi adakalanya hal ini dirasa agak mengganggu bagi sebahagian orang. Good job brother
Bagus kawann..
makasih ya bos atas infonya
Gan Sebelumnya minta maaf,dava kan baru mengenal bloger,jdi kurang begitu paham bagai mana menempatkan toltip nya itu,tolng gan pencerahannya,...
Sekali lagi maaf,gan udah merepotkan maklum msh katro..
Mantab gan.... makasih yach gan atas infonya. aku masih newbii nich gan, gak begitu paham soal blog. :)
Salam kenal... :D
siiiip
Saya masih kurang mengerti tooltip itu apa. Ada gambarnya atau demonya mas biar Saya lebih bisa mengerti? Makasih sebelumnya mas ..
makasi atas infonya
Mksih kak buat tutorial membuat Tooltip ini ..
Sangat-sangat bermanfaat ^^.
thanks atas tutorialnya
Saya Sangat BerTerima kasih Atas Bantuan Angka Ritual MBAHâ?¦Angka MBAH EROK PRANAL Tembus 100%â?¦Saya udah kemana-mana mencari angka yang mantap selalu gak ada hasilnyaâ?¦sampai- sampai hutang malah menumpukâ?¦tanpa sengaja seorang teman lagi cari nomer jitu di internetâ?¦Kok ketemu NomoR MBAH EROK PRANAL..Saya coba beli Paket 4D ternyata Tembusâ?¦dan Bagai di sambar Petir..Ternyata Angka Ritual Ghoib MBAH EROK PRANALâ?¦Yang SaYa Minta Tembus 4Dâ?¦Baru kali ini saya mendapat angka ritual yang benar-benar Mantapâ?¦Bagi saudara yang ingin merubah Nasib seperti sayaâ?¦Anda Bisa CALL/SMS Di Nomer MBAH EROK PRANAL 085 377 797 151.(((Buktikan Aja Sendiri Saudara-Saudari)))
This is the precise weblog for anybody who needs to seek out out about this topic. You notice so much its almost arduous to argue with you. You positively put a brand new spin on a subject that's been written about for years. Nice stuff, simply nice!