[Tips] - Tự thiết kế blogspot chuẩn W3C/HTML5

W3C là từ viết tắt của World Wide Web Consortium, là nhiệm vụ hướng dẫn World Wide Web với đầy đủ các tiềm năng phát triển của giao thức và các hướng dẫn mà bảo đảm lâu dài sự tăng trưởng của các trang web.

W3C là một trong số các chuẩn cho thiết kế web hiện nay, nó không phải là chuẩn quyết định mọi việc diễn ra trên môi trường Internet. Nhưng W3C giúp bạn định hướng khi xây dựng website.

Vậy làm sao để blogspot đạt chuẩn W3C

Để làm những việc này thì chúng ta cần chỉnh sửa templates blogspot một tý cho phù hợp, tất cả thao tác dưới đây đều thực hiện trên templates (mẫu). Và thay đổi những chi tiết sau

1.Tìm đến thẻ <head> và xóa toàn bộ code bên trên nó và thay bằng

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>

2.Chỉnh sửa thẻ </html> thành </HTML>

3.Xóa đoạn code

<b:include data='blog' name='all-head-content'/>

Và thay thế bằng

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
</b:if>
</b:if>

4.Tìm đến thẻ <b:skin><![CDATA[ xóa nó đi và thay bằng

<link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/> <style type="text/css"> <!-- /*<b:skin><![CDATA[*/]] <style>

Sau khi đã làm tới đây thì các bạn tiến hành lưu mẫu lại và kiểm tra thử blog của bạn đã đạt chuẩn W3C/HTML5 chưa bằng công cụ

http://validator.w3.org/

Vậy là chúng ta đã thành công tự mình thiết kế giao diện chuẩn W3C/HTML5 cho riêng mình, nếu gặp lỗi gì trong quá trình thiết kế xin hãy để lại comments, chúng tôi sẽ hỗ trợ bạn.