Cara Membuat Blog Valid CSS3

Cara Membuat Blog Valid CSS3
Cara Membuat Blog Valid CSS3 - Membuat blog Valid HTML 5  Mungkin mudah, tapi kalau membuat blog Valid CSS3 Saya yakin tidaklah mudah dan hanya 5% orang yang memiliki template valid CSS3 .. Daripada saya membuat tutor cara buat blog valid html5 rasanya bosan karena di google sudah bejibun tutorial seperti itu tapi kalau cara membuat blog Valid CSS3 masih sedikit jadi saya buat aja deh, heheh ..

Sama dengan HTML 5 tentunya CSS3 berfungsi untuk memperbaiki kode CSS yang error pada template sehingga membuat template lebih ringan / cepat loadingnya ..

Cara Membuat Blog Valid CSS3 : 

WARNING : Sebelum melakukan cara dibawah ini, hendaknya backup dulu template kamu 

1. Login ke blogger
2. Pilih template > Edit html
3. Jangan lupa centang expand template widgets
4.  Cari kode


  • http://www.blogger.com/static/v1/widgets/1576120009-widget_css_bundle.css
5. dan hapus kode tersebut dan silahkan check seberapa banyak error kode css blog sobat di http://jigsaw.w3.org/css-validator/ ..
Jika sobat menemukan pesan kode error seperti ini :

  • 1     .backlink-toggle-zippy     Value Error : cursor hand is not a cursor value : hand
  • 1     .status-msg-border     Parse Error opacity=40)
  • 1     .status-msg-bg     Parse Error opacity=30)
  • 1     .widget .widget-item-control a img     Value Error : padding none is not a padding value : none
  • 1         Unknown pseudo-element or pseudo-class ::root [root .goog-custom-button]
  • 1         Unknown pseudo-element or pseudo-class ::root [root .goog-custom-button-outer-box]
  • 1         Unknown pseudo-element or pseudo-class ::root [root .goog-custom-button-inner-box]
  • 1     .FollowByEmail .follow-by-email-inner input     Unknown pseudo-element or pseudo-class ::-webkit-input-placeholder [-webkit-input-placeholder]
  • 1         Unknown pseudo-element or pseudo-class :-moz-placeholder
  • 1     .label-size-1     Property filter doesn't exist : alpha(80)
  • 1     .label-size-2     Property filter doesn't exist : alpha(90)
  • 1     .Stats .blind-plate     Parse Error opacity=65)
  • 1     .widget.Subscribe .widget-content     Property zoom doesn't exist : 1
  • 1     .subscribe-wrapper     Property zoom doesn't exist : 1
  • 1     div.subscribe div.top     attempt to find a semi-colon before the property name. add it
  • 1     div.subscribe div.top     Property progid doesn't exist : DXImageTransform
  • 1     div.subscribe div.top     Parse Error DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.blogger.com/img/widgets/s_top.png',sizingMethod='crop');
  • 1         Parse Error [:1em;padding:4px 0 1px;width:144px}html>body div.subscribe div.top]
  • 1     div.subscribe div.bottom     attempt to find a semi-colon before the property name. add it
  • 1     div.subscribe div.bottom     Property progid doesn't exist : DXImageTransform
  • 1     div.subscribe div.bottom     Parse Error DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.blogger.com/img/widgets/s_bottom.png',sizingMethod='crop');
  • 1         Parse Error [:3px;height:3px;line-height:0}.subscribe-wrapper .expanded]

Nah tenang saja , kita bisa menghapus kode pesan error tersebut, beginilah caranya :

1.  Login ke blogger
2. pilih template > Edit html
3. jangan lupa centang expand template widgets
4. Cari kode 
<b:skin><![CDATA[ 
5. Hapus kode tersebut dan ganti dengan kode dibawah ini : 


  • &lt;style type=&quot;text/css&quot;&gt;
    &lt;!-- /*<b:skin><![CDATA[*/

 6. Lalu pratinjau dulu , kalau tidak ada error silahkan simpan

dan check di 
http://jigsaw.w3.org/css-validator/ , apabila masih belum valid css3

Sobat bisa belajar tentang css3 dan belajar lengkap agar blog sobat bisa valid css3 : 
DISINI