Cara Membuat 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
<style type="text/css"><!-- /* <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.
94 komentar
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
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
Sepertinya blog saya masih ada error css 3
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...
-moz-
-khtml-
-o-
-webkit-
Lalu digantinya sama apa kang?
Trim.s sebelumnya.
Salam sukses selalu Sobat:)
saya mendapatkan pesan error DXImageTransform . setelah saya cari2 gk nemu2.. kira dimana ya letak dari DXImageTransform trsbut?
/*---------------------------------------------
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>
sukses selalu.... kunjungi balik ya kang,,,
Simple ya kang, cuman ribet ngoprek CSS na. :D
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.
tp tr ane cb deh, sdikit demi sdikit :)
untuk meengkapi ekstensi disetiap masing" browser.
Klik prefixmycss.com
Semoga Membantu.
dan untuk kali ini saya bingung berkomentar yeuhh hehe
kan saya pakai BLOGGER THREADED COMMENTS HACK V.3 punyaan akang...
gimana ya menulis paragraf commet form nya di blogspot...
hufffftt :(
kangge adminna weh ah nu palidna ayeuna mah...wekekekkk
Ada tambahan dikit, saya menemukan pada beberapa pembuat template untuk penulisan padding:0 auto, cukup tulis padding:0 saja (tanpa saja hehehe...)
ini yang saya tunggu2 kang :)
makasih ya kang..
mungkin di tunggu lagi yang lebih bnyak nya ^_^