Blog Inspirasi Digital

Blog Inspirasi Digital

Tutorial Mikrotik, Hotspot, Blog, SEO, WEB 2.0, HTML, CSS, Javascript dan Inspirasi Digital

Menata Ulang Syntax CSS Acak-acakan Via Styleneat

Betapa sulitnya mempelajari format style pada koding CSS yang susunannya tidak beraturan, jangankan yang baru belajar, yang sudah mengerti sekalipun pasti dibuat pusing untuk menganalisanya ulang. Tidak masalah bila struktur pengkodean kita sendiri yang membuatnya, bayangkan saja bila itu buatan programmer lain, belum lagi jika si programmer menggunakan mode style CSS terkompresi, pasti ribet sekali khan jika harus mempelajari dengan menelusuri kodingya satu-persatu.



Nah, kali ini ada solusi termudah dimana rekan bisa dengan cepat mengembalikan struktur style CSS yang sebelumnya acak2an menjadi lebih teratur dan lebih tertata rapi. Saya sarankan coba saja gunakan layanan dari Styleneat. Udah Basi Om!! hehehe ya enggak lah, mana mungkin saya ngasih info layanan terbaru kalo tidak terlebih dahulu masuk best review diluar sana, yang jelas layanan ini benar2 baru di launching tahun 2009 ini :)


Contoh susunan CSS yang tidak beraturan:

#id1 { property: value; }
#id1 .class1 { property: value; }
#id1 .class1 a { property: value; property2: value2; property3: value3; }
#id1 .class1 a span { property: value; property2: value2; }
#id2 { property: value; }
#id2 .class { property: value; }

Contoh susunan CSS yang teratur dan tertata rapi:

#id1 { property: value; }
 
  #id1 .class1 { property: value; }
 
    #id1 .class1 a {
       property: value;
       property2: value2;
       property3: value3; }
 
       #id1 .class1 a span {
          property: value;
          property2: value2; }
 
#id2 { property: value; }
 
  #id2 .class { property: value; }

Jujur saja, sebenarnya banyak juga programmer yang kadang malas mengatur tata letak dari selector, value dan property pada CSS Syntax ini, masalahnya kebanyakan si programmer merasa kode tersebut dia sendiri yang menyusunnya, jadi mau diedit kapanpun juga dia merasa tetap mengerti alurnya. Saya sendiri sebenarnya termasuk yang malas juga mengatur struktur pengkodean ini, padahal bila ditata dengan rapi untuk kedepannya pasti lebih mudah untuk mempelajarinya kembali, yang jelas ini memudahkan kita mengingat antara satu kode dengan lainya yang saling berhubungan. Silhakan dicoba dan dipelajari sendiri ok :)

84 komentar:

  1. Pertamax......................... thanks om infonya save as, yang penting bisa pertamax disini...

    BalasHapus
  2. Keduaxxxxxx........

    BalasHapus
  3. mantaf tuh infonya o-m....

    BalasHapus
  4. Anonim31/3/09

    Ke EMPAT. . .
    Mantab om infonya...
    Dulu blog q juga pake css kompresi (tapi smuanya gagal, untung aja skarang udah enggak) dan sudah ganti template...

    BalasHapus
  5. aku gak mudeng sama sekali yang namanya CSS
    script blogku pun masih numpang

    BalasHapus
  6. Boleh juga tuh infonya Om. Tp ilmunya terlalu dalem tuh. Beraaat.. :D

    BalasHapus
  7. bagus niih oom
    pilihan di option nya itu pilih yg mana aja klo biar rapi??

    BalasHapus
  8. MANTAP Om

    mau nyoba2 dulu aah

    oh ya mau nanya sekalian

    klo CSS tidak teratur itu apa efeknya?

    BalasHapus
  9. CSS aduh gimana ya, belum banyak tahu nih om.. sukses aja ya

    BalasHapus
  10. @IHSAN: pengaruhnya tidak ada, cuma kita aja yang susah nantinya untuk menganalisa ulang.

    BalasHapus
  11. Wee e e e... Mantap. Kalau saya yang penting jadi. Lagian juga masih sering direnovasi blognya. Ntar kalau dah jadi baru di rapikan...

    BalasHapus
  12. nyerah saya om kalo urusan gini

    BalasHapus
  13. memang sahabatku yang satu ini infonya dari dulu ampe skarang ok2 semua,...hehehe salut oom, sukses ya oom...

    BalasHapus
  14. biarpun sllu ketinggalan, tapi ttp hrus beri komentar
    so artikelnya blog ini sllu bermanfaat
    jadi LANJUTKAN..!!

    BalasHapus
  15. mangstab om ..... boleh juga tuh dicoba :D

    BalasHapus
  16. Anonim31/3/09

    Slamat pagi 0m..
    Saya punya semboyan :
    "Terbatas bukan berarti berhenti berkarya"
    "Terbatas adalah cerdik mensiasati setiap masalah"
    "Terbatas PD aja lagi.,.."
    terus terang sebagai pembaca setia blog ini saya agak kurang ngeh...
    Karena saya melihat artikel2 yang ada di sini mayoritas hanya untuk yang ngeblog menggunakan Kompie, sedangkan saya 100% ngeblog menggunakan Hp, banyak artikel blog ini yang belum bisa saya terapkan secara maksimal, contoh termudah, untuk bwat menu, readmore saya belum bisa.
    Karena agak "ngambeg" maka blogspot saya tinggalkan sementara sampai ada jalan keluar.
    Bagaimana kalau 0m juga bwat artikel untuk yang ngeblog menggunakan Hp, jadi bisa imbang, kami juga blogger (walau blog kami acakadul he...he..)
    kami juga manusia lho...kalau om berkenan dg usulan saya ini tolong kunjungi blog saya sebagai wujud persetujuan.
    Salam dahsyat untuk anda.

    BalasHapus
  17. @fayantori31: kenapa memaksakan masih menggunakan HP? kan bisa lari kewarnet terdekat. coba edit dulu blognya diwarnet kalo dah selesai kan baru gunakan HP untuk kegiatan posting.

    Terus terang koneksi menggunakan HP banyak yang tidak support terutama penggunaan pada beberapa javascript. ups emang ngeditnya langsung dari hp atau hp-nya yang jadi modem?

    BalasHapus
  18. wah iya ni om. kalo acak-acakan jadi males ngeditnya. thanks om infonya

    BalasHapus
  19. Anonim31/3/09

    @oom
    Mohon jgn di ketawain ya...
    Saya sama sekali belum bisa kompie, jadi belum berani ke warnet
    walau baru dg Hp sy juga ingin jadi blogger lho...
    Komunitas blogger pemakai Hp khan juga banyak sekali, ini hanya sekedar saran (itupun kalau berkenan), biar tidak ada rasa "gimana gitu..." antara blogger kompie dan blogger Hp he...he...
    Salam terdahsyat untuk anda

    BalasHapus
  20. mumet kalo ngoprek script

    BalasHapus
  21. diriku termausk yg males ngedit om kekekke..bodo ah, yg penting preview nya bener.. :D

    cuman kdg bingung juga ihihiih

    BalasHapus
  22. Anonim31/3/09

    wah thx om atas infonya

    BalasHapus
  23. Blog yg hebad;) Maaf gak bisa kasih comment yang sesuai, soalnya aku gak ngerti soal CSS=))

    BalasHapus
  24. cocok banget infonya bos....ngikuttttttttttttttttttttt

    BalasHapus
  25. @ O-OM & fayantori31 : btw klo menggunakan hp biasanya nge-blog'a ngapain ajz?
    contoh : apa cuma posting doank,trus edit2 dikit. atau ada yg lain??
    coz saya blm pernah pke hp siy..

    BalasHapus
  26. wew.. tetep aja saya ga ngerti css mas he..he..

    BalasHapus
  27. apik om... i like it. semua artikel om emang canggih

    BalasHapus
  28. walo ga ngerti apa2 soal css tp bukannya sususan yg berantakan itu lebih hemat space yh om? ga ada linebreaknya?

    mohon pencerahannya

    BalasHapus
  29. weee..kenapa saya ga pernah pertamaX :(( ...

    BalasHapus
  30. makasih mas, ini yang aku perlukan dari dulu.. :D
    blognya berat... mungkin karena css yang acak2kan.. :D

    BalasHapus
  31. usefull banget nih....thanks berat om...

    http://adamgunardi.blogspot.com/2009/03/kuliah-sebagai-investasi.html

    BalasHapus
  32. Sebagai pengguna themes yang sudah jadi sya jarang banget edit style.css, cuma kadang pengen nambahin footer jadi lebih meriah atau merubah warna baru masuk ke style.css, cuma kayaknya sudah terstruktur .. mungkin yang buat themesnya juga download dari css gratisan yang sudah terstruktur.
    Cuma mau edit biar tampilan lebih bagus di IE nggak ngerti codenya .. punya oom?

    BalasHapus
  33. Makasih infonya om.. walau belum ngerti. Oh ya.. saya juga sering pake hp dalam blogwalking (comment ini juga pake operamini) jadi saya setuju dengan fayantori31 agar om bikin juga tips/tutorial untuk yang pake hp.

    BalasHapus
  34. =)) , oom ngeledek ane nih. ane tiap bikin template selalu CSSnya asal2an. :D. abis males ngerapiin, muter scroll yg segitu panjang. jadi kl ada penambahan juga ditempatin disembarang bagian :))

    BalasHapus
  35. mantap om hehe... tips2 nya pertamax selalu ^^

    BalasHapus
  36. Om, selain agar kode CSS tampak rapi susunannya, apalagi sih manfaat dari kita melakukan penataan ini? Akankah berpengaruh pada kinerja blog secara teknis, seperti waktu loading, dsb? Trims... :)

    BalasHapus
  37. Bagus nich.... soalnya sedang tertarik bongkar-pasang, gesar-geser tata letak blog. Makasih.

    BalasHapus
  38. Bermanfaat banget khusunya bagi pemula seperti saya :D
    Makasih om...

    BalasHapus
  39. wah.. patut dicoba Om..
    biar gak pusing
    saya doyan kutak-katik CSS soalnya..

    thanks Om.. :)

    BalasHapus
  40. Anonim1/4/09

    @Ady
    selama ini yang saya jalani sementara memang seperti itu, makannya saya coba "merayu" si 0m supaya mau bikin artikel2 yg bwat blogger pemakai Hp.
    Seperti semboyan saya di atas..
    "Terbatas bukan berarti berhenti berkarya"
    "Terbatas adalah cerdik mensiasati setiap masalah"
    "Terbatas...PD aja lagi"
    walaupun dengan penampilan blog yang "ACAKADUL" saya mencoba tetap PD
    Bahkan nggak nyangka jika salah satu blog saya yang "Internet Ada Uang" bisa no 1 d halaman awal google (itu kmarin waktu tak chek, entah sekarang he...he...) dengan kata kunci "Internet Ada Uang".
    Mungkin karena om GOOGLE lagi ngantuk jadi blogku keselip kale he...he...

    BalasHapus
  41. wow keren ajeeeeeeeeeeeeeeeeeeeeeeeee
    I love it
    aq suka pusing klo lht code css org.
    klo buat syntac sndr sih uda langsung rapi

    BalasHapus
  42. Kerensih om. tapi aq bingung urusan program2an saya sukanya copas dari para guru termasuk oom =))

    Om redirect spt link saya termasuk scam tdk...???????? Klo ya tlg kasih info ya....!

    BalasHapus
  43. saya malah lebih suka CSS acak bikinan sendiri ;))
    yg penting mah kita mengerti, lebih gampang kalau kapan2 diedit lagi...
    lebih hemat space juga, jadi lebih enteng..

    BalasHapus
  44. thanks infornya om

    BalasHapus
  45. waduh oom boten mudeng.. gpp deh.. sapa tahu besok2 bisa kepake and ngerti...

    BalasHapus
  46. keren om..lumayan buat bantu ngasi tutorial css..

    BalasHapus
  47. Anonim5/4/09

    Wach...si om belum setuju nich ye...
    Kayaknya harus belajar merayu lagi nich...

    BalasHapus
  48. weh.... mantav surantav infonya.... makasih om.. :)

    BalasHapus
  49. wow.... saya selalu kagum dengan produktivitas om didalam memposting artikel bermanfaat bagi para blogger.

    Salut !!

    BalasHapus
  50. itu ngefek sama loading time nggak om?

    apa cuman biar tampak rapi aja, thx... :-)

    BalasHapus
  51. ada gak kompres yang pertamax untuk javascrip (blogspot)... kalau ada infonya dong ..Http://Rilexnet.blogspot.com.. email: Tri_one_11@yahoo.com thank's ya...

    BalasHapus
  52. maaf mas, cara menggunakannya bagaimana ya? saya kurang mengerti, bisa kasih tutorialnya tidak?

    BalasHapus
  53. Om...
    Klo Buat ngerapiin javascript bisa gak???
    Ato bisa kasih URL yang lain yang mungkin bisa....
    Thanks sebelumnya....

    BalasHapus
  54. saya coba dulu deh om

    BalasHapus
  55. Info menarik dan boleh sekali dicoba, Makasih buat infonya dan sukses

    BalasHapus
  56. Terima kasih untuk tipsnya, saya mau coba semoga juga

    BalasHapus
  57. Saya cari dibeberapa website dan dapat tipsnya di website ini, terima kasih, mau dicoba oleh saya.

    BalasHapus
  58. Amazing artikel…. Semoga saya bisa praktekan tipsnya dan berhasil

    BalasHapus
  59. Terima Kasih, Tulisan yang sangat membantu. Salam Sukses!

    BalasHapus
  60. Terima kasih atas pencerahannya, tulisannya menarik juga. Saya akan coba

    BalasHapus
  61. aku paling senang dengan semua pengetahuan ini, terima kasih sudah berbagi ilmu

    BalasHapus
  62. Setelah membaca Info dan Artikel, saya jadi ingin mencoba. Salam Sukses

    BalasHapus
  63. Terima kasih atas Artikel dan Info yang selalu menambah wawasan.semoga sukses

    BalasHapus
  64. Menarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses

    BalasHapus
  65. Cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih

    BalasHapus
  66. Artikel yang sangat Innovatif dan banyak Tipsnya. jadi ingin coba. semoga berhasil

    BalasHapus
  67. Tulisan dan Tipsnya sangat bermanfaat dan Infomatif. wajib dicoba. sukses selalu.

    BalasHapus
  68. Tips yang cerdas cuma di Wibesite ini banyak kumpulan Artikel bagus. harus dicoba. salam sukses

    BalasHapus
  69. Amazing artikel, Infonya bagus banyak mengandung Tips dan Pesan yang bermutu. salam sukses

    BalasHapus
  70. Amazing Artikel yang sangat berguna,terutama Tipsnya sangat membangun. boleh dicoba.

    BalasHapus
  71. Terimakasih Tulisan dan Info yang bermanfaat. wajib dicoba. salam sukses selalu.

    BalasHapus
  72. Tips dan Info menarik, boleh dicoba, Semoga berhasil

    BalasHapus
  73. Setelah membuka Wibesite ini, saya menemukan Artikel yang Amazing dan infonya boleh dicoba. Sukses selalu

    BalasHapus
  74. Saya menemukan Artikel hebat di wibesite ini jadi ingin coba Tipsnya. Semoga berhasil

    BalasHapus
  75. Artikel Menarik terutama Infonya, boleh dicoba. Salam sukses

    BalasHapus
  76. Saya senang setelah membaca Tips dan Artikelnya, harus dicoba.Semoga berhasil

    BalasHapus
  77. Info dan Tulisannya Amazing, boeh dicoba. Sukses selalu

    BalasHapus
  78. Tipsnya sangat Infomatif, wajib dicoba salam sukses

    BalasHapus
  79. Informasinya keren sekali, sangat bermanfaat.sukses selalu

    BalasHapus


 

Back to Top