Tùy biến với sidebar cho Blogger

(Huynh Nhat Ha's Blog) -- Phần sidebar trên Template của Blogger cũng có nhiều biến thể khác nhau. Có Template chỉ 1 cột, có Template 2 cột, thậm chí có thể thêm thành 3, 4 cột… Một số trường hợp phức tạp hơn, đặc biệt đối với dạng 1 cột, thì có thể chia thành 2 phần: phần trên gồm 1 cột, phần dưới chia thành 2 cột hoặc ngược lại, phần trên gồm 2 cột, phần dưới gồm 1 cột.

Lấy ví dụ, nếu sidebar trên Template của tôi có 1 cột thì cấu trúc HTML trong Template sẽ có dạng:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>

Nếu tôi muốn chia thành 2 phần mà phần trên gồm 1 cột và phần dưới chia thành 2 cột thì tôi phải thiết lập cấu trúc HTML trong Template như sau:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>

<div id='2columns'>
<div class='col-left'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>
<div class='col-right'>
<b:section class='sidebar' id='sidebar3' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>
</div>

</div>

Sau đó cần thêm thuộc tính CSS cho phần 2 cột, thêm đoạn code sau đây vào trước dòng ]]></b:skin>.

.col-left {
float:left;
width:47%;
}
.col-right {
float:right;
width:48%;
}

Như vậy toàn bộ đoạn code CSS cho kiểu sidebar này có dạng như sau:

#sidebar-wrapper {
float:right;
margin-right:40px;
margin-top:-9px;
overflow:hidden;
width:296px;
word-wrap:break-word;
}
h2 {
border-bottom:1px solid #CCCCCC;
font:$headerfont;
color:$sidebarcolor;
letter-spacing:0;
margin:0 -10px;
padding:0 10px 5px;
text-transform:none;
}
.sidebar {
color:$sidebartextcolor;
font-size:90%;
line-height:1.5em;
}
.sidebar ul {
list-style:none outside none;
margin:0;
padding:0;
}
.sidebar li {
line-height:1.5em;
margin:0;
padding:0 0 0.25em 15px;
text-indent:-15px;
}
.sidebar .widget {
border-bottom:1px dotted #CCCCCC;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.col-left {
float:left;
width:47%;
}
.col-right {
float:right;
width:48%;
}

Giải đáp yêu cầu của bạn Mai Ly: Nếu bạn muốn thêm một cột sidebar vào dưới 2 cột sidebar sẵn có nhưng có chiều rộng bằng tổng chiều rộng của 2 cột đó thì phải điều chỉnh một số điểm, đại khái như sau:

Bạn phải đặt một id có tên rightcol để chứa toàn bộ các cột sidebar, sau đó thêm vào một id có tên sidebar3, đặt code HTML như sau:

<div id='rightcol'>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Archives' type='BlogArchive'/>
</b:section>
</div>
<div id='sidebar-wrapperL'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='Label2' locked='false' title='Categories' type='Label'/>
</b:section>
</div>
<b:section class='sidebar' id='sidebar3' preferred='yes'>
<b:widget id='HTML100' locked='false' title='HTML' type='HTML'/>
</b:section>

</div>

Những phần được đánh dấu màu đỏ là phần thêm vào, những phần còn lại có thể không còn giống như trên Template của bạn bởi vì bạn đã thêm đủ thứ tiện ích vào đó rồi (ở đây chỉ giới thiệu nguyên gốc của Template lúc chưa chỉnh sửa).

Ở phần CSS thêm vào như sau (những phần được đánh dấu màu đỏ là phần thêm vào).

#rightcol {
float:right;
margin-top:182px;
overflow:hidden;
width:350px;
word-wrap:break-word;
}
#sidebar-wrapper {
float:right;
margin-right:20px;
overflow:hidden;
width:150px;
word-wrap:break-word;
}
h2 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSJjZTjHtoLFtJpToWC-48mgIqPwsYNv_g4OGm-p2PLfeuldzQKpC1yg36oSaD7KPpyOBg7QiWk2-7986zRtS0gqA4LijCQ9TCL2lmhZdKre7ggvmoJmvLD_EHuB53H_PFjMxsQrNTxZsJ/s1600/bg_sb_head1.gif) no-repeat scroll center top;
color:#000000;
font-family:'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
font-size:78%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:32px;
letter-spacing:0;
line-height:1.4em;
margin:1.5em 0 0.75em;
padding-left:20px;
padding-top:7px;
text-transform:uppercase;
}
.sidebar {
color:#666666;
font-family:georgia;
line-height:1.5em;
}
.sidebar ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
.sidebar li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkNrZ5C41qrZQq_d3MsNXQU7vRXmr_GS6ZYLTwdkZbgoZwckW8EIfkfP_XSqvi0v4pjE6sym1zLKyapJhH0CgmTdFJZeY5TuDtCK3L1fXNYqNE6DvT4z8kw5MhwT37SHnmd-OpRN7B2wza/s1600/bg_sb_arrow1.gif) no-repeat scroll 0 5px;
line-height:1.5em;
margin:0;
padding:0 0 0.25em 15px;
}
.sidebar .widget, .main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}
#sidebar h4 a.rsswidget {
margin-left:0;
overflow:hidden;
text-decoration:none;
}
#sidebar-wrapperL {
float:left;
overflow:hidden;
padding-left:25px;
width:150px;
word-wrap:break-word;
}
#sidebar3 {
float:right;
margin-top:0;
overflow:hidden;
padding-right:20px;
width:300px;
word-wrap:break-word;
}
#sidebar3 h2 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(URL_hinh anh) no-repeat scroll center top;
color:#000000;}
.widget-content {
padding-left:10px;
}

Bạn cần phải tạo một background cho tiêu đề của sidebar được thêm vào, sau đó upload lên host (hoặc lên Blogger) để lấy đường link rồi thay vào dòng URL_hinh anh.