Hướng dẫn chia Header thành hai cột cho Blogger ( Blogspot )

BloggerGuide

Friday, October 30, 2015

0 comments

Mặc định Blogger chỉ có 1 header duy nhất với chiều rộng bằng chiều rộng của cả Blog. Nếu bạn muốn thêm một logo hay một banner quảng cáo trên phần Header thì sẽ phải thực hiện như thế nào?

Hướng dẫn chia Header thành hai cột cho Blogger ( Blogspot )

Bước 1. Chỉnh sửa Body. 

Đăng nhập Blogger Template > Chỉnh sửa HTML (Edit HTML) và để ý đoạn code bên dưới:

- Tìm đoạn code như sau:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Khóa học Blogger (Tiêu đề)' type='Header'/>
</b:section>

- Thay thế thành:

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='Khóa học Blogger (Tiêu đề)' type='Header'/>
</b:section>
      <b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'>
</b:section>
<div style='clear:both;'/>
</div>
<!-- end header-wrapper  -->

- Thêm đoạn code sau vào trước thẻ: ]]></b:skin>

/* Headerby */
#header-wrapper{width:900px;border:0 solid #dcd9d9;margin:0 auto;height:100px}
#header-inner{background-position:center;margin-left:auto;margin-right:auto}
#header{float:left;width:400px;border:0 solid #dcd9d9;text-align:left;color:#333333;margin:0}
#header2{float:left;width:480px;margin-left:10px;text-align:left;color:#555}
.header .widget,.header2 .widget{margin:0 auto;padding:10px 0}
#header h1{line-height:1.2em;text-transform:uppercase;letter-spacing:.1em;font:normal normal 26px Georgia, Serif;margin:0 auto;padding:10px 5px .15em}
#header .description{max-width:100%;text-transform:uppercase;letter-spacing:.01em;line-height:1.2em;font:normal normal 16px Lucida Sans, Tahoma, Helvetica, FreeSans, sans-serif;color:#666666;margin:0 auto;padding:0 5px 5px}
#header img{margin-startside:auto;margin-endside:auto}

Tùy chỉnh:
width:900px; là dộ rộng của blog của bạn.
width:400px; là dộ rộng của header 1 tức là header bên tay trái
width:480px; là dộ rộng của header 2 tức là header bên tay phải
height:100px là chiều cao của header 4- Lưu mẫu lại và xem kết quả nha!

Tag : Blog Templates, Blog Tips