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

Komentar

  1. wah..ini penting nih..amankan..

    BalasHapus
  2. nyari kode http://www.blogger.com/static/v1/widgets/1576120009-widget_css_bundle.css di edit html sampek mapus juga gak bakal ketemu..
    hahhaahhaaaa

    BalasHapus
  3. saya masih ada masalah sob,
    #sikil-mabur attempt to find a semi-colon before the property name. add it
    -1 #sikil-mabur Parse Error null
    432 #sikil-mabur Parse Error 90) }
    477 .infox Parse Error hidden
    565 Sorry, the at-rule @-webkit-keyframes is not implemented.
    1007 .emo.delayLoad Too many values or values are not recognized : none
    1008 Parse Error [empty string]

    BalasHapus
  4. Sepertinya tutorial ini kurang, kenapa hanya tag pembuka <b:skin> sajah, di bagian penutupnya tidak di kasih ini:

    ]]><b:skin/></style>

    Terus juga untuk validasi CSS3 tidak hanya itu saja, ada banyak hal yang masih harus diperhatikan.

    BalasHapus
  5. terima kasih atas tutornya kerana dapat mengurangi error blog saya sampai 50 %

    BalasHapus
  6. gan klo ada pesan error begini ,bagian yang harus di ubah sebelah mana y,nyari sampe pusing gk ktmu

    Property mso-fareast-font-family doesn't exist : "Times New Roman"
    1697 Property mso-fareast-language doesn't exist : IN
    1701 Property mso-fareast-font-family doesn't exist : "Times New Roman"
    1701 Property mso-fareast-language doesn't exist : IN
    2224 Value Error : width Too many values or values are not recognized : autopx

    BalasHapus
  7. mantabs bro...skrg errornya berkurang cuma 2 ...
    1. .comments .comments-content .icon.blog-author
    2. .main-inner .fauxcolumn-center-outer
    klo boleh tanya itu knp ya bro?
    mampirlah ke blog ane http://sebutik.blogspot.com

    BalasHapus

Posting Komentar

Berkomentarlah dengan baik di blog ini ;
1. Dilarang SPAM
2. Berkomentarlah sesuai judul postingan, no OOT (Out of topic)
3. Berkomentarlah dengan kata kata yang sopan

Postingan populer dari blog ini

Ide Cerdas Membuat Artikel Original

Mengoptimasi Blog Dengan Webmaster Tools