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] - Sticky menu kèm hộp tìm kiếm cho blogspotNói đến stick menu là chúng ta nói đến một menu ghim cố định trên top blog, nó giúp tiện lợi hơn khi chúng ta lăn thanh ... 
[Tips] - Menu chuyên mục Css full Responsive cho Blogspot
Tiếp tục share cho các bạn một mẫu menu dùng css siêu đẹp cho blogspot dùng làm menu chuyên mục, điều đặc biệt ở menu ... 
[Tips] - Hướng dẫn tích hợp AncPlayer cho BlogspotAncPlayer là trình chơi nhạc hay xem phim cho blogspot cực kỳ chuyên nghiệp mà bất kỳ blog phim hay nhạc đều phải có, t ... 
[Tips] - Quy trình để seo blogspot từ A đến ZChào các bạn nói đến seo blogspot thì có nhiều bạn nói với tôi rằng rất khó nhưng khi bạn đã lòng đam mê và nhiệt huyết ... 
[Tips] - 6 Lời khuyên bạn nên làm khi seo blogspotSEO (Search Engine Optimization) là điều quan trọng nhất cho những người làm blogger. Nếu không có tối ưu hóa blog toàn ...
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