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
Kho Template Blogspot Responsive 2016
http://share123blog.blogspot.com
Free download responsive premium blogger template
Icon CommentsIcon Comments