Item: Tạo tính năng responsive cho giao diện blogger
Rating: 9.5
Author: Bùi Tấn Đạt

Bởi: Bùi Tấn Đạt - Lúc: 08:54

Tốn hết thời gian 2 ngày để làm theo hướng dẫn từ kết quả tìm kiếm google về cách tạo tính năng responsive cho template blogger.

http://www.mybloggertricks.com/2015/09/create-responsive-blogger-templates.html

Tóm tắt các bước như sau:

1. Tắt giao diện mobile mặc định của blogger

2. Thêm đoạn code ngay sau thẻ <head>

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

3. Thêm CSS code nhận diện độ rộng màn hình, ngay sau ]]></b:skin>

<style>
/* ######## Responsive CSS ########### */
@media only screen and (max-width:384px) {
}

@media only screen and (max-width:640px) {
}

@media only screen and (max-width:960px) {
}

@media only screen and (max-width:1024px) {
}
</style>

4. Sử dụng điều kiện isMobileRequest để ẩn hiện HTML

<b:if cond='data:blog.isMobileRequest == "true"'>
HTML chỉ hiển thị trên Mobile, giá trị "fale" ngươc lại chỉ hiển thị trên Desktop
</b:if>

5. Tạo menu cho giao diện responsive

6. Hình ảnh đăng trong bài viết cũng phải resposive

.post a img, .post img{max-width:95%; height:auto;}

7. Chú ý: khi code CSS màn hình mobile, tablet thì section bên trái cho thuộc tính CSS {width: 100%; float: left} và section bên phải cho thuộc tính {width: 100%; float: none}. Để section bên phải tự động rớt xuống bên dưới section bên trái.