Chia header thành 2 cột
Thứ Năm, 16 tháng 4, 2009
Split header column became two column
[FD's BlOg] - Có bạn sẽ thắc mắc là làm sao để chèn Box search vào header. Tất nhiên là được, nhưng trước khi làm điều này bạn phải chia header của bạn thành 2 hay 3 cột khác nhau.Có nhiều cách khác nhau để chia cột cho header, ở đây mình sẽ chỉ hướng dẫn với template Magazine template 1. Vì vậy bạn nào muốn làm việc này thì hãy tạo một blog mới, sau đó chèn template Magazine template 1 vào blog của mình, hay có thể thay đổi template cho blog cũ của mình. Có thể download template Magazine template 1 tại đây.
Bây giờ ta bắt đầu:
Dưới đây là hình ban đầu của template (khi chưa có chia cột)
1. Đăng nhập blog
2. Vào Chỉnh sửa Code HTML
3. Tìm đọan code bên dưới
/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}
#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
4. Thay thế chúng bằng đọan code sau:
/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}
#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}
#r_head{
width:300px;
float:left;
padding-top:10px;
}
5. Xuống thấp hơn tìm đọan code sau (hoặc tương tự):
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
6. Thay thế chúng bằng đọan code sau:
<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
7. Save template.
Như vậy đã xong
xem hình kết quả bên dưới
- Template dịch vụ, công ty giới thiệu cho blogspot
- Thủ thuật tạo khung liên kết thanh cuộn cho blogspot
- Nút điều khiển lên xuống toàn trang cho blogspot
- Menu ngang co kèm hình ảnh bên cạnh rất đẹp
- Hiệu ứng Like page Facebook (FB), G+, twitter động cực đẹp cho Web, blogspot
- CSS3 với hiệu ứng hình ảnh động cực đẹp cho Web, blogspot
- Bài viết liên quan cho blogspot - Hiệu ứng ảnh thu nhỏ
- Thủ thuật thêm thống kê Blog 3 trong 1 cho blogspot
- Giải pháp Blogger bị chặn 02/07/2012
- Các truy vấn cơ bản với Blogspot
- Nâng cấp ANC Gdata lên phiên bản 2.
- Hướng dẫn config domain cho hầu hết các mạng.
Comments[ 0 ]
Đăng nhận xét