Chia Footer blogger thành 3 cột

Nếu muốn đặt nhiều widget vào footer của blogger thì việc đầu tiên là bạn phải chia footer blogger thành nhiều cột. Trong bài viết này, mình hướng dẫn các bạn cách chia Footer Blogger thành 3 phần

Đây là thủ thuật Blogger đơn giản giúp bạn chia footer blogger thành 3 phần ( 3 cột ) để tăng không gian chèn widget. Thủ thuật này chỉ sử dụng HTML để tạo cấu trúc layout và CSS để quy định kích thước các cột. Chính vì thế nó sẽ không gây ảnh hưởng đến tốc độ Blog của bạn.

1. Đăng nhập vào Blog

2. Vào mẫu (Template)

3. Chọn chỉnh sửa HTML.

4. Thêm vào trước thẻ ]]> </ b: skin> đoạn code sau

[css]#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
clear: both;
background:none repeat scroll 0 0 #2C2C2C;
position: relative;
position:relative;
z-index:9999;
font: normal 12px georgia, verdana, tahoma;
}
#lower-wrapper {
margin:auto;
padding: 10px 0px 20px 0px;
width: 1000px;
}
#lowerbar-wrapper {
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
font: normal 12px georgia, verdana, tahoma;
color: #ECECEC;
line-height: 22px;
line-height: 1.6em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
text-shadow:1px 1px 2px rgb(0,0,0);
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 15px 10px 15px;}
.lowerbar h2 {
border-bottom: 1px solid #333;
color:#AAA;
font-family:Arial, Agency FB; 
font-size:18px; 
text-align:center;
padding-bottom:6px;
margin-bottom:8px;
line-height:1.3em;
text-transform:uppercase;
color:#AAA;
text-shadow: 0px 1px 2px #2c2c2c;
}
.lowerbar ul{
list-style:none;
color:#EAE9E8;
margin:0;
padding:0;
}
.lowerbar li a:link, .lowerbar a:visited{
font:normal 12px Arial;color:#888888;
-moz-transition: all 0.700s ease-out;
-o-transition: all 0.700s  ease-out;
-webkit-transition: all 0.700s  ease-out;
-ms-transition: all 0.700s  ease-out;
transition: all 0.700s  ease-out;
}

.lowerbar li a:hover {
color: #fff;
-moz-transition: all 0.700s  ease-out;
-o-transition: all 0.700s  ease-out;
-webkit-transition: all 0.700s  ease-out;
-ms-transition: all 0.700s  ease-out;
transition: all 0.700s  ease-out;
}

.lowerbar li{
border-left: 3px solid #222222;
border-bottom:1px solid #222222;
text-indent:0;
line-height:1.2em;
margin-left:20px;
padding:6px 0 6px 17px;
}

.lowerbar li:hover{
color:#fff;
border-left:3px solid #f75b4c;
background: #333333;
}[/css]

Trong đó

• Nàu nền footer blogger :  #2C2C2C;
• Kiểu chữ ở footer blogger :  normal 12px georgia, verdana, tahoma;
• Màu chữ ở footer blogger : #ECECEC;
• Đổ bóng chữ : 1px 1px 2px rgb(0,0,0);
• Kiểu font và size tên widget : Arial, Agency FB; 18px;
• Đổ bóng tên widget : 0px 1px 2px #2c2c2c;
• Kiểu chữ ở link : normal 12px Arial;
• Độ rộng của footer blogger : 1000px;

5. Thêm vào trước thẻ </body> đoạn code sau

[css]<div id=’lower’><div id=’lower-wrapper’><div id=’lowerbar-wrapper’><b:section class=’lowerbar’ id=’lowerbar1′ preferred=’yes’/> </div><div id=’lowerbar-wrapper’><b:section class=’lowerbar’ id=’lowerbar2′ preferred=’yes’/> </div><div id=’lowerbar-wrapper’><b:section class=’lowerbar’ id=’lowerbar3′ preferred=’yes’/> </div><div style=’clear: both;’/> </div> </div><!– end lower-wrapper –>[/css]

6. Save template lại

Từ giờ, để thêm widget vào Footer Blogger, bạn chỉ việc nhấn thêm tiện ích như thường khi

Lời kết

Trên đây là 6 bước vô cùng đơn giản để chia Footer Blogger thành 3 phần. Cảm ơn đã theo dõi bài viết