"Chia tiêu đề blogger thành hai phần"

(Traidatmui.com) – Mặc định phần header của blogger thường chỉ có một phần, nó sẽ là hạn chế khi ta muốn gắn nhiều banner. Bạn có muốn chia header của blog mình thành nhiều phần không? Đó cũng là việc có ích khi bạn muốn đặt HTML/Javascript trên header. Bây giờ mình sẽ giới thiệu cho các bạn cách làm này với vài thủ thuật nhỏ là bạn có thể làm được.Đây là thủ thuật mình đã test thành công, xin chia sẽ cùng các bạn.

Đây là kết quả sau thủ thuật này

☼ Các bước thực hiện:

1. Đăng nhập và vào bố cục Blogger (Layout)
2. Chọn chỉnh sửa HTML (Edit HTML)
3. Tìm đến code bên dưới hoặc tương tự

#header-wrapper {
width:900px
margin-top:-30px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:-30px;
padding-$endSide:0;
padding-bottom:0px;
padding-$startSide:0;
color:$titleTextColor;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
background-image:url();
padding:0px;
}

#header .description {
margin:0px;
padding:0px 0px 0px;
line-height:1.5em;
font: $descriptionFont;
display:none;
}

4. Bây giờ hãy chèn vào nó đoạn code màu đỏ như dưới

#header-wrapper {
width:900px
margin-top:-30px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:-30px;
padding-$endSide:0;
padding-bottom:0px;
padding-$startSide:0;
color:$titleTextColor;
}

#head-inner {
width:450px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
padding-top:0px;}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
background-image:url();
padding:0px;
}

#r_head {
width:450px;
float:right;
padding-top:0px;
}

#header h1 {
margin:0;
padding:0px 0px 0px;
line-height:1.2em;
font: $pageTitleFont;
display:none;
}

#header .description {
margin:0px;
padding:0px 0px 0px;
line-height:1.5em;
font: $descriptionFont;
display:none;
}

Chú ý: Code màu xanh trên chính là độ rộng của header, nhớ là tổng độ rộng (width) của r_head và head-inner không vượt quá độ rộng của header-wrapper. Bạn có thể chỉnh độ rộng các phần trên lại cho phù hợp với blog mình.
5. Tiếp đến hãy tìm code như dưới

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog - Vdinh (tiêu đề)' type='Header'/>
</b:section>
</div>

6. Và thay code trên thành code bên dưới

<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='Blog - Vdinh (tiêu đề)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

Hãy sửa code màu xanh trên lại thành tiêu đề blog của bạn.
7. Vậy là xong các bạn save template lại

Chúc các bạn thành công