[Tips] - Hướng dẫn tích hợp giao diện mobi cho blogspot

Chào các bạn ở bài trước mình đã hướng dẫn các bạn tích hợp giao diện Responsive cho blogspot, nay mình sẽ hướng dẫn các bạn thêm giao diện mobi cho blogspot, giao diện mobi là giao diện khác hoàn toàn so với giao diện desktop, có nghĩa là tích hợp thêm một giao diện wap vào để xem trên mobi cho nó chuyên nghiệp.

Vậy làm sao để tích hợp thêm giao diện mobi cho blogspot?

Để tích hợp giao diện mobi cho blogspot thì các bạn cần chuẩn bị những thứ cần thiết sau :

Một templates blogspot wap mà bạn cảm thấy ưng ý để làm giao diện mobi
Blogspot cần tích hợp giao diện
Notepad++ để chỉnh sửa code or bất kỳ gì bạn có thể dùng

Các bước tiến hành

Bước 1. Chọn giao diện mobi là giao diện tùy chỉnh Blog > Giao diện di động > Chọn Tùy chỉnh

Bước 2. Thêm đoạn code sau ngay dưới thẻ <head> để giao diện co giản theo từng loại màn hình.

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

Bước 3. Thêm giao diện mobi vào templates
Mở notepad++ lên mà thêm đoạn code sau vào để chỉnh sửa

<b:if cond="data:blog.isMobile">
<style type="text/css">
Tất cả CSS của templates blogspot wap dán vào đây</style>
<script type="text/javascript">//<![CDATA[
Tất cả script của templates blogspot wap dán vào đây//]]></script>
<body>
Dán tất cả code từ <body> tới </body> của templates wap vào đây</body>
<b:else/>
<style type="text/css">
Tất cả css của giao diện gốc dán vào đây
</style>
<script type="text/javascript">//<![CDATA[
Tất cả script của giao diện gốc dán vào đây
//]]></script>
<body>
Dán tất cả code từ <body> tới </body> của templates gốc vào đây</body>
</b:if>

Các bạn chú ý thêm đúng như những phần mình bôi đen phía trên nhé, sau khi chỉnh sửa xong thì các bạn thêm vào templates gốc của mình.

Trước khi làm điều này các bạn nên sao lưu templates blogspot ra để đề phòng bất trắc nhé.

Bây giờ vào templates blogspot cần tích hợp giao diện mobi của các bạn và xóa tất cả css từ <b:skin><![CDATA[ cho đến ]]></b:skin> và thêm thẻ đóng </head> ngay dưới nó.

<b:skin><![CDATA[
/*
-----------------------------------------------
Blogger Template Style
Name: SEO NET
Author: ĐỖ MẠNH HỒNG
URL 1: http://www.khamphablog.com
Date: 4/ 2014
KHAMPHABLOG.COM - Chuyên thiết kế web - zip blog giá rẻ
----------------------------------------------- */
]]></b:skin>
</head>

Và xóa tất cả code từ đấy xuống tới thẻ đóng </html> có nghĩa là toàn bộ code sẽ như thế này

<b:skin><![CDATA[
/*
-----------------------------------------------
Blogger Template Style
Name: SEO NET
Author: ĐỖ MẠNH HỒNG
URL 1: http://www.khamphablog.com
Date: 4/ 2014
KHAMPHABLOG.COM - Chuyên thiết kế web - zip blog giá rẻ
----------------------------------------------- */
]]></b:skin>
</head>
<b:if cond="data:blog.isMobile">
<style type="text/css">
Tất cả CSS của templates blogspot wap dán vào đây</style>
<script type="text/javascript">//<![CDATA[
Tất cả script của templates blogspot wap dán vào đây//]]></script>
<body>
Dán tất cả code từ <body> tới </body> của templates wap vào đây</body>
<b:else/>
<style type="text/css">
Tất cả css của giao diện gốc dán vào đây</style>
<script type="text/javascript">//<![CDATA[
Tất cả script của giao diện gốc dán vào đây//]]></script>
<body>
Dán tất cả code từ <body> tới </body> của templates gốc vào đây</body>
</b:if>

Sau khi đã chỉnh sửa xong thì lưu mẫu lại, khi các bạn lưu thì templates sẽ báo lỗi là có 2 thẻ Blog1 thì lúc này các bạn chỉnh sửa Blog1 thành Blog2 rồi tiến hành lưu lại

Để kiểm tra giao diện vừa tích hợp thì các bạn thêm ?m=1 vào sau doman của mình