Chào các bạn nói đến cách tích hợp Responsive vào blogspot thì khi bạn search google tìm được rất nhiều kết quả, nhưng những bài viết đó đều chung chung, khi các bạn là newbi thì không thể nào thêm nó vào blogspot của mình được. Hôm nay Khám Phá Blog's sẽ hướng dẫn chi tiết cách tích hợp giao diện mobi cho blogpsot.
Xêm Thêm : Responsive là gì?
Đối với PC thì chúng ta cho hiển thị đầy đủ bố cục
Xêm Thêm : Responsive là gì?
Cách thêm Responsive vào blogspot.
Ở đây mình sẽ ví dụ cho các bạn một blog có 1 sidebar-wrapper và một main-wrapper cho các bạn dể hiểu hơn.1. Tìm hiểu bố cục
Như vậy thì bố cục blog của chúng ta sẽ có Header (tiêu đề or banner blog), main-wrapper (phần nội dung blog), sidebar-wraper (tiện ích, bố cục blog), footer (chân trang blog)
2. Xây dựng bố cục
Bạn phải tự xây dựng bố cục trong đầu của mình, là muốn ẩn cái gì và hiện cái gì khi xem trên giao diện mobi cho từng loại màn hình. dưới đây là tất cả những loại màn hình phổ thông nhất dùng để tích hợp Responsive.
Đầu tiên chèn đoạn code này dưới thẻ <head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>Đoạn code trên giúp nhận dạng từng loại màn hình để hiện thị, và đoạn code bên dưới sẽ giúp hiển thị ở những loại màn hình
@media screen and (max-width : 1280px) {Và dưới đây là cách chèn css cho từng loại màn hình, ở đây mình ví dụ cho các bạn xem nhé
/* ------------ CSS tùy chỉnh cho PC ------------*/
}
@media screen and (max-width : 1024px) {
/* ------------ CSS tùy chỉnh cho iPad ------------*/
}
@media screen and (max-width : 768px) {
/* ------------ CSS tùy chỉnh cho iPad nhỏ ------------*/
}
@media screen and (max-width : 640px) {
/* ------------ CSS tuỳ chỉnh cho iPhone ------------*/
}
@media screen and (max-width : 480px) {
/* ------------ CSS tùy chỉnh cho điện thoại di động đời cao ------------*/
}
@media screen and (max-width : 320px) {
/* ------------ CSS tùy chỉnh cho điện thoại di động thường ------------*/
}
Đối với PC thì chúng ta cho hiển thị đầy đủ bố cục
@media screen and (max-width : 1280px) {
#header-wrapper {
width: 1024px;
margin: 0 auto;
}
#sidebar-wrapper {
float: left;
width: 300px;
margin-top: 20px;
}
#main-wrapper {
float: right;
width: 700px;
margin-top: 20px;
}
#footer-wrapper {
height: auto;
width: 1024px;
overflow: hidden;
}
}
Đối với những loại màn hình nhỏ hơn chúng ta có thể ẩn sidebar đi chẳng hạng
Trong quá trình thực hiện các bạn có thể check thử với công cụ kiểm tra Responsive TẠI ĐÂY
Khám Phá Blog's chúc các bạn thành công, mọi thắc mắc có thể comments bên dưới để được giải đáp.
@media screen and (max-width : 640px) {Cứ như vậy các bạn muốn hiển thị phần nào độ rộng của nó bao nhiu thì các bạn chỉ cần thêm ID của nó vào và thêm kích thước vào và xem thử, nếu chưa cảm thấy ok thì sửa.
#header-wrapper {
width: 600px;
margin: 0 auto;
}
#sidebar-wrapper {display:none;}
#main-wrapper {
float: right;
width: 600px;
margin-top: 20px;
}
#footer-wrapper {
height: auto;
width: 600px;
overflow: hidden;
}
}
Trong quá trình thực hiện các bạn có thể check thử với công cụ kiểm tra Responsive TẠI ĐÂY
Khám Phá Blog's chúc các bạn thành công, mọi thắc mắc có thể comments bên dưới để được giải đáp.
