Xây dựng giao diện mobile trong Blogger

Theo dự đoán của Google rằng từ giờ mọi người sẽ đọc blog và trang web nhiều hơn từ điện thoại thay vì từ máy tính để bàn, đó là lý do tại sao mọi người nên tạo trang web di động của họ và duy trì lưu lượng truy cập tối đa không chỉ từ máy tính để bàn mà còn từ thiết bị di động. Cũng rất tốt để có được lưu lượng truy cập di động vì nó có thể tăng thu nhập của bạn từ cả Adsense và Appnext. Lưu lượng truy cập di động đặc biệt là tốt nhất cho Appnext.
Làm cho trang web di động không dễ dàng trong một nền tảng như blogger bởi vì mọi người đều không thể làm điều đó vì nó không dễ viết mã và hầu hết các phương pháp không hoạt động trong blogger. Vì vậy, tôi thường xuyên viết về việc tạo trang web di động cho blog blogger để giúp các blogger khác dễ dàng tạo trang web di động của riêng họ.
Vì vậy, trong bài viết này tôi sẽ hướng dẫn bạn cách tạo giao diện mobile cho blogger. Vì vậy, hãy làm theo các bước dưới đây để tạo các phần cho các thiết bị di động của bạn.
Bước 1: Truy cập blogger> đăng nhập vào tài khoản của bạn và điều hướng đến Theme.

Bước 2: Nhấp vào Chỉnh sửa Html để bắt đầu chỉnh sửa chủ đề blog của bạn để tạo các phần cho các tiện ích di động.
Bước 3: Tìm kiếm mã bên dưới bằng cách sử dụng CTRL + F:

<b:section class='header' id='header'

sau đó chúng ta tìm kiếm được mã code như dưới đây:

<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Horizontal scroll menu (Header)' type='Header'>....</b:widget>
</b:section>

Bước 4: Bây giờ chỉ sau khi mã ở trên dán mã bên dưới và lưu mẫu của bạn.

<b:section id='mobile-section-1'>
</b:section>

Bước 5: Chuyển đến bố cục để xem phần tiện ích di động của bạn.
Bạn sẽ tìm thấy phần tiện ích của bạn bên dưới phần tiêu đề trong bố cục nhưng nếu bạn muốn bạn có thể tạo một phần khác trong phần chân trang bằng phương pháp trên, tất cả những gì bạn cần làm là dán mã bên dưới </ html> vào mẫu của bạn.

<b:section id='mobile-footer-section'>
</b:section>

Lưu ý quan trọng: Mặc dù bạn có thể tạo các phần không giới hạn cho trang web di động của blog nhưng bạn sẽ cần bật từng tiện ích bạn thêm trong các phần này chỉ dành cho thiết bị di động. Vì vậy, sau khi thêm một tiện ích trong phần di động của blog, hãy chuyển đến mẫu của bạn và thêm mobile = 'yes' sau khi lock = 'false' trong mã tiện ích của bạn như trong hình bên dưới. Để biết chi tiết về cách bật tiện ích cho thiết bị di động, chỉ đọc Cách hiển thị tiện ích trong Chế độ xem trên thiết bị di động trong Blogger