TopBottom

Blog Tutorial

About Me

Add your donation here for a better of our service. Thanks!

Berlangganan

Anda Suka Tips Blogger Zacky?
Temukan Kami Di:
Ingin Dapat Artikel Terbaru?
rss Klik disini untuk berlangganan melalui RSS atau terima artikel di email anda dengan cara mengisi form berikut:

Cara Mudah Membuat Tooltip Dengan Kode CSS

Original by IFX Adrian | 07 Februari 2010 15 Comments

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...

Label:

Bagikan Artikel Ini!

<a href="http://instaforex.com/forexcopy_system.php?x=DVXF">InstaForex</a>
Facebook Delicious Digg! Twitter Linkedin StumbleUpon Lintas Berita
Technorati Google Bookmarks Mixx Yahoo! Newsvine Reddit

Artikel Lain Yang Mungkin Anda Baca

15 komentar:

setting gprs 7 Februari 2010 18.29  

hmm...begitu maksudnya, maklum belum ngerti soal yang begianian sob, harus banyak blajar disini...

Zacky Adrishayuni 7 Februari 2010 18.49  

Ya.. Karena itu rajin aja berkunjung...

Yayan 28 Februari 2010 21.40  

Bagus juga dengan dipasang tooltip, tapi adakalanya hal ini dirasa agak mengganggu bagi sebahagian orang. Good job brother

dhirgham 21 April 2010 05.45  

makasih ya bos atas infonya

Dava_line09 30 Juli 2010 12.01  

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..

loewyi 16 September 2010 08.10  

Mantab gan.... makasih yach gan atas infonya. aku masih newbii nich gan, gak begitu paham soal blog. :)
Salam kenal... :D

Deny 30 April 2011 22.06  

Saya masih kurang mengerti tooltip itu apa. Ada gambarnya atau demonya mas biar Saya lebih bisa mengerti? Makasih sebelumnya mas ..

devilz-adrian 7 Februari 2013 12.12  

Mksih kak buat tutorial membuat Tooltip ini ..
Sangat-sangat bermanfaat ^^.

ridho bul Ridhobul 6 Juni 2015 22.44  

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)))

sherlina halim 15 Oktober 2015 02.19  

Pengen yang lebih seru ...
Ayo kunjungi www.asianbet77.com
Buktikan sendiri ..

Real Play = Real Money

- Bonus Promo Red Card pertandingan manapun .
- Bonus Mixparlay .
- Bonus Tangkasnet setiap hari .
- New Produk Sabung Ayam ( minimal bet sangat ringan ) .
- Referal 5 + 1 % ( seumur hidup ) .
- Cash Back up to 10 % .
- Bonus Royalty Rewards setiap bulan .

Untuk Informasi lebih jelasnya silahkan hubungi CS kami :
- YM : op1_asianbet77@yahoo.com
- EMAIL : melasian77cs@gmail.com
- WHATSAPP : +63 905 213 7234
- WECHAT : asianbet_77
- SMS CENTER : +63 905 209 8162
- PIN BB : 2B4BB06A / 28339A41

Salam Admin ,
asianbet77.com

Download Disini

Mobile App Developers 4 November 2015 11.46  

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!

Poskan Komentar