Whats Your Style Css Styling | Css Si Tukang Sulap

Assalamualaikum Warrahmatullahi-wabarokattu

CSS sama JavaScript adalah Tukang Sulap yang lumayan handal dalam dunia ~~Persilatan~~ Blog bahkan Web sekalipun. Mereka bisa Ngacak-acak tampilan sebuah Blog (maupun web) melalui sebuah Postingan (Blog Post) atau melalui sebuah Blog Gadget (Widget).

Okay, kita liat sampe dimana kemampuan mereka :D

Coba pasang CSS berikut di dalem Gadget HTML/JavaScript atau di dalem Postingan Blog elo (Blog Post)..

<style type="text/css">body {  background-color:black;  background-image:none;  color:black;}</style>

Coba liat hasilnya..

CSS di atas nyeting bagian body dari halaman dengan settingan..

background-color:black;: (warna bekgron jadi hitam)
background-image:none;: (gambar bekgron jadi hilang/gak ada)
color:black;: (warna text jadi hitam)

Masih kurang seru ya? :D

Coba gimana kalo yang ini..

<style type="text/css">div {  background-color:white;  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgneUuXRbfxFYjhkUA5f5E57fmKqg1QV8Ens-GmT-FEjQL_JIG-OtM6miyJYy3i7aNzEDZhmMBLg5gEchwZuIkj_LkAhyo8vuihjTZTweBoOo65NVy0GFGR_apQWBzdO7K6ewZfAvw33046/s1600/27394.jpg);  background-repeat:no-repeat;  background-position:center center;  background-attachment:fixed;  color:black;}</style>

Coba liat hasilnya..

Udah segitu aja dulu ya,, mau mandi nih udah siang bau :P

tar kapan-kapan di lanjut lagi deh.. (Stay Tune..!)

Kalo cuman buat baca-baca mah lengkap nih di..

www.w3schools.com/css/default.asp

Sekarang gw udah selesai mandinya :P ..

Mau Lanjut..?

Sekarang Blog ini udah Gw Kuasain :D, wkwkkk.. itulah hebatnya Sulap si CSS sama JavaScript xP..

Buat ngebikin style tampilan kaya gini tentunya bukan cuman CSS doang yang lo perluin, butuh bantuan JavaScrip lah seenggaknya kan?

Okay, ini dia trick-nya..

Kita bikin satu div lengkap dengan idnya (misal id="isiSulap") terus dikasih style="display:none;"

yang maksud dan tujuannya biar div itu gak di tampilin sama Browser

(display itu tampilan, none itu gak ada (gitu kan?))
```
<div id="isiSulap" style="display:none;">di sini entar di isi sama postingan elo (misalnya)</div>
```
Kita bikin Script buat ngebaca isi dari div yang tadi kita bikin dan kita isi

(udah di isi belom? isi dong.., masa kosong sih :P)
```
<script type="text/javascript">var bacaDivIsiSulap = document.getElementById('isiSulap').innerHTML;</script>
```

Kita bikin sebuah Javascript function buat nge-eksekusi trick sulap kita

(disatuin aja sama script diatas) jadi kaya gini..

<script type="text/javascript">var bacaDivIsiSulap = document.getElementById('isiSulap').innerHTML;function eksekusiTrickSulap(){  document.body.innerHTML=bacaDivIsiSulap;}</script>

Kita bikin satu tombol yang kalo pas dipencet bakal manggil Javascript function yang tadi kita bikin..

<b class="tombolPencet" onClick="eksekusiTrickSulap();">Mau Liat Sulap? Click Gue..</b><!--Perlu CSS buat ngebikin tombol jadi lebih keren :P--><style type="text/css">b.tombolPencet {  margin:2px 2px 0px 0px; -moz-border-radius:5px; border-radius:5px;  padding:2px 5px;  border:1px outset blue;  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIKW-5xT6HpPosYp72CnV_Ic1B5RVRSXPa9GnKdGKHZUOHZaVaY5SvfnwwvmrovyT2V_8oN8rNZSNNgb_A1GycFB4nWm4ycfy9UlTUaskRdvpBYzekqze98h-G61OT5KWZkJ17W5NTM_mP/s1600/biru25.png);  color:white;  display:inline-block;  cursor:pointer;}b.tombolPencet:hover {  padding:1px 4px;  border:2px outset skyblue;  color:yellow;  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWJY8desEp9Iny6iBigzcSc5eYTantn608Jv5KNqdf6k3mH22z7UzYZUxaIaxQYolMizqTk2Apt8PyS2NKJFzRMHQ1_NZIGO5Y6KNSXnNoOV5WLTZQuRZpQnAQr6uH-KZ0ojvpKXnxNc53/s1600/green25.png);}</style>

Udah kelar (kayanya..) coba deh..,, jalan gak?

Catetan:: Buat isi div id="isiSulap"nya elo bisa pake conto dibawah ini (kalo elo mau)
<div style="width:520px; margin:20px auto auto; background-image:url(http://1.bp.blogspot.com/_bBL9ze_JZsw/TT_VysqlknI/AAAAAAAAAMs/OgtZMowV_m4/s1600/black50.png); -moz-border-radius:5px; border-radius:5px; padding:10px; color:#ddddcc;"><div id="laguDong"></div><p>Belom ada isinya.. :P<br/><b class="tombolCoba" onClick="window.location.replace('http://farhan-creativity.blogspot.com/2012/02/whats-your-style-css-styling-css-si.html')">Click Here to Go Back..</b></p><iframe allowtransparency="true" src="http://www.blogger.com/comment-iframe.g?blogID=8529468533521018553&postID=7550806426416594592" frameborder="0" height="410" width="100%"></iframe></div><style type="text/css">b.tombolCoba { margin:2px 2px 0px 0px; -moz-border-radius:5px; border-radius:5px; padding:2px 5px; border:1px outset blue; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIKW-5xT6HpPosYp72CnV_Ic1B5RVRSXPa9GnKdGKHZUOHZaVaY5SvfnwwvmrovyT2V_8oN8rNZSNNgb_A1GycFB4nWm4ycfy9UlTUaskRdvpBYzekqze98h-G61OT5KWZkJ17W5NTM_mP/s1600/biru25.png); color:white; display:inline-block; cursor:pointer;}b.tombolCoba:hover { padding:1px 4px; border:2px outset skyblue; color:yellow; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWJY8desEp9Iny6iBigzcSc5eYTantn608Jv5KNqdf6k3mH22z7UzYZUxaIaxQYolMizqTk2Apt8PyS2NKJFzRMHQ1_NZIGO5Y6KNSXnNoOV5WLTZQuRZpQnAQr6uH-KZ0ojvpKXnxNc53/s1600/green25.png);}</style><script type="text/javascript">var embedAwal = '<embed src="http://img227.imageshack.us/img227/3087/playergv1.swf?soundFile=';var uriLaguDong = 'http://www54.indowebster.com/cf4a859f7dc58d6b6134bc4aed3e7871.mp3';var embedTengah = '&bg=0x330000&leftbg=0x';var warna = '003300';var embedUjung = '&lefticon=0xFFFFFF&rightbg=0x333333&rightbghover=0x333333&righticon=0xCCCCCC&righticonhover=0xFFFFFF&text=0xcccccc&slider=0x666666&track=0xFFFFFF&border=0xFFFFFF&loader=0xcccccc&autostart=yes&loop=yes" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" height="24" width="290"/>'; document.getElementById('laguDong').innerHTML=embedAwal + uriLaguDong + embedTengah + warna + embedUjung;</script>

Teknik diatas udah gw Test di Blog welcome-to-my.blogspot.com