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ó như sau:
<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ư thế nào hãy sang bước tiếp theo nhé
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à lưu vào 1 chỗ nào đó và 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 song các bạn bấm lưu template lại và nó sẽ báo lỗi 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 và 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 thì không thành cái gì cả
Đầ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
Done. Chúc các bạn thành công ! mình thì mình ghép cả 1k cái rồi :))
Bài viết tham khảo: