Home » Thủ thuật blog
Chia header thành 2 cột
Thứ Năm, 16 tháng 4, 2009
Split header column became two column
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:
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

- Ngẫu hứng Blogger (2)
- Bạn biết gì về Blogspot, hãy chia sẻ cùng tôi.
- Blogger chính thức add avatar vào comment feed
- Share 3 template bloger đẹp cho anh em
- 12 cách giảm thời gian load trang cho bloger
- Blogger Templates Vector Responsive
- Tạo iFrame YouTube Màu bạc
- Thêm tác giả, quyền Admin cho blogspot
- Hiển thị nhãn (label) phong cách màu tím cực nổi cho blogspot [V3]
- Thêm Google translate - dịch đa ngôn ngữ cho Blogspot
- Cài đặt theo dõi Google analytics cho blogspot
- Cách tạo khung Form đăng nhập cho blogspot
Comments[ 0 ]
Đăng nhận xét