Tạo ảnh logo blogger đạt chuẩn HTML5

Ở những bài viết trước mình đã hướng dẫn các bạn làm thế nào để làm cho một Blogger  Template đạt chuẩn HTML5, nếu bạn nào đã test qua thì sẽ thấy mọi thứ đã hầu như khá là đầy đủ rồi. Nhưng nếu có bạn nào test kĩ càng hơn ở những thứ lặt vặt nhỏ như, thay ảnh logo vào widget tiêu đề blog, thì đoạn mã hình ảnh đó sẽ báo lỗi không đạt chuẩn HTML5. Cụ thể như phần lưu ý ở cuối bài bài viết trước, nếu bạn tinh ý bạn sẽ thấy để được chuẩn HTML5 thì không được sử hầu hết các thuộc tính khác  "style", "id", "class".

Và như hình trên thì bạn đã thấy các thuộc tính như "height" và "width" đã bị bảo lỗi. Chính vì lí do này, mình lập ra bài viết ngắn gọn này để giúp các bạn có nhu cầu khắc phục việc trên.

Bây giờ việc đầu tiên là bạn sẽ tìm đến đoạn mã này (lưu ý đôi khi bạn phải up ảnh lên rồi, thì trong template mới có đoạn mã này)

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

đây chính là đoạn mã hiện ảnh logo của chính ta trong widget tiêu đề của Blogger / Blogspot. Bạn thấy những phần mình đã tô chính là nguyên nhân gây ra lỗi. Bây giờ để khác phục bạn hãy thay thế đoạn mã trên bằng đoạn mã mà mình đã sửa lại ở đây

<img expr:alt='data:title' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:style='&quot;height:&quot; + data:height + &quot;width:&quot; + data:width + &quot;display: block&quot;'/>

đoạn mã này mình đã xóa thuộc tính "height" và "width" và trong thuộc tính "style" mình đã nhét 2 bọn nó vào bằng css. Nếu bạn muốn biết mình đã làm thế nào bạn hãy xem qua cách sử dụng thẻ data trong Blogger.

Làm tới đây là bạn đã khắc phục được việc đoạn mã chèn ảnh logo vào Blogger không đạt chuẩn HTML5. Nếu các bạn có thắc mắc hoặc cần hỗ trợ về cách làm bất kì thành phần nào trên blog của bạn đạt chuẩn HTML5 hãy cứ để lại lời nhắn cho mình tại phần nhận xét phía dưới.