Hướng dẫn thiết kế blogger toàn tập- Phần 4: Chia header thành 2 phần để chèn quảng cáo vào header

on

Kết thúc bài trước, chúng ta đã có một bố cục kha khá cho blog của chúng ta rồi. Hiện nay, đa phần các bạn đều tham gia google adsense hoặc mạng quảng cáo khác. Nhu cầu đặt quảng cáo ở header là hiện hữu. Vậy làm thế nào để có thể đặt quảng cáo vào header. Bài hôm nay sẽ giải quyết vấn đề đó.

 Chia header thành 2 phần để chèn quảng cáo 


Để có thể chia header thành 2 phần thì chúng ta sẽ cần tới 2 thẻ div và hai class/id riêng cho mỗi cái. Ở đây, mình sẽ chọn 2 class là header-trai và header-phai. Cái header-trai sẽ chứa tên trang web, còn cái header-phai sẽ chứa phần bạn chèn thêm sau này.

<div  class='header' id='header' showaddelement='yes'>

<div class='header-trai'>


  <b:widget id='Header1' locked='false' title='(Tiêu đề)' type='Header'/>

</div>
  <div class='header-phai'>
  </div>


</div>
Để thuận tiện cho việc thêm widget vào header sau này ta sẽ thêm cho nó 1 thẻ b:section. Thẻ này có tác dụng cho chúng ta thêm widget từ phần bố cục ( nhấn vào dấu + như chúng ta hay làm ) mà không cần tác động vào code của trang web
 Và chúng ta sẽ có đoạn code đầy đủ như sau:

<div  class='header' id='header' showaddelement='yes'>

<div class='header-trai'>


  <b:section class='header' id='header' showaddelement='yes'>

<b:widget id='Header1' locked='false' title='(Tiêu đề)' type='Header'/>
  </b:section>


  <b:section class='ben-phai' id='ben-phai' showaddelement='yes'/>

</div>
  <div class='header-phai'>Đây là nội dung header phải
  </div>


  </div>
Sau khi xong quay lại phần bố cục trang web, ta sẽ thấy như hình:

DONE! Vậy là code đã chuẩn.
Bây giờ chúng ta sẽ chia cho mỗi chú 1 ít đất để các chú nằm một bên của header là được. Và cái này chúng ta phải dùng tới CSS:






.header-trai {

width: 30%;


.header-trai img {

float: left;
}


width:auto;

max-height: 60px;
}


float: right;

.header-phai {
width: 70%;


}
Các bạn có thể tham khảo demo ở link : http://demohuongdanthietkeblog4.blogspot.com/

Comments

Post a Comment