Chỉnh giao diện mobile trên Blogspot

Minh Đức Digital - 9:14 chiều 11/03/2016

Blogspot là một trong những hệ thống được nhiều người sử dụng để xây dựng website cho mình với ưu điểm: – Không mất tiền duy trì domain, hosting – Kho giao diện miễn phí lớn – Dễ dàng chỉnh sửa, tối ưu Tuy nhiên nhiều người không để ý rằng website của mình chưa […]

Blogspot là một trong những hệ thống được nhiều người sử dụng để xây dựng website cho mình với ưu điểm: – Không mất tiền duy trì domain, hosting – Kho giao diện miễn phí lớn – Dễ dàng chỉnh sửa, tối ưu Tuy nhiên nhiều người không để ý rằng website của mình chưa thực sự tối ưu với giao diện mobile và đây là điểm trừ lớn với web Bài trươc mình có chia sẻ với mọi người template flag mag – một trong những template tin tức blogspot miễn phí với tính năng responsive. Tuy nhiên, nhược điểm của template này khi mình chia sẻ và trong quá trình tối ưu đã vô tình loại bỏ một số phần trong giao diện mobile khiến website trên mobile hiển thị không hết các phần và dường như chỉ hiển thị giao diện như trên máy tính để bạn, bạn biết đó, thuật toán giao diện mobile frendly Google đưa ra sẽ khiến web bạn tụt hạng và quan trọng hơn, bạn đã mất đi một lượng khách đáng kể ghé thăm website mình với giao diện như vậy.   Bài này mình sẽ fix những lỗi giao diện mobile trên template flagmag này để các bạn chỉnh sửa cho web mình. Và với tất cả các template khác, để chỉnh giao diện mobile bạn hãy chú ý đến những phần sau đây nhé!   Bước 1: Đầu tiên hãy chắc rằng bạn đã thiết lập tùy chỉnh giao diện mobile trên web. Tham khảo: Thiết lập giao diện mobile trên Blogspot   Bước 2: Đặt đoạn code sau dưới thẻ <head>
<meta content=’width=device-width, initial-scale=1, maximum-scale=1′ name=’viewport’/>
Trước khi có dòng lệnh này và sau khi có dòng lệnh này website của bạn sẽ hiển thị như sau: chinh-giao-dien-mobile-tren-blogspot-1     Bước 3: Tùy chọn hiển thị các phần trên thiết bị di động. Chọn phần muốn hiển thị xem đoạn HTML nó đang là phần nào. Click chuột phải vào phần muốn hiển thị trên thiết bị di động chọn Inspect chinh-giao-dien-mobile-tren-blogspot-2 chinh-giao-dien-mobile-tren-blogspot-3   Bước 4: Vào Mẫu –>  Chỉnh sửa HTML –> tìm kiếm “HTML68” –> thêm thuộc tính mobile=’yes’ vào đoạn code —> Lưu mẫu chinh-giao-dien-mobile-tren-blogspot-4   Với các phần tương tự bạn cũng làm như vậy. Note: – Nếu phần nào bạn không muốn hiển thị giao diện trên thiết bị di động hãy làm như trên nhưng thêm thuộc tính mobile=’no’ Xem hướng dẫn video cụ thể tại đây:   Chúc các bạn thành công! Gặp khó khăn gì hãy comment dưới bài viết mình sẽ giúp bạn fix lỗi nhanh nhất