Trước đây mình đã có bài viết giúp các bạn tối ưu cho
Blogger Template đạt chuẩn HTML5, nhưng nếu bạn kiểm tra qua từng trang một thì bạn sẽ thấy mình chỉ mới hướng dẫn các bạn tối ưu xong cho phần trang chủ thôi. Chính vì thế để giúp đỡ tiếp tục các bạn có một trang bài viết đạt chuẩn do đó mình mình lập ra bài viết này. Mong rằng qua bài viết này nữa, các bạn sẽ có một template đầy đủ các trang đều ở chuẩn HTML5.
Bài viết
Trong khi đăng bài viết nếu có hình ảnh, bạn phải thêm thuộc tính atl vào ảnh, bạn có thể thêm bằng công cụ mặc định của Blogger
hoặc chuyển sang soạn thảo HTML và thêm vào một cách thủ công.
Sau khi viết bài xong, nếu bài viết có hình ảnh các bạn nên chuyên qua soạn thảo bằng HTML và xóa toàn bộ những thuộc tính này này nếu bạn tìm thấy border="0", imageanchor="1", width ="320", height="115", lưu ý là thông số bên trong width và height có thể sẽ khác nhé.
Nếu hình ảnh bạn có thêm chú thích, thì các bạn tiếp tục tìm xóa đoạn này
align="center" cellpadding="0" cellspacing="0"
như vậy là hoàn tất phần bài viết.
Các nút chia sẻ
Các nút chia sẻ hiện thời bạn sử dụng trong template đôi khi không phù hợp với chuẩn HTML5, bạn phải thay thế hoặc chỉnh sửa hoặc thay thế chúng, mình có bài viết
bạn có thể sử dụng chúng để thay thế những nút có trên blog của bạn.
Breadcumb
Thông thường những breadcrumb hiện tại được chia sẻ cũng như thêm vào hầu hết mọi Blogger Template hiện tại đều không đạt chuẩn HTML5. Để khắc phục mình sẽ hướng dẫn các bạn làm cơ bản như sau, hầu hết là chỉnh xác, do mỗi template mỗi khác nên mình không tìm đủ trường hợp ra được.
Đầu tiên tìm xóa toàn bộ
xmlns:v='http://rdf.data-vocabulary.org/#'
Thay thế toàn bộ
typeof='v:Breadcrumb'
bằng
itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'
Tiếp tục thay thế toàn bộ
property='v:title' rel='v:url'
bằng
itemprop='url'
Lại thay
<a expr:href='data:label.url' itemprop='url'>Home</a>
bằng
<a expr:href='data:label.url' itemprop='url'><span itemprop="title">Home</span></a>
Cuối cùng thay <a expr:href='data:label.url' itemprop='url'><data:label.name/></a>
bằng
<a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a>
Còn đối với những bạn nào cảm thấy khó khăn quá thì có thể để lại nhận xét ở dưới để mình hỗ trợ hoặc hãy xóa bỏ breadcrum trên template của bạn đi và sử dụng
của mình đã chia sẻ.
Bài viết liên quan
Về bài viết liên quan hiện tại thì mình vẫn đang tìm kiếm cách khắc phục, các bạn có thể sử dụng tiện ích bài viết liên quan sau của mình
mặc dù không có thumbnail nhưng vẫn khá là OK, bạn có thể tùy chỉnh lại css để phù hợp hơn với blog của bạn.
Nhận xét
Phần nhận xét của Blogger là một trong những phần khi kiểm tra chuẩn HTML5 xuất hiện lỗi nhiều nhất. Hiện tại để chỉnh sửa lại toàn bộ thì vô cùng khó khăn, mình đưa ra cho các bạn một số lựa chọn như sau:
Chuyển qua sử dụng nhận xét của Google+
Để chuyển qua sử dụng nhận xét của Google+ bạn vào trang tổng quan của blog, chọn vào tab Google+, tick chọn "Sử dụng tính năng Nhận xét của Google+ trên blog này"
Chuyển qua sử dụng nhận xét của Disqus
Disqus là một hệ thống bình luận đã có từ khá lâu rồi, mình cũng rất thích hệ thống bình luận này, các bạn có thể tham khảo qua bài viết
để tự tích hợp hệ thống bình luận này vào blog của mình.
Thay thế nhận xét mặc định bằng bình luận phân cấp hack
Để thay thế bịnh luận mặc định bằng bình luận hack các bạn làm theo hướng dẫn sau đây
sau khi hoàn thành chúng ta tiếp tục làm một số thứ nhỏ nửa.
Tìm đến đoạn mã sau đây
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
và thay thế bằng
<b:if cond='data:blog.pageType == "static_page"'>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;pageID=" + data:post.id' id='comment-editor-src'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id' id='comment-editor-src'/>
</b:if>
Tiếp tục tìm đoạn này
<a name='comments'/>
nếu có thì thay thế bằng
<a id='comments'/>
Tìm
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
thay bằng
<iframe class='blogger-iframe-colorize blogger-comment-from-post' id='comment-editor' name='comment-editor'/>
Tìm tiếp
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
và thay bằng
<iframe class='blogger-iframe-colorize blogger-comment-from-post' id='comment-editor' name='comment-editor' style='display: none'/>
Trong trường hợp khung để nhận xét bị teo nhỏ thì bạn hãy sử dụng đoạn css sau chèn lên trên thẻ ]]></b:skin>
#comment-editor {
width: 100% !important;
background: url('data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBB…bfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7') 50% 30% no-repeat transparent;
border: none;
overflow: hidden;
}
như vậy là hoàn tất.
Lời kết
Sau khi hoàn tất tất cả những thứ trên thì thường thì template của bạn đã 100% chuẩn HTML5 rồi. Nếu bạn làm xong rồi mà vẫn lỗi tùm lum tà la thì cứ để lại nhận xét ở dưới mình sẽ hỗ trợ.
Belum ada tanggapan untuk "Tối ưu trang bài viết Blogger chuẩn HTML5"
Post a Comment