Bạn có một template blogger với giao diện máy tính nhưng thất vọng với giao diện di động mặc định của blogger hoặc bạn có một template blogger giao diện di động và cảm thấy bất tiện khi không có giao diện máy tính
hôm nay mình sẽ hướng dẫn các bạn thêm ghép một template di động hoặc template máy tính trở thành một template mang 2 giao diện máy tính và di động
Đơn giản dễ hiểu thực hiện không quá 5 phút đồng hồ cho công việc này !
I. Nội dung code template
Bước 1
Bạn phải hiểu nguyên lý của nó là như thế này
hôm nay mình sẽ hướng dẫn các bạn thêm ghép một template di động hoặc template máy tính trở thành một template mang 2 giao diện máy tính và di động
Đơn giản dễ hiểu thực hiện không quá 5 phút đồng hồ cho công việc này !
I. Nội dung code template
Bước 1
Bạn phải hiểu nguyên lý của nó là như thế này
<b:if cond='data:blog.isMobile'>
Nội dung code DI ĐỘNG
<b:else/>
Nội dung code MÁY TÍNH
</b:if>
Vì vậy bất cứ bạn ghép template wap vào 1 template web hay ngược lại thì nội dung code của wap là bên trên và web là bên dưới còn code như nào hay sang bước tiếp theo
Bước 2
Lấy code của template ghép (ví dụ mình đang muốn ghép template wap vào 1 template web và đương nhiên bước này mình sẽ lấy code của 1 template wap nào đấy)
Các bạn bỏ qua toàn bộ nội dung code trong template và chỉ lấy đoạn code dưới đây
<body>
Copy toàn bộ nội dung trong từ sau <body> đến trước </body>
</body>
Bạn nên copy đoạn code trên và để vào 1 chỗ nào đó vào tiếp tục bước tiếp theo
Bước 3
tùy chỉnh code của template muốn ghép ( lưu ý code này của template web)
Bạn tìm đoạn này trong template
<body>
A
</body>
A là đoạn code của template và bạn thêm vào nó đoạn code như sau
<body>
<b:if cond='data:blog.isMobile'>
B
<b:else/>
A
</b:if>
</body>
Màu đỏ là code gốc, Màu xanh là code khi thêm vào
Và ở đây B chính là đoạn Code đã thực hiện ở bước 2
Bước 4
Sau khi thực hiện sau các bạn bấm lưu template lại và nó sẽ báo lỗi như sau
More than one widget was found with id: Blog1. Widget IDs should be unique.
ở đây Blog1 chính là id widget bị lỗi, chúng ta copy Blog1 và tìm kiếm trong template sẽ có 2 cái là Blog1 ta đổi tên 1 trong 2 cái thành Blog2 chẳng hạn rồi tiếp tục lưu template và tiếp tục nhận 1 lỗi khác chúng ta tiếp tục sửa cho khi nào lưu thành công thì thôi
Lưu ý: đây là lỗi trùng lặp id widget do template code A va B có 2 widget trùng ID với nhau nên ta tìm và đổi 1 trong 2 cho nó khác nhau là được
II. CSS của template
Sau khi thực hiện ghép code xong tất nhiên chúng ta phải ghép cả CSS chứ không nó ra cái của ma của quỷ gì
Đầu tiên là xóa hết CSS trong đoạn
<b:skin>
....
</b:skin>
Tiếp theo thêm đoạn code này vào trước thẻ </head>
<style>
<b:if cond='data:blog.isMobile'>
A
</b:else>
B
</b:if>
</style>
A là CSS của template wap
B là CSS của template web
III. Hoàn thiện widget
1. Tùy chỉnh widget ( Áp dụng với template wap có sử dụng widget )
ở phần 1 sau khi các bạn đã ghép hoàn thiện thì nó sẽ có cấu trúc như sau
<b:if cond='data:blog.isMobile'>
Code Wap<b:else/>
Code Web
</b:if>
Bắt đầu thực hiện tìm kiếm tất cả trong khoảng Code Wap đoạn có dạng
<b:widget
Lưu ý chỉ tìm những widget thêm vào như Nhãn, xem nhiều ...
và thêm vào đằng sau đoạn
mobile='only'
Ví dụ: mình tìm được đoạn widget xem nhiều
<b:widget id='PopularPosts2' locked='false' title='Xem Nhiều' type='PopularPosts'>
và mình thêm vào như sau
<b:widget id='PopularPosts2' mobile='only' locked='false' title='Xem Nhiều' type='PopularPosts'>
IV Hoàn thiện tiện ích
Nếu template wap của hoặc web của bạn có sử dụng thủ thuật tiền ích gì bên ngoài có sử dụng javascript thì hãy làm theo bước sau
Tìm tất cả <script của cả 2 template trong đoạn
<head>
<script>
<script type='text/javascript'>
<script src=
vân vân
<body>
và gộp nó vào template ghép như sau
<head>
<b:if cond='data:blog.isMobile'>
Script của wap
<b:else/>
Script của web
</b:if>
</body>
Done! chúc các bạn thành công
Theo Oivl