Hướng dẫn thêm giao diện Wap/Web vào blogger

Hướng dẫn thêm giao diện Wap/Web vào blogger

Để thêm giao diện wap tất nhiên bạn phải có 1 template wap rồi.


- Các bạn sửa template tốt nhất nên sử dụng Notepad++ không nên sửa luôn trên web
Download Notepad++ tại đây
- Backup template đề phòng làm sai

Sau đây là bước tích hợp:

- Trước tiên để blogger bạn phân biệt giao diện wap/ web bạn phải vào blogger -> Mẫu --> Điện thoại di động -> chọn Có. Hiển thị mẫu dành cho điện thoại di động trên điện thoại di động. -> Chọn chế độ: Tùy chỉnh.

- Tiếp theo ta sửa template
- Tim <head> thêm bên dưới:

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

Cấu trúc bên trong body sẽ có nội dung như sau:

<b:if cond='data:blog.isMobile'>
<style type='text/css'> CSS template mobile </style>
Code Template mobile
<b:else/>
<style type='text/css'> CSS template PC</style>
Code Templates PC
</b:if> 

các bạn chỉ cần cho toàn bộ code template của PC vào Code Templates PC và code template mobile vào Code Template mobile, nhớ cho cả CSS vào CSS template mobile và CSS template PC nhé. template nào thì cho css template đó
đến bước này ta đã gần hoàn thành rồi

để tránh xung đột css
Tìm <b:skin><![CDATA[ xóa toàn bộ css trong <b:skin><![CDATA[/* CSS cần xóa ]]></b:skin> đi
Lúc này có thể bạn sẽ trùng ID Blog1 , vì 2 teamplate sẽ có 2 cái.
Tìm Blog1 thay = Blog2

Vậy là xong chúc các bạn thành công !

Nguon: Bay68 
>