Blogger tips: 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.

Có nhiều cách khác nhau để chia cột cho header, ở đây mình giới thiệu với các bạn các thực hiện với template Magazine template 1 theo thủ thuật của Fandung.
Có thể download template Magazine template 1 tại đây.




 Bạn có thể thực hiện tương tự cho các Template khác


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

Click đọc Danh sách thủ thuật »

theo fandung.com

Share on Facebook Share on Twitter Share on Google Plus

About Chinhnd

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.