Monday, December 14, 2015
Làm cho Blogger / Blogspot đạt chuẩn HTML5
Monday, December 14, 2015
Hiện tại thì nhà nhà học và chuyển sang xài HTML5, người người học và sử dụng HTML5. Hiện giờ cũng 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:
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.
Để 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
Bước 2: Như bạn đã thấy thẻ mở HTML mình đã chuyển thành ghi hoa <HTML> do đó, việc làm nhỏ tiếp theo là kéo xuống cuối cùng template, và thanh thế </html> thành </HTML>.
Bước 3: Thay thế đoạn mã nhỏ nhắn và xinh sắn sau
Bước 4: Tiếp tục tìm đến đoạn mã sau
Bước 5: Tìm và xóa bỏ toàn bộ những đoạn mã sau đây
Bước 6: Tiếp tục xóa bỏ đoạn mã này
Bước 7: Lại tìm xóa tiếp cái này
Bước 8: Tìm xóa nữa đoạn có dạng này (nếu không có thì thôi)
Bước 9: Tìm và thay thế toàn bộ "&" thành "&"
Thêm thuộc tính atl vào mọi thẻ img:
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
Đố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
Không sử dụng thuộc tính name cho thẻ a
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.
Tags:
đạt chuẩn, HTML 5, Tin tức
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
<?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><?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>Bước 2: Như bạn đã thấy thẻ mở HTML mình đã chuyển thành ghi hoa <HTML> do đó, việc làm nhỏ tiếp theo là kéo xuống cuối cùng template, và thanh thế </html> thành </HTML>.
Bước 3: Thay thế đoạn mã nhỏ nhắn và xinh sắn sau
<b:include data='blog' name='all-head-content'/><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><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'/>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'/><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"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"iframe { border: none; overflow: hidden}Không sử dụng thuộc tính name cho thẻ a
<a name='comment-form'><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ấ 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ý.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment