Dasar dasar html 4

Diposting oleh Hizrian di 17.24 | Sabtu, 24 Juli 2010 | 16 komentar

Selamat membaca artikel diblog ini semoga bermanfaat :)

Dalam Dasar dasar html 4 ini saya tidak membahas tag lagi karena telah saya bahas pada post:

Dasar dasar html 3

Dasar dasar html 2

Dasar dasar html 1

Sekarang saya akan membahas bagaimana cara menambah CSS dalam Bahasa HTML.
Sebagai contoh saya akan mempraktekkan cara membuat Bubble tooltips 100% menggunakan CSS.
Caranya seperti berikut:

Cari code <body>
Dibawah code tersebut tambahkan code dibawah ini
<style type="text/css">
....
</style>
Ganti code yang berwarna merah dengan code css berikut:
/*---------- balon tips -----------*/
a.bt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}

a.bt span{ display: none; }

/*background:; ie hack, harus mengubah sesuatu untuk menampilkan di IE*/
a.bt:hover{ z-index:25; color: #aaaaff; background:;}

a.bt:hover span.balontips{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}

a.bt:hover span.atas{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIKCbbwlmycIzj5XXGE9BA4pHEh9YVgEfgifEEhfM_DfUPIbN5h1yB7sEKxxPr4y5mqTiyCI03GSukpPOF-pwKuz2vHW0U45J18X6VzB24Rx3pV5vz85APXMjheAY9E51Hy_vM-5jis0U/) no-repeat top;
}

a.bt:hover span.tengah{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAuzrWOxtFDg3M3CmMAK4kv8iisTez1cFFSYy0Mq2ID4Y6aO-05KjmA-Dlxp7Lr8wORwrrzqPVVJl-4xd0KsbCaxGcBJE1mcV3s2HkrNJBVPNkkaN5s6J2149tAPl5QHUwAYl2M4SJZmQ/) repeat bottom;
}

a.bt:hover span.bawah{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIKCbbwlmycIzj5XXGE9BA4pHEh9YVgEfgifEEhfM_DfUPIbN5h1yB7sEKxxPr4y5mqTiyCI03GSukpPOF-pwKuz2vHW0U45J18X6VzB24Rx3pV5vz85APXMjheAY9E51Hy_vM-5jis0U/) no-repeat bottom;
}

/*---------- balon tips END-----------*/
Untuk menggunakan code css tesebut caranya seperti ini:
Dibawah code </style> Pastekan code berikut:
<a class='bt' href='#'>FAQ'S<span class='balontips'>
<span class='atas'>
</span>
<span class='tengah'>
Tulis apa aja tentang FAQ'S!
</span>
<span class='bawah'>
</span>
</span>
</a>
Maka hasilnya seperti ini:

16 komentar :

GudangBlog mengatakan...: Thanks kang... Infonya bagus-bagus...
Dapat Ilmu lagi dari K-Blogger; 24 Juli 2010 pukul 17.52
Unix Creative Group mengatakan...: ini bahasa pemrograman ya...?

keren....; 24 Juli 2010 pukul 18.04
Lutfi Setiyawan mengatakan...: ini bahasa CSS sob, bukan pemrogaman ^_^ hhehehee; 24 Juli 2010 pukul 19.07
o'o mengatakan...: memang klo seperti ini bukan hal rumit bgi master2 ,,,tpi bgi newbie ,,,klabakan,,,hehehe; 24 Juli 2010 pukul 19.56
Manchester United Tech mengatakan...: makasih infonya sob...

happy blogging!!; 24 Juli 2010 pukul 20.39
tips dan informasi terkini mengatakan...: ditunggu posting terbarunya... ane bljr html disini aja deh... hehehe; 24 Juli 2010 pukul 20.45
Prian Jaya mengatakan...: Thx,, tutorialnya menarik..; 24 Juli 2010 pukul 21.04
Belajar SEO mengatakan...: Mengikuti perkembangan dari sini :); 25 Juli 2010 pukul 01.59
CongCot mengatakan...: contoh posting ni saya mau coba; 27 Juli 2010 pukul 03.31
Denny's blog mengatakan...: hmmm,...
kayaknya ahli dalam HTML nie..
hehehe...
mantep sob..
saya suka dengan yang beginian .
berharap untuk bisa diajarin HTML..
^_^; 27 Juli 2010 pukul 03.42
PIK Remaja Al-Hikmah mengatakan...: Makasih infonya, jadi tau tentang html nich; 27 Juli 2010 pukul 04.23
WOObuzz | All Tips mengatakan...: Ternyata CSS bisa si buat dari HTML juga ya... mantep banget. ditunggu tutorial berikutnya..; 27 Juli 2010 pukul 04.39
febriyanto mengatakan...: mantep ilmunya gan........ tapi kok panjang bgt y.... enakan yg biasa aj dh kyknya... ga perlu css... hhe; 27 Juli 2010 pukul 06.59
AkuJagoan.Com mengatakan...: Isi nya HTML semua nih SOb...Kau Memang berbakat menjadi blogger ...; 30 Juli 2010 pukul 02.19
Yuda Kurniawan mengatakan...: waduh ribet nih sob,, saya gak ngerti yang kayak gini. Eh katanya HTML sudah ada HTML 5 yah?; 31 Juli 2010 pukul 17.55
Ka Damar mengatakan...: klo tooltips make banyak HTML y; 4 Agustus 2010 pukul 03.35