Nos

Nos

Gamer
  • Emailnoscudnart@gmail.com
  • Phone+84 383 512222
  • Birthday23 Dec, 1995
  • LocationQuang Ninh, VN
404

Thêm Giao Diện Wap Hoặc Web Vào 1 Template Blogger

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

<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

Done. Chúc các bạn thành công ! mình thì mình ghép cả 100 cái rồi :))
Update Phần 2

Nhận xét