Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Cara Membuat Blog Valid CSS3

Cara terlengkap mebuat blog valid CSS3.

How to validate CSS3 - Setelah berkutat beberapa lama dengan Validasi HTML5, kini saya coba untuk berbagi Validasi CSS3. Terlambat kayaknya saya berbagi tutorial ini, tapi sebuah pepatah mengatakan better late than never, lebih baik terlambat daripada tidak sama sekali.

Diantara yang menyebabkan terlambatnya saya berbagi tentang validasi ini, saya tidak pernah memposting sesuatu yang belum pernah saya coba. Ironis kan? sebuah blog membahas validasi tapi blognya sendiri belum valid.

Perlu dicatat, bahwa validasi baik HTML5 maupun CSS3 bukan sesuatu yang sempurna. Artinya, ketika sebuah blog valid HTML5 atau CSS3 tidak berarti sempurna dalam CSS dan HTML. Validasi hanya merupakan panduan dalam menyusun HTML dan CSS yang baik.

Bagi sobat yang ingin mencoba validasi CSS3, baik menghilangkan error atau warning, silahkan dicoba trik yang saya gunakan :

Non Aktifkan CSS Reset Stylesheet Blogger

Menonaktifkan CSS Reset ini, saya temukan di Blog Damar Zaky dan aplikasinya dipermudah oleh Kompi Ajaib. Sebelum menonaktifkan CSS Reset Stylesheet Blogger, silahkan lihat kode dibawah, biasanya susunan template akan seperti ini :
<b:skin><![CDATA[*
......
KODE CSS DI SINI
...... 
]]></b:skin>
ganti <b:skin><![CDATA[* dengan
&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
ganti kode ]]></b:skin> dengan kode :
</style>
Setelah menonaktifkan CSS Reset ini, biasanya akan ada sedikit perobahan tampilan, baik di dashboard atau di blog. Saran saya tidak usah panik, edit saja satu persatu.

Hapus Beberapa Kode

Banyak tutorial yang memberikan kode CSS untuk diterpakan pada berbagai browser. Dengan hadirnya CSS3 ini, kode-kode tersebut sudah tidak diperlukan lagi. Seperti contoh kode rounded corner (ujung membulat) biasanya kodenya akan seperti ini :
-moz-border-radius:5px;
-khtml-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
dengan hadirnya CSS3, untuk beberapa browser hanya diperlukan kode border-radius:5px, oleh karena itu, hapus semua kode yang berawalan:
-moz-
-khtml-
-o-
-webkit-
Hapus juga kode dengan awalan
DXImageTransform

Perhatikan Beberapa Perintah Validator

Masih banyak perintah-perintah perbaikan dari CSS Validator tahap demi tahap. Sebagai contoh perintah seperti ini :

Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space.

Itu artinya, apabila ada hurup yang mempunyai spasi, tambahkan tanda petik ("). Misalkan sobat menggunakan huruf Open Sans, Segoe UI, Arial (sebagai backup apabila huruf pertama tidak bisa diload) maka penulisannya

font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif
Sebetulnya masih banyak perintah yang lain, silahkan lakukan secara santai. Sobat juga bisa berdiskusi di kolom komentar apabila ada permasalahan dalam validasi ini.

93 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Pertamax..
    ini yang saya tunggu2 kang :)
    makasih ya kang..
    mungkin di tunggu lagi yang lebih bnyak nya ^_^
    1. dicoba aja satu per satu, nanti juga ketemu masalahnya :)
  2. Wah ada PR lg nih.. Nyimak dl, msh blm faham :)
    1. wkwkwkkwk santai aja :)
  3. kang di tunggu ya lanjutan post tentang membuat postingan blog valid HTML5,saya udah coba pake <style type="text/css" scoped> tapi hasilnya kok masih belum valid ya kang?? ada solusi lain??
    1. Element style not allowed as child of element div in this context. itu bukan masalah 'scoped' tapi 'CSS' tidak boleh ada didalam tag div. Pindah saja CSS ke atas ]]></b:skin>
  4. Secara umum memang untuk validasi CSS3 demikian yang jelas untuk validasi baik html5 atau css3 perlu ketelitian dan kesabaran ya kang...kalau enggak bisa-bisa mbledug ndase hehehee...
    Ada tambahan dikit, saya menemukan pada beberapa pembuat template untuk penulisan padding:0 auto, cukup tulis padding:0 saja (tanpa saja hehehe...)
    1. Satu lagi yang sering saya lakukan sebelum tahu validasi css3 yaitu hindari membuat kotak dengan background dan border dengan warna yang sama. Betul tidak kang? ....
  5. palid deui!
    kangge adminna weh ah nu palidna ayeuna mah...wekekekkk
    1. naon deui atuh kang, pan aya bagean masing2.. kang beben bagean efek2 plus editor2an.. sayah bagean sare.. :)
  6. valid html 5 aja blm kang saya,,,,udah ada valid css3..
    hufffftt :(
    1. ga valid juga ga apa2 ko.. kan udah dijelasin diatas :)
  7. kang mau tanya....

    kan saya pakai BLOGGER THREADED COMMENTS HACK V.3 punyaan akang...

    gimana ya menulis paragraf commet form nya di blogspot...
    1. yang mana? catatan maksudnya? pake <br/> aja
  8. Memang saya lebih memperhatikan validasi css3 sebelum ke html5 kang ...
    dan untuk kali ini saya bingung berkomentar yeuhh hehe
    1. ngiay we kang bingung valid mah :)
  9. terima kasih banyak validitasnya kang ismet saya akan mencoba untuk menerapkannya kang :)
  10. waah punya saya belum valid, seperti masih banyak yg eror . tapi itu bukan masalah ya :) .
    1. ga masalah miz.. santai aja :)
  11. kalau mau memperbaiki cssnya bisa memakai css prefix ,
    untuk meengkapi ekstensi disetiap masing" browser.

    Klik prefixmycss.com

    Semoga Membantu.
    1. makasih masukannya sob.. tapi kalau buat validasi, ga valid kayaknya.. banyak warning
  12. ini juga perlu buat blog saya, makasih yah Kang :)
    1. sama2 sob....
  13. wih akhirnya keluar juga nih tutorial CSS3, semoga ada tutorial selanjutnya :)
    1. soalnya saya juga baru valid, jadi baru keluar deh tutorialnya :)
  14. Poko'e sip lah kang..
    1. sip juga lah :)
  15. lumayan puyeng nih kang hehe...coba tak intip template dulu kang
    1. heheh.. silahkan kang mur...
  16. wow tuts khusus master ni mah.... nubie lieur liat css :D
    tp tr ane cb deh, sdikit demi sdikit :)
    1. hehehe ga juga.. tapi emang harus extra hati2 apalagi reset css itu
  17. Tapi biasanya setelah melakukan validasi ini, tampilan edit widgetnya jadi error :(
    1. betul sob.. khususnya bagian dashboard.. nanti sya share cara memperbaikinya
  18. baru sadar ada form komentar baru,gan coba lihat blog saya?kok form komentar blog saya kebesaran kesamping ???
    1. Iya comment editor blogger jadi seperti comment editor G+
    2. iya memang blogger ganti comment editornya,solusinya atur .comment-editor{...}
  19. Permisi Kulo nuwun mas ismet saya mau tanya, maaf kalau OOT sebelumnya. :)

    Kebetulan saya lagi otak atik bikin blog baru, saya ambil template bikinan maskolis. Gini mas kalau saya ingin menampilkan seperti "pembuat artikel, tanggal posting dan jumlah komentar" di dalam artikel home / beranda caranya gimana ya mas? Kebetulan saya muter2 google kok ga nemu2 caranya, barangkali mas ismet bisa membantu.

    Untuk lebih jelasnya : http://4.bp.blogspot.com/-XyAr9RH0nlc/UkAe0L-SnyI/AAAAAAAABeI/T3Hc2OyxbiA/s1600/home.jpg
    Blog saya : adityaprojek.blogspot.com.
    1. tambahkan lagi kode, gunakan tag kondisional untuk selain halaman 'item' http://blog.kangismet.net/2012/10/tag-kondisional-dan-cara-penggunaannya.html
  20. Validasi CSS3 euy. :D
    Simple ya kang, cuman ribet ngoprek CSS na. :D
    1. benul.. eh betul :)
  21. Cocok buat web designer nih... :D
    1. betul sob.. kalau yang versi HTML5
  22. Button Publish na mentok, sareng form komentarnya kurang pas masih ada yang kosong dibawahnya..
    1. asa hareurin :)
  23. haha bener kang heurin..
  24. sungguh bermanfaat.. makasih kang :)
  25. Postingan yang bermanfaat
  26. Kang apa validitas CSS dan HTML berpengaruh terhadap SEO suatu blog/website?
    1. lumayan juga menurut saya mas.. soalnya penulisan yang valid HTML ternyata bagus untuk seo, diantaranya penulisan tag alt untuk image
  27. ijin nyimak kang,,,, biar rada paham tentang blogger,,, trim infonya ya kang,,,
    sukses selalu.... kunjungi balik ya kang,,,
  28. ane tambahin sedikit kang.. bagi yang mw ngasih info template seperti ini misalnya..

    /*---------------------------------------------
    Blogger Template Style
    Template name: MDF-Clean Ver.3 Grey
    Designed by: Abdul Rohman
    Created date: 29 Mei 2013
    URL: http://mdf-blog.blogspot.com
    ----------------------------------------------*/

    letakkan saja tulisan/infonya dibawah kode <style>
    1. makasih tambahannya.. btw.. kapan update nih, kayaknya udah lama blom update :)
  29. Mau nanya ni kang,,
    saya mendapatkan pesan error DXImageTransform . setelah saya cari2 gk nemu2.. kira dimana ya letak dari DXImageTransform trsbut?
    1. adanya di Blogger CSS Bundle.. untuk menghilangkannya harus "Sembunyikan CSS Reset Blogger"
  30. Kang, klo saya mengaplikasikan tutorial ini kok malah ancur tata letaknya? Mohon bantuannya agar saya bisa ngejalanin trik ini tapi tata letak blog saya gak berantakan.
    1. rapihkan lagi dengan ini sob http://blog.kangismet.net/2013/09/mengatasi-tata-letak-yang-berjejer-ke-bawah.html
  31. hapus semua kode yang berawalan:

    -moz-
    -khtml-
    -o-
    -webkit-

    Lalu digantinya sama apa kang?
    1. kalau ingin valid Css3 memang semua syntax di atas harus di hapus semua...
  32. Di blog saya Untuk Code "DXImageTransform" ada yang error. tapi setelah diseldiki, kode tersebut tidak ada... haru kemana saya mencarinya? :(
  33. kalo yang https://www.blogger.com/static/v1/widgets/58075626-widgets.js gmana?
  34. Saya juga punya pertanyaan dan permasalahan yang sama dengan bro @binkbenk
    Bagaimana jika W3C CSS gak vailid KARENA pada blog template pakai (www*blogger*com/static/v1/widgets/58075626-widgets.js)

    atau peneyederhanaan nya bagaimana cara lain membuat static/v1/widgets/58075626-widgets.js yang vailid CSS3

    Makasih sebelumnya Kang...
  35. puyeng kang... :(
  36. Waduh pusing kang , udah 2 kali nyoba gagal -_-
  37. Work kang, hehehe http://prntscr.com/2ic1iv
  38. 100% sukses, cuma saat ak buka url label, kenapa ada 2 keterangan di atas posting ya gan? makasih atas jawabannya
  39. tidak scoped ?, oh ya ukuran device ku sekitar 100 widthnya sama 150-200 heightnya
  40. Saya coba artikel valid css3 nya Kang
    Sepertinya blog saya masih ada error css 3
  41. ijin menyimak saja kang, saya masih baru jadi belum ngerti soal beginian, makasih sharingnya kang :)
  42. cara validasi css3 font awesome gmna ya kang
  43. kang kok begini ya The entity name must immediately follow the '&' in the entity reference.
  44. makasih kang infonya. sangat bermanfaat. page speed score saya dari 86/100 jadi 92/100 untuk Dekstop. :-d
  45. Abul
    Komentar ini telah dihapus oleh pengarang.
  46. Kang ismet gimn cara mengatasi masalah Serve scaled images di gtmetrix[dot]com???
  47. trims...kang. perlu peras otak kayaknya untuk valid..
  48. Haturnuhun kang... tp abdi teu ngartos
    1. alhamdulillah tos beres kang ... haturnuhun elmuna
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.