Theo mặc định, mẫu mặc định Template Blogger chỉ có ba lựa chọn bố cục chân trang 1 cột, 2 cột và 3 cột. Vậy trong trường hợp chúng ta có nhu cầu nhiều thì làm thế nào? Bài viết sẽ gợi ý cho bạn các bước thực hiện dễ dàng và đơn giản với các mẫu sẵn có của Blogger.
Mục tiêu chia cột Footer
Theo mặc định, mẫu mặc định Template Blogger chỉ có ba lựa chọn bố cục chân trang 1 cột, 2 cột và 3 cột. Vậy trong trường hợp chúng ta có nhu cầu nhiều thì làm thế nào? Bài viết sẽ gợi ý cho bạn các bước thực hiện dễ dàng và đơn giản với các mẫu sẵn có của Blogger.
Bố cục(Layout) Footer Blogger
Vào Mẫu(Template) > Tùy chỉnh(Customize) > Bố cục và chọn Bố cục chân trang phù hợp với 1 trong 3 lựa chọn như đề cập ở đầu bài viết.
Bố cục chân trang nhiều hơn 3 cột. Vậy thì làm thế nào?
Hướng dẫn chia Footer thành nhiều cột cho Blogger 4 cột
Đăng nhập vào Blogger, chọn Mẫu > Chỉnh sửa HTML > Tìm đoạn code sau đây:
<macro:include id='footer-sections' name='sections'>
<macro:param default='2' name='num' value='3'/>
<macro:param default='footer' name='idPrefix'/>
<macro:param default='foot' name='class'/>
<macro:param default='false' name='includeBottom'/>
</macro:include>
Thay chữ số 3 có màu nổi bật bằng số 4 và lưu lại. Nhấp thẻ Bố cục để quan sát, bây giờ bạn sẽ thấy chân trang có 4 cột.
Bố cục chân trang nhiều hơn 4 cột
Giả sử muốn Footer có 5 cột, hãy thay chữ số 3 có màu nổi bật ở bước trên bằng số 5. Tuy nhiên khi lưu xong trở lại Bố cục bạn chỉ thấy có 4 cột mà thôi. Do đó chúng ta cần phải bổ sung thêm.
Nhấp Mẫu > Chỉnh sửa HTML và tìm đoạn code sau đây:
<macro:if cond='data:col.num >= 4'>
<td class='columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-4"'/>
</td>
</macro:if>
<macro:if cond='data:col.num >= 5'>
<td class='columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-5"'/>
</td>
</macro:if>
Quay lại Bố cục bạn sẽ nhìn thấy như sau:
 |
| Bố cục chân trang Blogger có 5 cột |
Để có cột thứ 6 chúng ta sẽ thay bằng đoạn mã sau đây.
<macro:if cond='data:col.num >= 4'>
<td class='columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-4"'/>
</td>
</macro:if>
<macro:if cond='data:col.num >= 5'>
<td class='columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-5"'/>
</td>
</macro:if>
<macro:if cond='data:col.num >= 6'>
<td class='columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-6"'/>
</td>
</macro:if>
Tương tự bổ sung để có nhiều cột hơn.
Lưu ý:
Blogger sẽ tự động chia các cột này đều nhau và chiều ngang của chúng bằng nhau. Nếu bạn đang dùng các mẫu đã tùy chỉnh không dựa trên nguyên gốc của Blogger, bổ sung thêm cột cho chân trang sẽ không giống như hướng dẫn này.
0 Comment "Hướng dẫn chia Footer thành nhiều cột cho Blogger"