Hiện hay bất cứ ở nơi nào, khu vực nào người dùng cũng có thể truy cập website bằng các thiết bị khác nhau như: Desktop, Laptop, Mobifone, Ipad, Iphone...mỗi thiết bị đều có kích thước màn hình khác nhau nên giao diện trang web xuất hiện trên các thiết bị đó thường "bị vỡ" giao diện, đôi khi nó còn gây ra một số lỗi ở một số thiết bị. Thông thường khi chúng ta vừa tạo một blog mới thì tính năng Responsive này vẫn chưa có sẵn trong themes, nên yêu cầu chủ sở hữu trang web tích hợp tính năng này vào blog nhằm giúp blog được hoàn thiện hơn trên tất cả các thiết bị, đồng thời tăng độ trải nghiệm của người dùng và cuối cùng là tăng lưu lượng truy cập thường xuyên. Sau đây là hướng dẫn cách tạo Template Blogger Responsive đơn giản.
Đọc thêm: Cách trỏ tên miền về blog
Cách tạo Template Blogger Responsive
Như các bạn cũng biết, thiết kế Template Blogger Responsive là cách chúng ta làm việc với CSS, chúng ta thao tác và chỉnh sửa phù hợp với xu hướng người dùng. Và trong này chỉ có một thẻ CSS duy nhất mà chúng ta có thể thực hiện đó là Media Queries (media). Nếu như bạn biết thành thạo về CSS thì mọi việc hoàn toàn đơn giản, nhưng nếu bạn không biết hoặc không rành về CSS bạn sẽ làm theo cách sau:
Đăng nhập vào Blogger >> đến Template >> Chỉnh sửa HTML (Lưu ý: Trước khi thao tác hãy nhớ tải mẫu của bạn xuống và sao lưu trước khi thao tác với CSS)
Nhấp vào Chỉnh sửa HTML >>Tìm đến thẻ <head> và dán đoạn mã sau vào dưới thẻ <head> này và lưu lại mẫu.
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'/>Tiếp tục quay lại làm việc với Media Queries
Ở đây bạn có thể thay đổi các định dạng Media Queries theo mẫu sau để phù hợp với kích thước từng thiết bị như: máy tính bàn, laptop, máy tính bảng, điện thoại di động....Hầu hết các cài đặt cho người dùng thường có 5 kích thước: 1280px, 1024px, 990px, 768px, 480px
Trong bảng HTML mẫu, tìm đến thẻ <head> và tiếp theo tìm đến thẻ <Style> mà có chứa đoạn mã như hình vẽ phía dưới
Sau đó dán đoạn mã phía dưới vào dưới thẻ <Style>. Lưu ý: không được xóa các Media Queries củ mà thêm thêm các Media Queries mới.
Đoạn mã dán dưới thẻ <Style> như sau:
@media only screen and (max-width:1024px) {
#container,#navigation,#content-container {width: 800px;}
#content {width:460px;}
#aside {width:200px;}
}
@media only screen and (min-width:768px) and (max-width:989px) {
#container,#navigation,#content-container {width: 700px;}
#content {width:360px;}
#aside {width:200px;}
}
@media only screen and (min-width:480px) and (max-width:767px){
#container,#navigation,#content-container {width: 600px;}
#content {width:260px;}
#aside {width:200px;}
#navigation {display:none;}
}
@media only screen and (max-width:479px){
#container,#navigation,#content-container {width: 100%;}
#content {width:100%;padding:0;}
#aside {display:none;}
}
Như vậy là bạn đã dán thành công và tạo được themes Responsive một cách dễ dàng rồi, bây giờ hãy thử mở trang web ra trên các trình duyệt Chrome, Cốc cốc, Firefox xem có gì lạ không, đặc biệt bạn thử nó trên điện thoại di động xem có lỗi gì không và giao diện có đẹp hơn trước không để sửa chữa. Chúc các bạn thành công.
Đọc thêm: Thiết kế logo cho blog
No comments:
Post a Comment