Hiện tại thì HTML5 không còn xa lạ với anh em lập
trình website nữa. Cũng có khá nhiều website đã tự tối ưu lại cho đạt chuẩn HTML5
này để bắt kịp với xu thế hiện đại. Do đó để chạy theo phong trào thì mình bắt
đầu nghĩ tại sao chúng ta không thử làm cho nền tảng Blogger mà chúng ta đang
xài trở thành chuẩn HTML5.
Sau đây mình xin được liệt kê một vài lợi ích mang lại từ chuẩn HTML5 mà mình tổng hợp lại từ nhiều nguồn khác nhau:
- Giúp công cụ tìm kiếm thu thập các văn bản trên website / blog tốt hơn.
- Trình duyệt hiển thị website tốt hơn và nhanh hơn.
- Document Object Model (DOM) ổn định hơn và nhất quán hơn.
- Trong tương lai, có thể tương thích hơn với các trình duyệt mới nhất.
- Biết tình trạng của một website / blog chi tiết hơn (các liên kết bị phá vỡ, các liên kết chết, v.v...)
Hiện tại thì mình nghĩ cũng nhiều bạn hướng dẫn về vấn đề làm sao để làm cũng như thiết kế một Blogger template đạt chuẩn này. Nhưng vẫn làm ra bài viết này vì hi vọng nó sẽ chi tiết và dễ hiểu hơn các bài viết khác trên mạng.
Tạo một Blogger template đạt chuẩn HTML5
Đầu tiên để biết được làm sao để tạo ra một Blogger template chuẩn HTML5 thì mình nghĩ bạn phải biết thế nào để thiết kế Blogger template thông thường đã. Nếu đã "OK! Biết rồi!" thì chúng ta tiếp tục thôi.
Để làm cho bất cứ một website nào cho đạt chuẩn HTML5 thì cũng không có gì ghê gớm, công việc bạn chỉ cần là kiểm tra website của bạn tại đây http://validator.w3.org, và sửa những gì mà nó thông báo cho chúng ta thôi.
Đối với Blogger sau khi đã thử nghiệm, thì mình xin đưa ra giải pháp chung nhất, thay thế những đoạn mã mặc định theo các bước sau trên template để nó đạt chuẩn HTML5.
Đầu tiên đương nhiên để chỉnh sửa bạn phải vào Chỉnh sửa HTML tại phần tổng quan của blog (nhắc cho có thôi).
Bước 1: Thay thế ngay những dòng đầu tiên của template
Để làm cho bất cứ một website nào cho đạt chuẩn HTML5 thì cũng không có gì ghê gớm, công việc bạn chỉ cần là kiểm tra website của bạn tại đây http://validator.w3.org, và sửa những gì mà nó thông báo cho chúng ta thôi.
Đối với Blogger sau khi đã thử nghiệm, thì mình xin đưa ra giải pháp chung nhất, thay thế những đoạn mã mặc định theo các bước sau trên template để nó đạt chuẩn HTML5.
Đầu tiên đương nhiên để chỉnh sửa bạn phải vào Chỉnh sửa HTML tại phần tổng quan của blog (nhắc cho có thôi).
Bước 1: Thay thế ngay những dòng đầu tiên của template
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><head>bằng đoạn này
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html><HTML><head> <meta charset='utf-8'/>Bước 3: Thay thế đoạn mã nhỏ nhắn và xinh sắn sau
<b:include data='blog' name='all-head-content'/>bằng cả nùi mã dưới đây
<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>Bước 4: Tiếp tục tìm đến đoạn mã sau
<b:skin>thay thế bằng
<link href='//www.blogger.com/static/v1/widgets/3841957138-widget_css_bundle.css' rel='stylesheet' type='text/css'/> <style type="text/css"> <!-- /*<b:skin>Bước 5: Tìm và xóa bỏ toàn bộ những đoạn mã sau đây
<b:include name='quickedit'/>
nhớ là mỗi widget mới thêm vào nó đều có đoạn này, nên mỗi
lần thêm widget là mỗi lần bạn phải xóa.
Bước 6: Tiếp tục xóa bỏ đoạn mã này
<a expr:name='data:post.id'/>
Bước 7: Lại tìm xóa tiếp cái này
<b:include data='post' name='postQuickEdit'/>
do xóa nó đi rồi nên cái phần mã khai báo includable của nó
không cần thiết nữa, nên nếu muốn bớt mã tại template bạn cũng có thể xóa luôn
đoạn mã như thế này
<b:includable id='postQuickEdit' var='post'><b:if cond='data:post.editUrl'><span expr:class='"item-control " + data:post.adminClass'><a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'><img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/></a></span></b:if></b:includable>
Bước 8: Tìm xóa nữa đoạn có dạng này (nếu không có thì
thôi)
<div class='post-share-buttons goog-inline-block'>........</div>
Bước 9: Tìm và thay thế toàn bộ "&" thành
"&"
Một vài lưu ý nhỏ khác
Sau khi hoàn thành tất cả các bước trên thì thông thường
Blogger template của bạn đã gần như đạt chuẩn HTML5 ở trang chủ rồi, nhưng kiểm
tra và có thể template của bạn vẫn còn báo lỗi thì bạn phải tiếp tục làm những
điều nhỏ sau đây:
Thêm thuộc tính atl vào mọi thẻ img:
<img alt="HTML5" src="địa chỉ ảnh" />
Không sử dụng border="0" cho thẻ img, thay vào đó
bạn có thể
Sử dụng thuộc tính style
style="border: none"
Sử dụng CSS riêng biệt
img { border: none }
Đối với thẻ iframe cũng tương tự như vậy không sử dụng
frameborder="0" cũng như allowtransparency:"true" và
scrolling="no" thay vào đó bạn có thể
Sử dụng thuộc tính style
style="border: none; overflow: hidden"
Sử dụng CSS riêng biệt
iframe { border: none; overflow: hidden}
Không sử dụng thuộc tính name cho thẻ a
<a name='comment-form'>
thay vào đó bạn hãy sử dụng thuộc tính "id" và có
thể làm như thế này
<a href='#comment-form'>
Lúc bạn kiểm tra có thể còn nhiều thứ nhỏ khác, không chỉ
đơn giản như vậy và mỗi template mỗi khác nên minh không thể diễn giải tất cả
trong một bài được. Do đó nếu cần hỗ trợ thì hãy để lại nhận xét ở dưới.
Lời kết
Thực thế đã chứng minh HTML5 đang ngày một lớn mạnh, và rất nhiều blog đã đưa ra các ưu điểm trong việc sử dụng HTML5. Do đó việc làm cho
nền tảng mà chúng ta sử dụng đây Blogger đạt chuẩn HTML5 thì hoàn toàn là điều
hợp lý.
P/S: Bài viết này mới hỗ trợ cho các bạn được trang chủ
chuẩn HTML5 thôi, để toàn bộ các trang kể từ trang bài viết được mời các bạn
xem tiếp bài viết Tối ưu trang bài viết Blogger chuẩn HTML5
0 Bình luận:
Đăng nhận xét
Khi các bạn đóng góp ý kiến nhớ chú ý ngôn từ cho phù hợp với thuần phong ,mỹ tục văn hóa nước ta. Cảm ơn!