Chủ Nhật, 28 tháng 12, 2014

Thiết lập dạng responsive cho Blogger template

22/08/2014 | Thủ thuật, Thủ thuật Blogger,

Responsive Blogger template đang là xu hướng lựa chọn của rất nhiều blogger. Với thiết kế responsive, blog của bạn sẽ hiển thị độ rộng tương thích với tất cả các thiết bị máy tính, di động. Hiện nay các template dạng responsive dành cho Blogger được chia sẻ khá phổ biến. Hôm nay mình sẽ hướng dẫn các bạn một cách đơn giản để thiết lập dạng responsive cho blog.

Bước 1: Tại trang quản trị, các bạn vào Mẫu > Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ đóng </head>:

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

Bước 2: Chèn đoạn code sau vào trước thẻ ]]></b:skin> là bạn đã hoàn thành thủ thuật:

@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 ------------*/
}

Những dòng in đậm chính là code CSS tùy chỉnh tương ứng của bạn.

Nếu bạn chưa am hiểu về code thì có thể comment bên dưới để mình giúp đỡ.

Chúc các bạn thành công !