#12 Thiết kế giao diện Responsive cho blogger

- [tintuc]Thiết kế giao diện Responsive Design là thuật ngữ mới được phát triển trong vài năm gần đây. Theo đó các giao diện website có Responsive sẽ tự động co giãn các thành phần để hiển thị tương thích trên các màn hình thiết bị khác nhau.
Thiết kế giao diện Responsive cho blogger
Thiết kế giao diện Responsive cho blogger
Một giao diện web được thiết kế có chuẩn Responsive sẽ được Google đánh giá cao về mặt SEO vì bạn đã tối ưu được trãi nghiệm người dùng trên các thiết bị khác nhau.

Do tốc độ phát triển di động ngày càng cao mà người dùng có xu hướng di chuyển thuận tiện hơn, nên vì vậy việc thiết kế Giao diện web chuẩn Responsive sẽ là một thiết kế nên có trên các website hiện đại nhằm tối ưu trãi nghiệm cho đọc giả của bạn hiển thị nội dung tốt trên các thiết bị di động, máy tính bảng của họ.

Sau đây mình sẽ hướng dẫn các bạn thiết kế giao diện có Responsive cho Blogger

Bước 1. Khai báo Meta viewport

Vào Mẫu -> Chọn Tùy chỉnh.
Đặt đoạn code sau dưới thẻ  <head> trên trong mã HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
Đoạn code này có tác dụng giúp nhận diện kích thước màn hình để hiện thị nội dung tương tích trên diện tích đó.

Bước 2. Các điều kiện sử dụng CSS để thiết kế giao diện Responisve

Cấu trúc đoạn code Responsive như sau:
@media all and (max-width: XXXpx) {
Các đoạn CSS
}
Lấy ví dụ minh họa:
@media all and (max-width: 320px) {
   body {
      background: #e7e7e7;
   }
}
  • Với ví dụ này khi kích thước thiết bị được co lại có độ rộng 320px thì các đoạn code CSS trong @media all and (max-width: 320px) {...} sẽ được thực thi. Do đó bạn có thay đổi cấu trúc, các thành phần của blogger với các điều kiện này.
Bạn sẽ thêm các điều kiện này bên trong blog của mình ở nơi chứa CSS:
@media screen and (max-width : 1280px) {
/* ------------ 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 ------------*/
}
@media screen and (max-width : 240px) {
/* ------------ CSS tùy chỉnh cho điện thoại di động thường ------------*/
}
Bạn có thể thêm trong template blogger như sau:

@media screen and (max-width: ****px){
#main-wrapper  { width:100%; margin:0px auto; }
.header-wrapper {  width:100%;  }
#content {   margin-right:0; width:100%; float:left;  }
#sidebar {  display:none;  }
#footer-wrapper { display:none; }
}

Trong đoạn này thì phần #main-wrapper nơi sẽ chứa nội dung bài viết sẽ được mở rộng độ rộng width{100%}; Sidebar đồng thời sẽ nhận được thuộc tính #sidebar{display:none} tức là được đi ẩn để dành không gian cho nội dung hiển thị tối đa...

Do vậy bạn cần thành thạo một chút kiến thức về CSS nữa để có thể tùy chỉnh giao diện Responsive cho blogger của mình.

Chúc bạn thành công!
[/tintuc]
Huỳnh Phụng Blogger

TLQT là Blog chia sẻ kiến thức về Marketing, Digital Marketing, Kinh nghiệm làm SEO, Tối ưu Website và nhiều thứ khác

1 Nhận xét

➔ Gửi kèm hình ảnh trên bài viết để được hỗ trợ tốt nhất.
➔ Để bình luận kèm hình ảnh, bạn vào trang Upload Ảnh, kéo thả để Upload hình ảnh lên.
➔ Bạn dán URL link hình ảnh vào khung bình luận và ấn Xuất bản, ảnh sẽ được tự động tải lên.
➔ Không spam trong khung bình luận, hạn chế viết tắt.
➔ Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin

Mới hơn Cũ hơn

POST ADS1

POST ADS 2