erikut ini adalah cara mudah merubah file CSS menjadi file Javascript, namun bukanlah merubah file CSS tersebut menjadi file javascript seutuhnya (sesungguhnya). Ini hanya sekedar manipulasi sebuah file CSS menjadi javascript dengan menggunakan bantuan sebuah web hosting, karena apabila kita ingin merubah file CSS menjadi sebuah file Javascript tentunya sedikit agak lama atau bahkan sangat lama.

Untuk artikel yang saya tulis ini adalah merubah file CSS menjadi Javascript dengan mudah dan cepat dengan menggunakan bantuan webhosting, kenapa saya bilang dengan mudah? karena orang seperti saya ini yang notabene belajar dunia coding secara otodidak, tidak mengerti bahasa pemograman seperti CSS atau Javascript, jadi kemampuan saya cuma sebatas manipulasi kode-kode tersebut.

Langsung saja kita merujuk pada artikel bahasan kali ini, sebelum kita merubah file CSS menjadi sebuah file Javascript, yang perlu kita siapkan pertama adalah keinginan untuk mencoba (kalau kemampuan itu datangnya belakangan setelah kita rajin mencoba pasti jadi mampu). Kemudian siapakan sebuah file CSS dengan menggunakan Notepad (Aplikasi Notepad) sebagai contoh seperti di bawah ini.

1. Sebuah File CSS :
   
   #menus{width:100%;height:38px;position:fixed;top:0;left:0;text-align:center;background:#555;border-bottom:2px solid #fff;box-shadow:0 0 0 1px #555;z-index:999
   }
   #menus:before{width:15px;height:15px;content:"";position:fixed;top:8px;left:5px;border-radius:100%;border:2px solid #ddd;background:#000
   }
   #menus:after{width:15px;height:15px;content:"";position:fixed;top:8px;right:5px;border-radius:100%;border:2px solid #ddd;background:#000
   }
   #menus a{margin:3px;color:#333;text-decoration:none
   }
   #menus a:hover{margin:3px;color:#fff;text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000
   }
   .menus{display:inline-block;height:30px;background:#ddd;border:1px solid #ddd;padding:0 10px 0 0;font:bold 11px/30px Arial,Helvetica;text-decoration:none;text-transform:capitalize;color:#444;box-shadow:0 0 0 1px #222,inset 0 0 0 1px #444;transition:all 0.5s
   }
   .menus:before{content:"";float:left;background:#aaa;width:35px;text-align:center;font-weight:bold;font-size:25px;color:#222;margin:0 10px 0 0;box-shadow:inset 0 0 0 1px #444
   }
   .menus:hover{background-color:#fa0;color:#fff
   }
   .menus:hover:before{background:#000;color:#ddd
   }
   .menus:active{background:#b00
   }
   .home:before{content:"\2794"
   }
   .isi:before{content:"\2633"
   }
   .post:before{content:"\2756"
   }
   .contact:before{content:"\2706"
   }
   .about:before{content:"\2639"
   }
   
   #toltip{position:relative
   }
   #toltip span{display:block;position:absolute;top:-200px;left:0px;width:200px;height:auto;padding:5px;font:9px Verdana;color:#ddd;text-align:center;background:#000;border-radius:5px;border:1px solid #ddd;box-shadow:0 0 0 1px #222;opacity:0.9
   }
   #toltip span:after{content:"";position:absolute;top:-22px;left:5px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:20px solid #000
   }
   #toltip:hover span{position:absolute;top:50px;left:0;z-index:9;transition:all 1s
   }
   #toltip p{font:bold 10px Arial;font-style:italic;margin:0 auto 5px;color:#fa0;border-bottom:1px solid #888;text-align:center
   }
   
Langkah selanjutnya "Save as" file name (terserah anda), simpan dengan ekstensi CSS (seperti ini, menu.css), "Save as type" pilih All file, "Encoding" pilih Unicode, lalu simpan.
2. Selanjutnya siapkan sebuah webhosting (tempat penyimpanan file), seperti google code, google site dll. kemudian upload (simpan) file CSS tersebut kedalam webhosting tersebut, dan copy alamat file CSS tersebut.
3. Langkah berikutnya kita buat sebuah file javascript yang fungsinya untuk memanipulasi file CSS tadi dengan berbekal sebuah file CSS yang sudah di Upload (disimpan) dalam webhosting, bukalah notepad lalu buatlah file seperti contoh di bawah ini.
   <!-- 
   document.writeln(" <link href='http:alamat url file css dari webhosting' rel='stylesheet' type='text/css'/> ");
    // -->
   Selanjutnya simpan file tersebut dengan ekstensi Javascript, misal (menu.js)
4. Langkah terakhir Upload file Javasript tadi ke webhosting juga, usahakan upload filenya satu hosting saja, hal ini di maksudkan untuk mempercepat loading pemanggilan file CSS tadi. kemudian copy alamat file Javascript (js) tadi dan file CSS yang sudah siap digunakan dan sekilas berbentuk sebuah file javascript. Untuk pemangillannya seperti kode tertulis dibawah ini.
   <script src='https://alamat url file Javascript dari webhosting' type='text/javascript'></script>

---

Sebagai contoh sobat bisa cobalah file dibawah ini, ini adalah file CSS seperti pada contoh diatas yang sudah saya simpan dalam webhosting dalam bentuk Javascript.

1. File Css dalam bentuk Javascript
2. File HTML sebagai pemanggil file CSS-nya
Copy kedua file diatas ini sebagai contoh, lalu silahkan masuk ke CSS dan HTML editor online disini (CSS dan HTML editor Online), paste ke area editor dan klik result.

---

Sebenarnya kita juga bisa memanipulasi dan merubah file HTML menjadi Javascript, untuk caranya kurang lebih sama seperti cara merubah file CSS menjadi Javascript diatas, sebagai contoh singkat penulisannya seperti dibawah ini, dan simpan juga file tersebut dengan ekstensi Javascript

---

Dan berikut ini adalah contoh file CSS dan HTML yang sudah saya manipulasi sehingga seperti sebuah file Javascript. Untuk melihat hasilnya silahkan Copy file dibawah ini dan pergi ke CSS dan HTML editor Online

* Contoh File CSS dan HTML dalam bentuk Javascript

---

---

Sekian dulu sekilas artikel tentang cara merubah file CSS menjadi Javascript (convert CSS to Javascript, Change CSS to Javascript) dengan mudah, semoga bisa bermanfaat, maaf kalaupun masih banyak kekurangan dan juga kekeliruan...!!!