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
Các bạn phải hiểu nguyên lý hoạt đôgnj của nó là như thế này
Vì vậy khi bạn ghép bất cứ một 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
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
A là đoạn code của template và bạn thêm vào nó đoạn code như sau
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
ở đâ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
Tiếp theo thêm đoạn code này vào trước thẻ </head>
A là CSS của template wap
B là CSS của template web
Done. Sâu Ciu Blog
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
Các bạn phải hiểu nguyên lý hoạt đôgnj của nó là như thế này
<b:if cond='data:blog.isMobile'>
Nội dung code trên DI ĐỘNG
<b:else/>
Nội dung code trên MÁY TÍNH
</b:if>
Vì vậy khi bạn ghép bất cứ một 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>
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
Done. Sâu Ciu Blog
Nguồn: Sơn Trần (OiVL.BlogSpot.Com)
![[Share] Template Mobile Clone TDM](http://1.bp.blogspot.com/-ahFvKDZLMvY/UgsKRG5laFI/AAAAAAAACLM/9kEutHtffik/s72-c/SauCiu.Blogspot.Com-demo.png)
![[S40] Game Transformers G1 Awakening](http://2.bp.blogspot.com/-bpuIA6O-R8g/UtFpdRId0LI/AAAAAAAAGeM/Rn9wMASKIL8/s1600/133776173712_5295_120x90.png)
Top
8 nhận xét