Home blogger Tạo tính năng responsive cho giao diện blogger

27 tháng 10, 2015

Tạo tính năng responsive cho giao diện blogger

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.

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.

Fixed Layout
Responsive layout
Responsive khi xem bài viết

8. Kết quả đã thành công

Đăng bởi: blue Vào lúc: 08:54 Danh mục:

Người đăng:

0 nhận xét:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)

Bình Luận Mới

Weblog forum mới nhất

Máy tính mới nhất

Cơ khí mới nhất

Nhãn