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

Bạn, Huỳnh Phụng và người khác
RSS
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!
Dẫn nguồn về Toilaquantri.com nếu bạn có xuất bản lại nội dung từ Website này!


ĐĂNG KÍ

1 nhận xét:

Không Spam Link dưới mọi hình thức.

  1. Nhận code thêm giao diện điện thoại, máy tính bảng cho website - thiết kế giao diện responsive cho tất cả các website mã nguồn wordpress, Joomla, open card, code PHP… giá rẻ
    Làm cho tất cả khách hàng trên toàn quốc
    Giá: 1.5 T
    Liên hệ: 0933 430 108
    Ngoài ra chúng tôi nhận thiết kế website, chỉnh sửa giao diện website theo yêu cầu

    Tại sao cần làm giao diện Responsive (giao diện di động, máy tính bảng)?
    1. Ngày nay smartphone, điện thoại di động ngày càng nhiều , và giá thành rẻ khiến cho số lượng người sử dụng Smartphone và điện thoại di động thay vì dùng desktop/laptop để truy cập web ngày càng tăng . Thêm vào đó sử dụng điện thoại để lướt web rất tiện với những người hay phải di chuyển thường xuyên.
    2. Google kết hợp tính năng “mobile-friendliness” của một trang web trong thuật toán xếp hạng kể từ 21 Tháng Tư, năm 2015, Nghĩa là các websie có giao diện Responsive được đánh giá và xếp hàng cao hơn so với các website đối thủ chưa có tính năng này
    3. Website có tích hợp giao diện di động sẽ có thứ hạng tốt hơn những website cùng lĩnh vực không tích hợp giao diện responsive
    PS: Thật thật xin lỗi nếu thông tin này gây phiền hà cho các bạn

    thiết bị điện schneider

    Trả lờiXóa
ĐĂNG KÍ RSS

Tiếp tục


Bạn quên địa chỉ email?

Bản tin RSS Feeds sẽ được gởi đến email của bạn.


GIỚI THIỆU


HUỲNH PHỤNG
▪ Là 1 chuyên gia setup SEO Systems : Blogger
▪ Hiện công tác Cty Marketing TM - DichvuSEO.INFO
▪ Dịch vụ SEO tổng thể | Lập kế hoạch SEO | Setup hệ thống SEO chuyên nghiệp.

KẾT NỐI & CHIA SẺ



Liên Hệ
  • Thời gian làm việc từ T2-T7 (9h-21h)
  • Văn Phòng: 98 Nguyễn Văn Lượng, Gò Vấp, TPHCM
  • (+84) 932.913.631
    (+84) 868.909.631
  • Haiphungmarketing@gmail.com
  • Huỳnh Phụng Blogger FanPage

  • TÀI KHOẢN

    Số Tài Khoản ACB

    Số TK: 214 081 769
    Họ Tên: Huynh Hai Phung
    Ngân hàng ACB Tân Bình (Ngân hàng Á Châu Tân Bình)
    Thông tin chuyển khoản: (Tên KH + Số tiền chuyển + Nội dung dịch vụ)

    STK VietComBank

    Số TK: 0721 0006 096 05
    Họ Tên: Huynh Hai Phung
    Ngân hàng VCB Bình Thạnh TPHCM
    Thông tin chuyển khoản: (Tên KH + Số tiền chuyển + Nội dung dịch vụ)