Chia widget Label ở footer thành nhiều cột cho blogspot

Với các blogger có quá nhiều nhãn  thì việc kích hoạt (Displaying) tất cả các nhãn trong thanh bên (sidebar) không phải là một lựa chọn hoàn hảo vì nó sẽ mất quá nhiều diện tích của sidebar. Vậy giải pháp đặt ra là nên đặt tiện ích này ở đâu và làm thế nào để tiện ích này trong bắt mắt gọn nhẹ hơn mà vẫn đầy dủ các nhãn của bạn. Thủ thuật này namkna sẽ liệt kê tên các nhãn theo thứ tự bảng chữ cái và chia thành 5 cột đặt ở dưới chân trang blog (phần footer). cho độc giả đễ tìm kiếm các nhãn này.

Bạn có thể xem demo hoặc hình minh họa bên dưới:

VIEW DEMO

Thủ thuật này được namkna dựa trên ý tưởng của Ipietoon và Myherro . Bạn chỉ cần thực hiện một vài bước đơn giản để áp dụng tiện ích này cho blog.

» Thêm Like, Subscription box vào blogspot của bạn!

1. Đăng nhập vào tài khoản Blogger

2. Vào phần Mẫu (Template)

3. Chọn Chỉnh sửa HTML (Edit HTML)

4. Tìm kiếm thẻ ]]></b:skin> . Và dán code bên dưới vào trước thẻ vừa tìm được.

/*Start Category Wrapper Css*/
#category-wrapper {
width:900px;
clear:both;
margin:0 auto 10px;
padding-top:15px;
line-height: 1.6em;
text-align:left;
border-bottom:0px solid #efefef;
}

.cat {
color: #000000;
line-height: 1.5em;
}

.cat ul {
list-style:none;
margin:0 0 0;
padding:0 0 0 8px;
}
.cat ul li {
float:left;
width:18%;
list-style-type: none;
margin: 0 0 5px;
padding-left: 12px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIV2ngV3oWeAU6gqePJm0VCx3YeJJncgF5qfhQ1FJE8-X1yD0lRM1F_VMg3dsfXkk5WUhtrfZEFB22ACh8s7oDrn1Ec67glUqYi_tCPfI0B1VivkyiohynR6edgD0F-CZkSQg2psAI7NIN/s1600/bullet-suyb-namkna-blogspot-com-0001.gif) no-repeat left center;
}

.cat .widget {
border-bottom:0px dotted #ddd;
margin:0 .5em 1.5em .5em;
padding:0 0 1.5em;
}
/* End Category Wrapper Css Info @ http://namkna.blogspot.com/ */

Tùy chỉnh CSS.

• Width 900px; là chiều rộng tổng của các cột.
• width:18%; chiều rộng của từng cột nhỏ. Ở đây mình dùng số tương đối. Nếu muốn chia thành 4 cột bạn sửa thành 23%, và để chia thành 3 cột sửa thành 31%. 
• Link ảnh màu xanh là link ảnh icon trước mỗi nhãn. bạn có thể thay đổi thành link ảnh khác nếu bạn muốn,

5. Tìm mã HTML sau đây:

<div id='footer-wrapper'>

Lưu ý: thẻ bên dướicó thể khác nhau với mỗi blog, tùy vào người thiết kế) .nếu bạn không tìm thấy vui lòng comment địa chỉ blog của bạn ở cuối bài viết này mình sẽ hướng dẫn cụ thể
Với mẫu simple của blogger bạn có thể chèn ngay trước thẻ <footer> hoặc <div class='footer-outer'>.

- Dán đoạn mã bên dưới vào trước thẻ vừa tìm được.

<div id='category-wrapper'>
<b:section class='cat' id='cat'>
<b:widget id='Label99' locked='false' title='Categories' type='Label'/>
</b:section>
</div>

6- Lưu mẫu lại và quay lại blog bạn sẽ tháy phần chân blog có 5 cột nhãn.