Chia Footer Blogger (Đáy Blogspot) thành nhiều cột

Với các Widget sử dụng javarscip nếu đặt ở footer sẽ làm blog bạn load nhanh hơ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.

Do vậy namkna sẽ giới thiệu cho các bạn cách chia footer thành 2 hay nhiều cột.

☼ Cách Chia Footer Blogger (Đáy Blogspot) thành nhiều cột

1- Đăng nhập vào Blog
2- Vào mẫu (template)
3- Chọn Chỉnh sửa HTML (Edit HTML)
4- 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;     
}

» Tùy chỉnh đoạn CSS trên:

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

5- 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>

6- 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.

- Nếu trong Phần tử trang các section của Footer widget bố trí thẳng dọc là do Blogger có sự điều chỉnh nào đó từ khi xuất hiện Trình thiết kế Mẫu, nhưng điều đó không ảnh hưởng gì tới việc hiển thị trên Blog cả, bạn cứ chèn widget vào đó bình thường.

Chúc các bạn thành công !