Thêm một cột sidebar cho blogger

Blogger thường cung cấp cho chúng ta một giao diện blog chỉ với 2 cột, tuy nhiên việc thay đổi giao diện này cũng khá đơn giản. Khi bạn dặt trên blog quá nhiều tiện ích thì một sidebar khó mà chứa đựng hết. Vì vậy việc tạo thêm một cột sidebar nữa sẽ khắc phục việc này và làm cho giao diện blog trở nên đẹp hơn. Bây giờ mình sẽ giới thiệu cho các bạn các bước để thực hiện thủ thuật này, chỉ vài bước cũng khá đơn giản.

Hình ảnh minh họa

☼ Cách thực hiện:
1. Đầu tiên bạn đăng nhập vào blog
2. Vào Edit HTML và tìm đến code sau

#outer-wrapper {
background:#FFFFCC ;
width:995px;
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
background-attachment:fixed;
background-position:center;
}
#main-wrap1 {
display:block;
width:540px;
float:right;
margin:0px 2px 0px 0px;
padding:0px 0px -50px 0px ;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
}
#main {
background:#FFFF99
padding:-100px 0px 0px 0px ;
margin:0px 0px 0px 0px;
width:535px;
}
#sidebar-wrap {
width:210px;
float:left;
margin:0px 0px 0px 2px;
font-size:97%;
line-height:1.5em;
}

3. Tiếp theo bạn hãy chép code bên dưới vào sau đoạn code trên

#rightsidebar-wrapper {
width: 230px;
background:#FFFF99 ;
padding:0px 0px 0px 0px;
margin:0px 2px 0px 2px;
float: right;
line-height:1.5em;}

Đoạn code sau khi chỉnh sửa có dạng như bên dưới

#outer-wrapper {
background:#FFFFCC ;
width:995px;
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
background-attachment:fixed;
background-position:center;
}
#main-wrap1 {
display:block;
width:540px;
float:right;
margin:0px 2px 0px 0px;
padding:0px 0px -50px 0px ;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
}
#main {
background:#FFFF99
padding:-100px 0px 0px 0px ;
margin:0px 0px 0px 0px;
width:535px;
}
#sidebar-wrap {
width:210px;
float:left;
margin:0px 0px 0px 2px;
font-size:97%;
line-height:1.5em;
}
#rightsidebar-wrapper {
width: 230px;
background:#FFFF99 ;
padding:0px 0px 0px 0px;
margin:0px 2px 0px 2px;
float: right;
line-height:1.5em;}

4. Công việc nữa là hãy tìm đến code dưới

Và chép đoạn code dưới vào trước code vừa tìm được

5. Bước kế tiếp là tiến hành chỉnh sưa các lệnh cho phù hợp
Bạn hãy chú ý các code màu đỏ ở trên, đó là bề rộng của trang chính và các sidebar. Bạn phải cho tổng các bề rộng của main + bề rộng 2 sidebar phải nhỏ hơn bề rộng của outer-wrapper thì mới hiển thị tốt được. Ở đây mình dùng các độ rộng là main:540px + sidebar:210px + rightsidebar:230px < outer-wrapper:995px. Cuối cùng bạn hãy tìm đến thẻ footer và chỉnh sửa độ rộng lại cho phù hợp như dưới.

/* Footer
———————————————– */
#footer {
width:995px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

6. Cuối cùng bạn hãy tìm và thêm các đoạn code như bên dưới

/** Page structure tweaks for layout editor wireframe */
body#layout #main-wrap1,
body#layout #sidebar-wrap,
body#layout #header-wrapper
body#layout #rightsidebar-wrap,{
margin-top: 0;
} body#layout #header, body#layout #header-wrapper,body#layout #rightsidebar-wrap,
body#layout #outer-wrapper {
margin-$startSide:0,
margin-$endSide: 0;
padding: 0;
}

7. Save template lại và vào bố cục xem thử nhé
Chúc bạn thành công.

Được đăng tại nhãn: Thủ thuật blog