Chào các bạn !
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, dễ thiết kế, giá rẻ, dễ quản lý, và chuẩn seo nên 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ị.
Chia sẻ cách tích hợp giao diện mobi cho blogspot |
Vì vậy, Hôm nay Người chia sẻ xin chia sẻ với 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 ------------*/}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.
@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 ------------*/}
Người chia sẻ - Thanh Tùng
Nhận xét này đã bị tác giả xóa.
Trả lờiXóa