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

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

 

About SEO Thu

Trần Thu với 4 năm học Công nghệ thông tin, 2 năm làm Content chuyên nghiệp và hơn 3 năm học tập và làm việc tại Phòng marketing tại VDO. Thu đã tích lũy được nhiều kiến thức và kinh nghiệm về quản trị website và các vấn đề vướng mắc liên quan. Là một nhân viên rất ham học hỏi và tìm tòi những kiến thức mới lạ về website để cung cấp cho bạn đọc những thông tin bổ ích nhất!


Kiến Thức liên quan

Hotline tư vấn miễn phí