Thiết kế một trang web/blog theo chuẩn HTML5 giúp trang của bạn SEO tốt hơn. Tất nhiên nhiều người chỉ chú ý đến chuẩn HTML5 (W3C) của XML mà quyên mất răng trong trang web còn một thành phần khác cấu tạo nên nó, đó là CSS. Về cơ bản chỉnh sửa lỗi W3C liên quan đến CSS đơn giản hơn XML vì đơn giản bạn chỉ cần bỏ đi những thuộc tính chuẩn W3C hiện nay không hỗ trợ là được.
» Làm thế nào để biết trang của bạn có chuẩn hóa CSS theo W3C hay không?
Rất đơn giản bạn chỉ cần truy cập vào trang bên dưới và điền tên trang web/blog của bạn vào và bấm check để kiểm tra xem CSS của bạn đã chuẩn hóa theo W3C hay chưa:
- Nếu trang của bạn đã chuẩn w3c sẽ có một thông báo như bên dưới:
» Chuẩn hóa HTML5 (W3C) có những yêu cầu nào.
Thông thường sẽ có 2 phần trong cấu tạo một tran web cần chuẩn hóa W3C là:
- Chuẩn hóa XML (code dưới dạng HTML)
- Chuẩn hóa CSS (đoạn code trước thẻ ]]><b:skin> và trong cặp thẻ <style>
Trong khuôn khổ bài viết này mình chỉ giới thiệu đến các bạn cách Chuẩn hóa CSS valid HTML5 (W3c). Để chỉnh sửa HTML chuẩn hóa HTML5 thì các bạn đọc thêm bài viết sau nha:
» Làm sao để sửa lỗi css theo chuẩn W3C
1. Không thêm css vào trong thẻ XML- Nhiều người sai lầm khi tiến hành cho css trực tiếp vào trong thẻ xml thông qua thẻ style="thuộc tính css" ví dụ đoạn code hình ảnh bên dưới là sai:
<img alt="Mô tả ảnh" src="URL_ANH" title="Tiêu đề ảnh" style="border:2px;background:#eee"/>
- Trường hợp này viết đúng bạn phải thêm một class hoặc id và chèn css thông qua class hoặc id đó. Ví dụ vẫn trường hợp chèn ảnh trên. <img alt="Mô tả ảnh" src="URL_ANH" title="Tiêu đề ảnh" class="cssanh"/>
và định dạng hình ảnh thông qua thuộc tính class chèn trước thẻ ]]></b:skin> như sau:.cssanh{border:2px;background:#eee}
2. Sử dụng tham số không đúng.
- Trong CSS có một số thuộc tính có số giới hạn cụ thể do vậy nếu bạn sử dụng nó không đúng nó sẽ báo lỗi w3c.
Ví dụ: Thuộc tính opacity có giá trị lớn nhất là opacity:1 nhưng bạn lại để opacity:2 là sai. Giá trị được chấp nhận nằm trong khoảng opacity:0 đến opacity:1
3. Sử dụng hình ảnh background không đúng
Base64 image là một hình thức mã hóa hình ảnh được khá nhiều người sử dụng tuy nhiên CSS chuẩn w3c không sử dụng các hình ảnh mã hóa dưới dạng base64 image. Do vậy nếu sử dụng hình ảnh làm hình nền thì bạn nên chọn một hình ảnh và tải nó trực tiếp lên host của bạn và thêm vào nha.
4. Xóa bỏ Styleseet css mặc định của blogger.
- Bình thường blogger cung cấp cho chúng ta 2 đoạn mã CSS. Bạn có thể thấy 2 đoạn mã này khi xem nguồn của trang blog của bạn như sau:
- Để xóa 2 file css đó bạn chỉ cần thêm đoạn mã bên dưới vào trước đoạn <b:skin><![CDATA[/* trong mẫu của bạn và lưu lại.
4. Xóa bỏ Styleseet css mặc định của blogger.
- Bình thường blogger cung cấp cho chúng ta 2 đoạn mã CSS. Bạn có thể thấy 2 đoạn mã này khi xem nguồn của trang blog của bạn như sau:
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/3841957138-widget_css_bundle.css' /> <link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=1284053134771667067&zx=8df275b9-8201-444a-9f80-f8a0563c7851' />- 2 file trên có tác dụng định dạng một số tiện ích mà blogger cung cấp như: Popularpost, Archive,feed, search,.... Tuy nhiên nếu để 2 file này hoạt động thì khi kiểm tra w3c bạn sẽ thấy phát sinh rất nhiều lỗi, vì trong đó nó sử dụng rất nhiều thuộc tính css mà chuẩn w3c (html5) không hỗ trợ. Vậy để hết thông báo lỗi đó bạn phải ngăn không cho 2 tiện ích này hoạt động.
- Để xóa 2 file css đó bạn chỉ cần thêm đoạn mã bên dưới vào trước đoạn <b:skin><![CDATA[/* trong mẫu của bạn và lưu lại.
<!--<style type='text/css'/>-->
- Điển hình của việc thêm đoạn mã trên là avantar comment sẽ không hiển thị. Do vậy có 2 cách khắc phục lỗi này là:- Lưu ý: Khi chèn đoạn mã trên vào trong mẫu của bạn đồng nghĩa với việc bạn vô hiệu hóa 2 đoạn mã css của blogger, tức là lúc này một số tiện ích mà blogger cung cấp sẽ hiển thị không theo hàng lối (nếu không muốn nói là linh tinh). Do vậy nếu thêm đoạn này bạn phải viết mã css mới cho những tiện ích đó để định dạng lại nó.
+ Cách 1: Bạn tìm đoạn code:
<data:comment.authorAvatarImage/>Và thay thế nó thành:
<img expr:src='data:comment.authorAvatarSrc'/>+ Cách 2: bạn thêm đoạn mã bên dưới vào trước thẻ </head> (đoạn mã này được Duypham viết)
<script type='text/javascript'>var cL=document.getElementById('ID-Comment');c=cL.getElementsByTagName('span');if(c){for(z=0;z<c.length;z++){f=c.item(z).innerHTML;if(f.indexOf('style="')!=-1){f=f.replace(/src="http:\/\/img1.blogblog.com\/img\/blank.gif"/,'');f=f.replace(/display: none/i,'');f=f.replace(/\/s512-c\//,'/s45-c/');f=f.replace(/longdesc=/i,'src=');c.item(z).innerHTML=f}}}</script>
5. Lỗi "is an unknown vendor extension" sử dụng thuộc tính css mà w3c không hiểu.
- Như các bạn đã biết hiện nay có rất nhiều trình duyệt như firefox, chroome, opera, safari,ie,.. Mỗi loại này có một hình thức hiển thị và hiểu css khác nhau. Do vậy khi thiết kế người ta thường thêm vào trước một số thuộc tính css để các trình duyệt có thể hiểu. Nhưng w3c thì không nghĩ vậy, tất cả những thuộc tính dành riêng cho từng trình duyệt đều không chuẩn w3c như:
- Thuộc tính bắt đầu bằng dấu gạch ngang dưới ( _ ) dành cho IE ví dụ: _width:100px hay _padding:0px,....
- Thuộc tính bắt đầu bằng -moz dành cho trình duyệt firefox ví dụ: -moz-inline-box, -moz-box-orient, -moz-border-radius, -moz-transition, -moz-user-select,....
- Thuộc tính bắt đầu bằng -o dành cho trình duyệt opera ví dụ: -o-transition, -o-linear-gradient, ....
- Thuộc tính bắt đầu bằng -ie dành cho trình duyệt internet explorer như: -ie-box-shadow, ....
- Thuộc tính bắt đầu bằng -webkit dành cho trình duyệt google chroome như: -webkit-box-shadow, -webkit-box-sizing,....
6. Không thêm CSS vào trong các cặp thẻ <style> nếu không cần thiết.
- Với một số blogger có host riêng thì nên chèn nó vào trong file.css rồi nhúng nó vào trang của bạn.
- Với những blogger không có khả năng tài chính thì CSS bạn nên đặt nó trước thẻ ]]></b:skin> của mẫu. Như vậy sẽ không phát sinh lỗi khi chuẩn hóa HTML5 thay đổi cách sử dụng cặp thẻ <style type='text/css'> Nếu để ý bạn sẽ thấy trong trang của mình không có đoạn mã nào chèn trong cặp thẻ style cả.
Note: Nói chung theo như kinh nghiệm của Namkna thì chỉnh sửa CSS chuẩn hóa HTML5 dễ thực hiện hơn rất nhiều so với chỉnh sửa XML chuẩn hóa HTML5. Tuy nhiên nếu có bất cứ thắc mắc nào hãy để lại comment của bạn ở dưới bài viết này mình sẽ giải đáp. Và đừng quyên bấm like chia sẻ bài viết này để nhiều người hơn nữa biết đến nha.
Nhận xét
Thực sự 2 bài viết về html5-w3c vừa rồi quá tuyệt vời luôn, ít thấy ai chia sẻ về vấn đề này hết, tìm nát cái google mà k thấy dc, nay thì may nhờ bài viết của anh mà fix dc khá nhiều lỗi, cảm ơn anh rất nhiều.
Trả lờiXóaThấy mọi người khó khăn trong vấn đề đó nên anh chia sẻ để mọi người cùng biết và khắc phục thôi e.
Xóaterocket ơi liên hệ với mình theo số 0944812582 mình có việc quan trọng nhờ bạn tư vấn
XóaCảm ơn bạn, mình đã làm theo hướng dẫn của Bạn trong bài này, kết quả test thành công !
Trả lờiXóaTuy nhiên có một vấn đề mới nảy sinh: avarta của comment trong bài viết không hiển thị nữa.
Bạn có cách nào giúp mình sửa lỗi này không thì chỉ giúp nhé. Cảm ơn!
Vì ảnh avatar hiển thị được nhờ đoạn js mà bạn đã thêm chú thích vào nên không hoạt động nữa, phải viết riêng js cho nó. Vì thế bạn thêm đoạn js sau
Xóa<script type='text/javascript'>var cL=document.getElementById('ID-Comment');c=cL.getElementsByTagName('span');if(c){for(z=0;z<c.length;z++){f=c.item(z).innerHTML;if(f.indexOf('style="')!=-1){f=f.replace(/src="http:\/\/img1.blogblog.com\/img\/blank.gif"/,'');f=f.replace(/display: none/i,'');f=f.replace(/\/s512-c\//,'/s45-c/');f=f.replace(/longdesc=/i,'src=');c.item(z).innerHTML=f}}}</script>
Nhớ thay ID-Comment thành ID comment của bạn
Trước đây lỗi này mình cũng gặp phải nhưng may có bác Duy Phạm giúp nên mới biết :D
Mình từng thử thấy đoạn này cũng khá hiệu quả:
Xóa<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
thay cho đoạn hình ảnh avantar cũ :)
Cảm ơn Huy Cò VIP nhiều, mình làm được rồi!
XóaNgoài ra ta cũng có thể dùng cách khác là tìm đoạn code:
Xóa<data:comment.authorAvatarImage/>
Và thay thế nó thành:
<img expr:src='data:comment.authorAvatarSrc'/>
ID-Comment là cái ID gì thế?
XóaTHẻ này mỗi blog sẽ khác nhau hãy để lại URL mình chỉ cho.
XóaVấn đề này khá đau đầu cho những blogger không am hiểu nhiều về code
Trả lờiXóaMình cũng đang chỉnh theo chuẩn w3c cho blog của mình
Rất cảm ơn Nam đã viết bài về chủ đề này, bạn sẽ là người tiên phong tạo ra làm sóng chuẩn góa blogger cho anh em blogger
thanhks
Cảm ơn blog của Nam, mình đã sửa lại cơ số lỗi theo chuẩn w3c và việc còn lại bây giờ là phát triển nó lên nữa thôi :) ...
Trả lờiXóaThanks nhiều :)
Không có gì rất vui vì bài viết có ích với bạn.
XóaA Nam ơi em quảng cáo popup thì đăng ký GA dc ko nhỉ??? Hi
Trả lờiXóaTrong diều khoản google không cấm tuy nhiên nếu cài GA thì không nên đặt pop vì rất có thể họ sẽ hiểu mình tăng lượng click thông qua pop thì mệt lắm :)
Xóagiúp e vs anh ơi, khi em thêm cái " <!--<style type='text/css'/>-->" thỳ web có vài chỗ hình ảnh nó ko hiển thị đúng, chỉnh sửa theo 2 cách trên rùi mà cũng ko trở lại vị trí bình thường , web của e: http://hungnguyenbay.blogspot.com/. help me với, :(((((((((((((
Trả lờiXóaKhi thêm đoạn đó vào một số tiện ích cung cấp bởi blogger sẽ bị như vậy em ak. Vì nó xóa toàn bộ các css và js mặc định của blogger.
XóaKhắc phục bằng cách em mở file
https://www.blogger.com/static/v1/widgets/3841957138-widget_css_bundle.css
và copy đoạn mã css liên quan đến tiện ích em muốn dùng dán vào trước thẻ ]]></b:skin>
Nhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóacho mình hỏi lỗi này là sao nhỉ
Trả lờiXóa105 Invalid separator in shape definition. It must be a comma.
Cái dòng 105 là sao nhỉ, làm sao mình biết lỗi nó nằm ở đâu bạn nhỉ.
Cám ơn bạn nhiều!
p/s: mọi thứ quá oke, sẽ vào blog của bạn cập nhật thường xuyên ^^
Đó chỉ là tên của lôi thôi => Có rất nhiều nguyên nhân gây nên lỗi đó. Bạn phải copy đầy đủ thông báo lôi đó mình mới có hướng khắc phục cho bạn được nha bạn.
Xóaa ơi a có thể sửa giúp e cái code blog của e được không ạ, e mới lập blog nên ko rõ, vs lại nhiều lỗi quá nên e ko biết làm gì, cảm ơn anh rất nhiều . .
Trả lờiXóatên blog của e: http://vn-teen24h.blogspot.com/
code: https://www.mediafire.com/?a7ch5mvbx9fp1l5
Hiện tại thì chưa được em ak. mấy hôm nay a hơi bận, nếu được thì em chờ vài hôm nữa nha.
XóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaDownload một template có sẵn trên mạng rồi update thôi. Giờ nhiều giao diện đẹp mà cũng dễ tùy chỉnh lắm.
Trả lờiXóahttp://thuthuatthietke.blogspot.com/
Trả lờiXóahihi, chuẩn ko cần chỉnh
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.vanvietblog.blogspot.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en#css
Trả lờiXóaAnh nam ơi, có lỗi này mà em không thể nào tìm được, anh có thể giúp em không ạ?
Không có thông báo lỗi tức là nó đã chuẩn CSS W3C rồi em ak.
XóaCủa em vẫn bị lỗi mà anh "Parse Error -->".
XóaNguyên do trong css của em chứa các đoạn chú thích không cần thiết, anh ví dụ đoạn:
Xóalegend {
border: 0; /* 1 */
padding: 0;
white-space: normal; /* 2 */
margin-left: -7px; /* 3 */
}
em có thể viết lại thành:
legend {
border: 0;
padding: 0;
margin-left: -7px;
}
Một số thuộc tính white-space và /*....*/ trong css không cần thiết.
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.
Trả lờiXóaA nam ơi. Lỗi này fix như thế nào ạ
Lúc đầu ko bị gì chỉnh sao mà nó bị lỗi Parse Error } rồi chỉ mình khắc phục nhé!
Trả lờiXóaSite: http://www.toilaquantri.com/
Em chào anh ạ!
Trả lờiXóaMong anh giúp đỡ, trang web của em là vaytieudungtinchap.net có nhiều lỗi nhưng em không biết phải chỉnh thế nào?? Mong anh giúp đỡ em với ạ!
Thank anh nhiều!
Chào anh!
Trả lờiXóaMong anh giúp đỡ, trang web của em làm www.bandatquan12giare.net có nhiều lỗi
Em mới tập làm blog nên chưa phải chỉnh thế nào
Mong anh giúp đỡ em với ạ
Trân trọng
Chào anh!
Trả lờiXóaMong anh giúp đỡ, trang web của em làm www.bandatquan12giare.net có nhiều lỗi
Em mới tập làm blog nên chưa phải chỉnh thế nào
Mong anh giúp đỡ em với ạ
Trân trọng
http://www.quangcaothienma.com/
Trả lờiXóahttp://www.duquangcao.vn/
Trả lờiXóaBạn ơi giúp mình với, minh muốn hình ành trở nên đẹp hơn khi rê chuột vào
Trả lờiXóawww.gothongchile.tk
cảm ơn
Bạn ơi giúp mình với, minh muốn hình ành trở nên đẹp hơn khi rê chuột vào
Trả lờiXóawww.gothongchile.tk
cảm ơn