Gambar di bawah tidak diambil dari mana-mana. Ini adalah kreasi sendiri *naris mode sangat on*
Fuhhhh…. *menyepa keringat yang tersisa* Uhkk…uhk… kali ini saya update blog lagi *fans berat blog saya bersorak gembira dan menari2*
Yah, hari ini saya akan memuaskan para penggemar setia blog saya dengan sebuah tutorial.
Tutorial?
Iya. Sebenarnya ada beberapa opini yang hendak saya tuliskan namun mengingat tenggat waktu yang tersisa, kayaknya gak sempat deh.
Hmmmm, kabar kamu2 semua gimana? Baek2 aja kan? Gak ada sesuatu yang kurang kan? Klo ada yang kurang, tambahin aja *ngakak mode on*
Yang di sudut sana…………………………….
Yang lagi mojok………………………………..
Yang lagi jongkok…………………………….
Yang lagi @#$@$%#$WQ$!@$@#$%#$%#$%………………..
Yang…. ahh…. tape degh…..
Para pembaca….. Bapak2, Ibu2, kakak2, abang2, adek2, kakek2, nenek2 semua yang ada di sini………
Oke deh, saudara-saudari sekalian *dengan suara lantang kayak berpidato*, kali ini kita akan ujian… (ehhhh sori…..) maksud saya tutorial tentang membuat text box menjadi transparan. Bagi yang ngeres pasti langsung ingat baju cewek yang transparan alias “you can see”.
Oke deh… kita mulai aja ya…
Persiapan:
Sebuah komputer yang terdiri dari cpu, monitor, keyboard. Pokoknya lengkap deh. Klo gak punya, pinjem punya temen aja. hihihihihi *kabur* Web browser tester yakni Mozilla Firefox 0.5 Kg, Internet Explorer 2 ons, dan Opera satu sendok teh. (emang mau buat kue?) Sediain juga text editor seperti Notepad , Notepad++, Ultraedit, Vi, Vim boleh juga editor lainnya. Pake satu text editor aja dan sediain 1 siung text editornya ya… Mental yang kuat *jangan nangis klo belum pernah ngecoding* Semangat yang kuat *masa programmer cepet loyo klo kodingnya gak jalan?* Merdeka!!! Kesabaran *harus sabar klo koding kamu gak pernah jalan walaupun emang gak pernah dijalanin* wkwkwkwkwkwkwk…. Sosialitas yang tinggi *ini untuk apa yah?* Rasa solidaritas antar manusia dengan komputer. Cemilan secukupnya.. *boleh nasi, oncom, BPK, bagor, yang secukupnya. ato boleh juga bawang putih bagi yang doyan makan bawang putih* Cape ah.. kamu aja yang lanjutin… Langkah-langkah:
- Sediakan sebuah file html kosong. Isinya kira2 seperti dibawah ini. Untuk background imagesnya, kamu bisa menggunakan images apa aja dan jangan lupa untuk menyesuaikan width dan height table sesuai dengan width dan height dari images yang dijadikan sebagai background.
<html>
<head>
<title> Opacity </title>
</head><body>
<table background=”images/bg.jpg” WIDTH=”510″ HEIGHT=”103″>
<tr>
<td valign=top><INPUT TYPE=”text” NAME=”"> <INPUT TYPE=”button” value=”search”></td>
</tr>
</table>
</body>
</html>
- Liat tampilannya. Klo di kompie ku jadi kayak gini neh.
- Nah, sekarang kita mau membuat text box-nya menjadi transparan. So, tambahkan kode berikut ini diantara tag <head>..</head>
<style>
input.text {
filter: alpha(opacity=50);
}
</style>dan tambahkan class=”text” pada tag input untuk text box sehingga kode keseluruhan menjadi:
<html>
<head>
<title> Opacity </title>
<style>
input.text {
filter: alpha(opacity=50);
}
</style>
</head><body>
<table background=”foto aneh/bg.jpg” WIDTH=”510″ HEIGHT=”103″>
<tr>
<td valign=top><INPUT TYPE=”text” NAME=”" class=”text”> <INPUT TYPE=”button” value=”search”></td>
</tr>
</table>
</body>
</html>
- Coba jalankan di tiga browser yang saya sebutkan diatas. Gimana? Bisa gak jadi transparan? *saya mendengar keluhan para pembaca tutorial saya* Kenapa? Gak jalan di FF ya? *dengan gaya menenangkan* Oke2, kita solve satu persatu. Untuk browser Firefox tambahkan koding berikut agar transparan teks box-nya kelihatan.
-moz-opacity: .5;
tambahkan line code diatas pada tag <style> yang udah kita buat sebelumnya sehingga code style menjadi :
<style>
input.text {
-moz-opacity: .5;
filter: alpha(opacity=50);
}
</style>
- Coba jalankan lagi di 3 browser tadi. Udah jalan kan di Firefox? Kenapa? Di Opera gak jalan? Coba tambahkan lagi line berikut..
opacity: .5;
sehingga code keseluruhan menjadi:
<style>
input.text {
opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);
}
</style>
- sekarang coba jalankan kembali. *woi!!!! gann….!!!! kok gak bisa jalan di Opera ku?? Ganda di timpuk2*
Ohhh, iya akan saya jelasin. Opera 9 kebawah belum mensupport property opacity untuk css, jadi kamu harus donlot Opera 9 dulu dan coba kode html nya.
Cape ah… aku mau tidur dulu…..
huehehehehe panjang dan lengkap ni tutorialnya, thanks for sharing bro
Iya neh, manteb banget tutorialnya. Tapi gunanya untuk apa yach?
Nice tutorial bro….
Duh gua paling kagak demen nih yang namanya code2 gini. Buatin donk! Gua Trima jadi aja dech *gua bayar brapa aja..mau??*
oii..dah kw kerjain yang aku minta itu ??
cepetan, penting tw
wess.. klu gini kan ga malu aku dek ..
hahahaha
mantap.. mantap
waaaaaaa.. makasi tutorialnaaaa..!!
thx bro tutorialnya langsung di coba…
@xero:
you’re welcome bro..
@putra eka:
bisa kamu modif untuk mempercantik blog kamu. kamu bisa mengubah text-box search atau text area comment yang ada diblog kamu. coba aja deh..
@Zalukhu:
Tengkyu banget bro.. *menyembah-nyembah*
@29des:
Yeee… tinggal kopas koding aja kok.. Tapi klo gak mau, saya tawarin 100 juga dolar. Hayoooo… Gimana?? Mau bayar gak?? *nyiapin koper buat nyimpan duit dari 29des*
@okta sihotang:
sabar ya mbok. pagi ini saya presentasi. cepat ato pasti saya buatin kok. ciaaaaaat…………
@Ecko:
Emang aku pernah bikin malu ya bang? *pura2 gak tau*
@elmo:
makasih juga buat commennaaa…….!!!!
@duan:
oke bro. if found any difficulties to try this tutorial, please ask me here *gaya dosen mode on*