Thủ thuật chia header thành 2 cột

Bạn hoàn toàn có thể chèn thêm các tiện ích vào header của Blogger chẳng hạn như Box search hoặc các quảng cáo sau khi bạn chia header của bạn thành 2 hay 3 cột khác nhau. Hướng dẫn dưới sẽ giúp bạn thực hiện điều nà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

ảnh minh họa sau khi chia cột