Cara Mudah Edit CSS Dengan TopStyle Lite

Cascading Style Sheet ( CSS) adalah salah satu bahasa pemrograman untuk mengendalikan tampilan beberapa komponen Blog atau Web sehingga akan lebih terstruktur dan seragam. Melalui CSS, penataan tampilan halaman website dapat dilakukan secara mudah, praktis, dan terkontrol, langsung melalui HTML . Namun kadang kala CSS yang sudah ada gak pas dihati para blogger sehingga perlu ada sedikit editing didalamnya.. untuk itu saya ingin berbagi tentang Cara Mudah Edit CSS Dengan TopStyle Lite untuk menghasilkan halaman Blog yang sesuai dengan selera pemiliknya.

Untuk mengedit CSS ini  kita harus tahu letak folder dan file .css yang digunakan oleh beberapa CMS dan blog engine populer misalnya  :

• Joomla : /templates/nama-template/css/ 
• Drupal : /themes/nama-template/style.css 
• WordPress : /wp-content/themes/nama-theme/style.css 

Khusus untuk Blogger atau Blogspot, kode CSS disisipkan langsung pada bagian dashboard template blog Anda via Edit HTML.

Ada banyak tool gratis untuk membuat atau mengedit file CSS, salah satunya adalah TopStyle Lite  cukup klik, edit, dan preview, file CSS redy for use. Tool yang satu ini untuk versi 3x bisa diperoleh Gratis alias Free, ukuran file sekitar 1,5 MB. Silahkan Download dan install TopStyle Lite ke komputer.

Selanjutnya buat atau edit file .css yang di kehendaki. Sebagai contoh, untuk Blogger (Blogspot), salin kode style template Anda di Layout / Template > Edit HTML. Salin mulai baris /* Variable definitions hingga baris sebelum </b:template-skin>. Paste kode yang tersalin ke jendela TopStyle Lite yang telah terbuka.

Sekarang cukup edit nilai atau menambahkan property baru beserta value-nya. Caranya lakukan klik pada kelompok Selector yang mau di edit di kolom kiri, misalnya pada bagian selector body. Perhatikan, daftar property dan value yang sudah ada akan muncul di kolom Style Inspector di sebelah kanan. Sedangkan hasil editingnya ada dibawah,.

Style Inspector

Untuk mengubah nilai, klik item property, misalnya edit property background. Lalu ubah nilainya, misalnya dari green menjadi blue. Perhatikan perubahannya pada tampilan Preview.

Untuk menambahkan property baru, klik pilihan property baru, misalnya font. Berikan nilainya, misalnya font-style  diisi italic, lalu  font-weight isi Bold, dan font-family diisi sans-serif. Hasilnya body blog  akan menggunakan font Sans-serif, dengan efek cetak miring dan cetak tebal.

Untuk memasang ke blog, salin seluruh kode hasil pengeditan, lalu timpakan kembali ke template Blogger Anda menggantikan kode lama, yaitu mulai baris /* Variable definitions hingga baris sebelum </b:template-skin>. Simpan perubahan.

Jika file yang diedit adalah file Css dari template sebuah CMS, misalnya file style.css Drupal atau Wordpress, maka Anda cukup mengupload file hasil edit dan timpakan ke file lama. Kini tampilan blog sudah cantik, menarik , sesuai selera Anda. buah kerja keras dari Cara Mudah Edit CSS Dengan TopStyle Lite. .. begitu soob.. bagi yang mau Down Load silahkan ke alamat :  TopStyle Lite.   

Yapp semoga bermanfaat

Source : Cara-caranya