Chia Footer Blogger thành nhiều cột

Nếu Blog của bạn có chứa nhiều Widget, ngoài việc nhóm chúng lại thành một sử dụng tiện ích Multi Tabbed iTechPlus đã giới thiệu ở bài viết trước, chúng ta có thể đặt những widget này ở Footer-Wrapper.

Điều này không những giúp “giảm tải” cho Sidebar, mà còn giúp tăng thời gian tải trang cho Blog bạn. Nhiều bạn sẽ cảm thấy ngạc nhiên về điều này, tuy nhiên, các bạn nên biết rằng theo mặc định, footer-wrapper được đặt bên ngoài content-wrapper ( chứa main body và sidebar ). Như vậy, theo thứ tự tải trang của Blog sẽ là : header-wrapper > content-wrapper ( main + sidebar ) > footer-wrapper.

Cho nên, nếu những widget nào kém quan trọng hoặc sử dụng JavaScript, các bạn nên đặt chúng ở Footer. Tuy vẫn phải tải hết toàn bộ các widget hiện có, nhưng content-wrapper ( phần quan trọng nhất ) sẽ được trình duyệt load trước, còn footer-wrapper chỉ được load sau cùng.

Từ những lý do trên, hôm nay iTechPlus sẽ giới thiệu đến các bạn một thủ thuật đơn giản nhằm chia Footer thành nhiều cột để có thể chứa được nhiều widget hơn. Đây là một thủ thuật không mới, nhưng có khả năng tùy biến và tính thẩm mỹ cao do MyBloggerTricks phát triển.

 

Nào, chúng ta cùng bắt tay làm nhé !

1. Vào Thiết kế > Chỉnh sửa HTML

2. Chèn đoạn code bên dưới vào trước thẻ đóng </b:skin>

#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}

Trong đoạn code trên :

• width: 960px; : chiều rộng của widget
• width: 23%; : % chiều rộng mỗi cột của widget

3. Tiếp tục, chèn đoạn code bên dưới vào trước thẻ đóng </body>

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

* Đoạn code trên sẽ chia widget thành 4 cột, mỗi cột có chiều rộng bằng 23% so với tổng chiều rộng widget là 960px. Nếu bạn muốn chia widget thành 5 cột, thì phải điều chỉnh chiều rộng widget và chiều rộng mỗi cột cho hợp lý ( ví dụ cho 5 cột là 17% ), sau đó chèn đoạn code bên dưới vào trước dòng <div style='clear: both;'/>:

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar5' preferred='yes'>
</b:section>
</div>

4. Save template và quay lại Phần tử trang để bắt đầu chèn bất kỳ widget nào bạn muốn.
Chúc các bạn thành công !

iTechPlus ( Theo MyBloggerTricks )