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ó.
Để 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
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[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
/*
-----------------------------------------------
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:skin><![CDATA[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
/*
-----------------------------------------------
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>
Để 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
http://www.khamphablog.com/?m=1Như vậy thì đã xong, nếu các bạn không hiểu và không làm được thì liên hệ với mình, mình sẽ giúp. Chúc các bạn thành công.
Kho Template Blogspot Responsive 2016
http://share123blog.blogspot.com
Free download responsive premium blogger template
Icon CommentsIcon Comments