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.
Bài Viết Cùng Chủ Đề
[Tips] - Tabber widget chuyên nghiệp cho blogspot (MultiTab)Tabber widget hay còn gọi là Multi Tab cho blogspot, Là một tiện ích nằm trên widget mà các mẫu blogspot nước ngoài thư ... 
[Tips] Làm sao để thêm bài viết liên quan cho blogspot
Bài viết liên quan là gì?
Bài viết liên quan hay còn gọi là Related Posts là những bài viết cùng chủ đề (cùng label) n ... 
[Tips] - Tầm quan trọng của liên kết nội bộ (internal links) trong seoLiên kết nội bộ (internal links) là liên kết giữa các trang trên một blogspot, là những từ khóa dùng để gắn kết giữa cá ... 
Widget top comments for blogspot (bài viết comments nhiều nhất)Widget top comments có nghĩa là một widget thống kế số comments cho từng bài viết, bài viết nào nhiều comments nhất sẽ ... 
[Tips] - Tự thiết kế blogspot chuẩn W3C/HTML5W3C là từ viết tắt của World Wide Web Consortium, là nhiệm vụ hướng dẫn World Wide Web với đầy đủ các tiềm năng phát tr ...
1 nhận xét:
Write nhận xéttext comment
ReplyIcon CommentsIcon Comments