6/24/12

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


  1. Thanks telah mampir, yo kita saling vote dan comment..
  2. Bila berkenan tolong bagikan dengan tombol share di atas.
  3. Gratis langganan artikel blog ini, silahkan klik Disini, atau masukan email disidebar yg telah disediakan

Sobat sedang membaca artikel Cara Mudah Edit CSS Dengan TopStyle Lite, bila berkenan silahkan share artikel ini dengan tombol share di atas. Bila mau COPAS untuk di blog sobat, dimohon meletakkan link aktif sebagai Sumbernya dengan copy kode di bawah ini.

Related Post:

30 comments:

  1. Tutorial mantap mas komandan....walo rumit bagiku..hehehehe...soalnya dah pasrah aj sama penampilan sekarang, bingung mau gmn lagi....dah banyak yg tau bhw itulah webblog ku...gtuu

    ReplyDelete
  2. belum pernah otak-atik css nih,,jadi masih takut akalu salah,,heheh..
    tapi terima kaish untuk informasinya

    ReplyDelete
  3. pgen bnget blajar CSS, tp susah bnget kyaknya...

    ReplyDelete
  4. wah.. boleh nih dicoba sambil belajar edit css.. hehehe.. makasih gan.. langsung ke TKP...

    ReplyDelete
  5. uih canggih bisa mngedit blog,boleh nich informasi...

    ReplyDelete
  6. terimakasi iya ganzz atas informasinya,...

    ReplyDelete
  7. thanks atas informasi yang bermanfaat ini.

    ReplyDelete
  8. terima kasih infonya..

    Saya kesini bukan hanya cari ilmu tapi juga memantau banner, tapi saya lihat banner saya udah raib.

    sesuai peraturan, 1 banner dibalas 1 banner

    ReplyDelete
  9. waah.. keren nih.. kebetulan lagi belejar css n nemuin tips ini. makasih gan....

    ReplyDelete
  10. thanks for share bro.... gimana keadaanmu bro? sehat2 aja kan! sukses untuk anda

    ReplyDelete
  11. terima kasih sudah berbagi informasinya,,semoga dapat bermanfaat

    ReplyDelete
  12. artikel yang menarik,,,terima kasih sudah berbagi informasinya

    ReplyDelete
  13. Ini yang saya cari-cari dari dulu, terima kasih banyak gan?

    ReplyDelete
  14. makasi sob atas infonya

    info yang bermampaat sob
    salam kenal .../?

    ReplyDelete
  15. makasi gan atas infonya.....

    salam kenal gan...??

    ReplyDelete
  16. makasih tutorial nya gan...pingin belajar CSS gan...mohon pencerahannya gan

    ReplyDelete
  17. izin menyimak mas..makasih bimbingannya mas....

    ReplyDelete
  18. Kalau edit htmlnya sering tapi kalo edit css belum pernah, coba dah ntar aku pake ini
    trims infonya

    ReplyDelete
  19. Terima ksih sobat, setelah memgunjungi dan membaca pada blog ini saya jadi banyak tahu. Salam sahabat

    ReplyDelete
  20. Makasih gan, artikelnya sangat membantu nih. Kebetulan banget sedang butuh triik ini :)

    ReplyDelete
  21. Deritanya sebagai blogger pemula, masih pingin belajar yang dasar ketemunya sudah ilmu tingkat lanjutan terus. Thks ya infonya

    ReplyDelete
  22. Artikel yg bagus.. Sangat membantu, trims infonya ya...

    ReplyDelete
  23. numpang belajar edit css sob...:)
    trima kasih atas artikel nya.

    ReplyDelete

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda. Trims atas kerjasamanya

Langganan Artikel

Artikel Gtais : :

Enter your email address:

Delivered by FeedBurner

Total Kunjungan

 

Copyright 2008 All Rights Reserved Revolution Two Church theme !, Converted into Blogger Template by Bloganol dot com ! Modified by Saung Web ! , On Blogger