Bố cục chân trang nhiều cột cho Blogger

Theo mặc định, trình thiết kế mẫu cho 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.

Thay đổi bố cục chân trang

Blogger cho phép bạn tùy chỉnh tối đa mẫu mà bạn đang sử dụng trong đó có thay đổi bố cục chân trang. Thao tác thay đổi khá dễ, bạn chỉ việc vào Mẫu > Tùy chỉnh > 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.

Thay đổi bố cục chân trang

Tuy nhiên trên Trình thiết kế mẫu cho Blogger không có lựa chọn Bố cục chân trang nhiều hơn 3 cột. Vậy thì làm thế nào?

Bố cục chân trang 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 Blogger có 4 cột

Bố cục chân trang nhiều hơn 4 cột

Giả sử muốn chân trang 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 &gt;= 4'>
          <td class='columns-cell'>
            <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-4&quot;'/>
          </td>
        </macro:if>

Và thay bằng:

<macro:if cond='data:col.num &gt;= 4'>
          <td class='columns-cell'>
            <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-4&quot;'/>
          </td>
        </macro:if>

        <macro:if cond='data:col.num &gt;= 5'>
          <td class='columns-cell'>
            <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-5&quot;'/>
          </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 &gt;= 4'>
          <td class='columns-cell'>
            <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-4&quot;'/>
          </td>
        </macro:if>

        <macro:if cond='data:col.num &gt;= 5'>
          <td class='columns-cell'>
            <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-5&quot;'/>
          </td>
        </macro:if>

        <macro:if cond='data:col.num &gt;= 6'>
          <td class='columns-cell'>
            <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-6&quot;'/>
          </td>
        </macro:if>

Tương tự bổ sung để có nhiều cột hơn.

Blogger sẽ tự động chia các cột này đều nhau và chiều ngang của chúng bằng nhau. Trong trường hợp muốn các cột này không bằng nhau, hãy quay lại đọc bài viết tiếp theo.

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.

Bạn có thắc mắc đừng quên để lại dưới bài viết hoặc tham gia nhóm Cộng đồng sử dụng Blogger Việt Nam trên Facebook để cùng thảo luận.