Hướng dẫn tích hợp giao diện Wap / Web cho blogger

02:16 - Thứ Sáu, 2 tháng 10, 2015 | 0 nhận xét

Thấy nhiều bạn không biết cách tích hợp wap/web cho blogspot, nay mình sẽ viết lại hướng dẫn cụ thể.
Để tích hợp giao diện Wap / Web cho blogger cho blogger không khó, có điều bạn cần biết đôi chút về html và bố cục của blogspot.
Công cụ duy nhất là Notepad++. Link download: http://notepad-plus-plus.org/
Tại sao lại sử dụng Notepad++, đơn giản vì mình thấy nó nhẹ và dễ nhìn, dễ sử dụng.

DEMO TEMPLATE MOBILE

Bạn phải có 1 giao diện wap cho blog. Cái này bạn tự tìm nha. Mình sẽ up vài giao diện wap cho các bạn trong thời gian tới.
Chú ý: giao diện wap sẽ không hiện thị ở Destop được mà phải thêm m?=1 ở phía sau thì mới hiện thị được.
Các giao diện share trên mạng mà hiện thị ở Destop được thì đa phần khi tích hợp sẽ bị lỗi css ở bài viết.
Khi đã có giao diện wap để tích hợp ta bắt đầu:

1. Tùy chỉnh nhận biết hiện thị giao diện Wap/Website
Vào Blog -> Mẫu -> Điện thoại di động -> Chọn Tùy chỉnh

2. Màn hình co giãn theo thiết bị
Mở template blog giao diện Destop của bạn bằng Notepad++ thêm dưới <head>

3. Tách css, script , html bố cục Blog
Tìm <b:skin><![CDATA[ chuyển hết css trong nó qua 1 file khác có bố cục như sau:

Tiếp theo nhấc toàn bộ các script qua chèn ở dưới </style>

Đến bố cục bài viết chuyển toàn bộ nội dung từ <body> đến hết </body> qua chèn phía dưới các script

Vậy là ta có bố cục giao diện destop ở file mới vừa chuyển qua như sau:

Với giao diện Wap cũng làm tương tự như vậy

4. Tích hợp 2 giao diện vào làm 1
Quay trở lại với templates gốc lúc này ở trong <body> đến hết </body> không có nội dung gì cả
Giờ ta sẽ cho thẻ điều kiện để nhận biết giao diện wap/web
Tìm <body> thêm bên dưới

<b:if cond="data:blog.isMobile">
Nơi chứa giao diện Mobile
<b:else/>
Nơi chứa giao diện Destop
</b:if>

Giờ các bạn chỉ cần coppy toàn bộ nội dung ở template Destop và Mobile vừa chuyển qua dán vào Nơi chứa giao diện Mobile và Nơi chứa giao diện Destop là xong

Xong lưu template. lúc này có thể bạn sẽ thấy Blog báo lỗi trùng thẻ Blog và id
Tìm Blog1 thay bằng Blog2
Tìm id='main' thay bằng id='main2'

Lưu templates và hưởng thành quả
Để xem giao diện Mobile bạn thêm ?m=1 vào sau domain. Ví dụ: http://www.ancplayer.com?m=1

Chúc thành công ! Hãy like nếu thấy bài viết có ích.

Hãy Like để ủng hộ Website
Like để chia sẻ bài viết tới mọi người.

Tủ Phim HD xem Online hay năm 2015 - 2016 - www.TủPhim.Ga
Bài viết: Hướng dẫn tích hợp giao diện Wap / Web cho blogger
Thời gian: 2015-10-02T02:16:00-07:00
Nhãn: Thủ thuật
Xếp hạng: 5 trên 0 đánh giá

Chú ý: Mọi nhận xét chèn link tới website/blog khác ko liên quan đến yêu cầu hỗ trợ, chia sẻ đều bị xóa mà không cần báo trước

Hướng dẫn tích hợp giao diện Wap / Web cho blogger

Không có nhận xét nào:

Đăng nhận xét

Facebook Fan Page

Chủ đề quan tâm

Bình luận mới

Tủ Phim HD xem Online hay năm 2015 - 2016 - www.TủPhim.Ga

Giới thiệu về tôi

Lưu trữ Blog

Liên kết link