Thứ Sáu, 1 tháng 5, 2015

Ngày nay blogspot đang phổ biến nhất hiện nay vì ưu điểm của nó là tiện lợi, giá rẻ, dễ quản lý, và nhu cầu tất yếu của Blogspot là tích hợp giao diện mobi cho blogspot được người dùng đặt lên hàng đầu. Vì phần lớn người dùng hoặc khách hàng của họ quá bận rộn và thường xuyên online bằng điện thoại hoặc ipad. Các bạn có thể xem hình dưới là giao diện sau khi đã được tích hợp Responsive được hiển thị trên tất cả thiết bị.
Làm sao để tích hợp Responsive vào blogspot?
Làm sao để tích hợp Responsive vào blogspot?
Vì lý do này nên mình hướng dẫn các bạn cách tích hợp Responsive vào website hoặc blogspot
Tất cả những thao tác sau các bạn thực hiện trên templates blogspot cần tích hợp. Đăng nhập vào phần quản trị blogspot > Mẫu > Chỉnh sửa HTML.
Bước 1 : Trên templates blogspot các bạn tìm giúp mình thẻ <head> và thêm thẻ meta sau ngay dưới nó.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
Bước 2 : Tiếp tục thao tác trên templates blogspot của mình các bạn tìm đến thẻ ]]></b:skin>, tức là nơi lưu trữ css của blogspot và thêm đoạn code css này vào bên trên thẻ ]]></b:skin>.
@media screen and (max-width : 1280px) {/* CSS FOR NETBOOK AND DESKTOP ------------*/}
@media screen and (max-width : 1024px) {/* CSS FOR TABLETS ------------*/}
@media screen and (max-width : 768px) {/* CSS FOR SMALL TABLETS ------------*/}
@media screen and (max-width : 640px) {/* CSS FOR IPHONE ------------*/}
@media screen and (max-width : 480px) {/* CSS FOR MOBILES ------------*/}
@media screen and (max-width : 320px) {/* CSS FOR SMALL OLD MOBILES ------------*/}
Hai đoạn code này sẽ hỗ trợ nhau giúp khi bạn vào bất cứ thiết bị nào thì main blogspot của bạn sẽ co giản hợp lý mà không bị vỡ khung như các trường hợp thường gặp.

0 nhận xét:

Đăng nhận xét