Có bao nhiu cách để thêm giao diện mobi vào blogspot?
Thông dụng đối với blogspot thì tôi thấy có 2 cách để làm việc này- Tích hợp Responsive
- Thêm một giao diện khác để hiển thị trên mobi
1. Tích hợp Responsive
Cách này thì cực kỳ khó, vì nó đòi hỏi người thiết kế phải am hiểu về CSS và bố cục của blogspot, giúp họ có thể điều chỉnh độ rộng hẹp khi xem trên mọi thiết bị di động. Tuy khó nhưng tôi cũng sẽ nói sơ quá việc thêm Responsive vào blogspot như thế nào?Đưa Responsive vào blogspot thì chúng ta có 2 phần
Một là thẻ meta giúp nó nhận dạng các loại màn hình khi người dùng lướt web ở thiết bi di động nào thì nó sẽ nhận dạng và định hướng cho css hoạt động. Đoạn meta này nằm dưới thẻ <head> và nó như sau
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>Phần thứ 2 là css khi thẻ meta nhận dạng được loại màn hình thì sẽ báo cho css co dãn blog của bạn theo từng loại màn hình đó. Và css thì được thêm vào trên thẻ </b:skin> hoặc trong thẻ <style>. Và nó sẽ có dạng như sau
@media screen and (max-width : 1280px) {Giải thích code trên :
/* ------------ 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 : 1280px) ý nghĩa của nó là, khi người dùng lướt web ở thiết bị là máy tính có độ phân giải của màn hình là 1280px thì nó sẽ có giản theo css bên dưới. Và tương tự đối với các thiết bị khác như Ipad, Iphone, điện thoại thì cũng tương tự như thế.
- Css tùy chỉnh là bạn tự thiết lập cho blog của mình vì mỗi blog có css khác nhau, ẩn hay hiện tiện ích gì khi xem trên các thiết bị di động khác nhau nữa.
2. Thêm một giao diện khác để làm mobi
Đây là cách phổ thông vì cách này khá đơn giản, có nghĩa là bạn kiếm một giao khác, có thể là một template blogspot wap và tích hợp vào blogspot để khi xem trên mobi nó hiển thị giao diện của template blogspot wap này. Cách này nó giúp đa dạng blog của bạn hơn nhưng ngược lại thì nó có phần hơi nặng cho blog của bạn vì nó sử dụng css và js của 2 template blog trong 1.Cách này tôi đã có 1 video hướng dẫn nên ko trình bày ở đây, nếu bạn có nhu cầu hãy xem video bên dưới nhé.
Video hướng dẫn thêm giao diện wap để làm giao diện mobi cho blogspot
Bài Viết Cùng Chủ Đề
[Tips] - Lấy data và cách phòng tránh bị ăn cắp data blogspotChào các bạn, việc ăn cắp data blogspot hiện nay là vấn đề đâu đầu cho các blogger hiện nay, vì toàn bộ bài viết trên b ... 
[Tips] - Thêm nút Pin Button cho ảnh bài viết BlogspotPin Button là công cụ share ảnh lên mạng xã hội Pinterest, mọi khi các bạn phải coppy link và lên trang này mới có thể ... 
[Tips] - Hướng dẫn tối ưu blogspot chuẩn PageSpeed InsightsPageSpeed Insights là công cụ check tối ưu cho blogspot và website, với công cụ này khi bạn check với website mà tầm 80 ... 
[Tips] - Những thủ thuật blogspot cần phải có cho blogThủ thuật blogspot là gồm những tiện ích giúp làm đẹp cho blogspot và giúp blog trở nên chuyên nghiệp hơn, nhưng cũng t ... 
Cách để bạn bắt đầu với một blog miễn phíTôi rất vui mừng khi nghe điều này mà bạn đang bắt đầu blog của riêng bạn nhưng không may, bạn không biết cách để bạn b ...
1 nhận xét:
Write nhận xétGiờ ai cũng phải thiết kế web thân thiện với giao diện điện thoại.
Replykhách sạn Hà Nội
Khách sạn Cửa Lò
Icon CommentsIcon Comments