Thông thường trong blogpost thì thanh header chỉ có một phần, do nhu cầu trang trí cho tiện hơn, làm cho trang dể nhìn hơn nên đôi khi cũng cần cắt cái header này ra làm 2 phần, Header-left & Header-right.
Nếu thấy cần thiết phải chia thì chỉ cần vài bước để làm như sau:
1. Đăng nhập vào Blogger.
2. Design\ Edit HTML\proceedNếu thấy cần thiết phải chia thì chỉ cần vài bước để làm như sau:
1. Đăng nhập vào Blogger.
đánh Ctrl-F tìm code sau: <b:section class='header'
Khi đó nó sẽ hiện ra đoạn code như sau
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='trang của ta(Header)' type='Header'/>
</b:section>
thay thế nó bằng code sau, nhớ kiểm tra title bla bla bla...thay bằng của mình
<b:section class='header' id='header-left' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='bla bla bla (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header-right' maxwidgets='1' showaddelement='yes'/>
Tiếp tục tìm code : header-outer <b:widget id='Header1' locked='true' title='bla bla bla (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header-right' maxwidgets='1' showaddelement='yes'/>
Sau khi tìm nó sẽ hiện ra đoạn code :
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
_background-image: none;
color: $(header.text.color);
-moz-border-radius: $(header.border.radius);
-webkit-border-radius: $(header.border.radius);
-goog-ms-border-radius: $(header.border.radius);
border-radius: $(header.border.radius);
}
thay thế nó bằng code sau
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
height: 100px;
overflow: hidden;
}
#header-left{
width: 350px;
float: $startSide;
overflow: hidden;
}
#header-right{
width: 468px;
float: $endSide;
overflow: hidden;
}
.tabs-outer{
clear: both;
}
Thay đổi giá trị trong height bằng số mình muốn lưu lại là xong.
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
height: 100px;
overflow: hidden;
}
#header-left{
width: 350px;
float: $startSide;
overflow: hidden;
}
#header-right{
width: 468px;
float: $endSide;
overflow: hidden;
}
.tabs-outer{
clear: both;
}
Bài viết khác:
Gở bỏ thanh Navbar