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(
=))
11 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 ^^.