16 tháng 5, 2012

Chia Header, Footer thành 2 hoặc 3 phần

 Trong quá trình thiết kế blog vì 1 lý do gì đó bạn muốn chia header hoặc footer của mình ra làm nhiều phần để gắng thêm tiện ích, hay quảng cáo hay gì đó nhưng chẳng biết phải làm sao thì bài viết này có lẽ là một cứu cấp có thể giúp được bạn đây.
Bạn có thể xem demo ngay trên blog này. Header mình đã chia thành 3 phần gồm tiêu đề, thanh menu và khung tìm kiếm. Footer mình chia thành 2 phần gồm phần design by ... và phần menu chính.

Đầu tiên mình sẽ hướng dẫn cách chia header thành 3 phần trước.
1. Vào Thiết kế → chỉnh sửa HTML và chèn đoạn code sau vào trước thẻ ]]></b:skin>
.header1{width:39%;float:left}
.header2{width:30%;float:left}
.header3{width:30%;float:left}

2. Tìm đến đoạn code sau
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
...
</b:section>

3. Thêm vào trước và sau đoạn code 2 những đoạn code sau:
<div class='header1'>
 Đoạn code ở bước 2
 </div>
<div class='header2'>
<b:section class='header2' id='header2' showaddelement='no'>
<b:widget id='HTML15' locked='false' title='Header2' type='HTML'/>
</b:section>
</div>
<div class='header3'>
<b:section class='header3' id='header3' showaddelement='no'>
<b:widget id='HTML16' locked='false' title='Header3' type='HTML'/>
</b:section>
</div>
<div style='clear:both;'>
</div>

Lưu template lại rồi về trang chủ sẽ thấy 2 header mới.
Chú ý:
Ở đoạn code số 1 có mục width: xx%  là chiều dài của các header.
Tổng chiều dài của 3 header phải nhỏ hơn 100%. (tốt nhất cộng lại =99% là ok)
Chia footer thành 3 phần bạn cũng làm tương tự nhưng thay toàn bộ chữ header thành chữ footer
Chia thành 2 phần thì bỏ toàn bộ những đoạn code nào liên quan đến header3 là được.
Nếu có vấn đề gì thì để lại lời nhắn mình sẽ trả lời trong thời gian sớm nhất.

Update: Sau đây là phần chia Footer thành nhiều cột:


Chia Footer Blogger thành nhiều cột Nếu Blog của bạn có chứa nhiều Widget, ngoài việc nhóm chúng lại thành một sử dụng tiện ích Multi Tabbed K3nvil đã giới thiệu ở bài viết trước, chúng ta có thể đặt những widget này ở Footer-Wrapper.


Điều này không những giúp “giảm tải” cho Sidebar, mà còn giúp tăng thời gian tải trang cho Blog bạn. Nhiều bạn sẽ cảm thấy ngạc nhiên về điều này, tuy nhiên, các bạn nên biết rằng theo mặc định, footer-wrapper được đặt bên ngoài content-wrapper ( chứa main body và sidebar ). Như vậy, theo thứ tự tải trang của Blog sẽ là : header-wrapper > content-wrapper ( main + sidebar ) > footer-wrapper.

Cho nên, nếu những widget nào kém quan trọng hoặc sử dụng JavaScript, các bạn nên đặt chúng ở Footer. Tuy vẫn phải tải hết toàn bộ các widget hiện có, nhưng content-wrapper ( phần quan trọng nhất ) sẽ được trình duyệt load trước, còn footer-wrapper chỉ được load sau cùng.

Từ những lý do trên, hôm nay iTechPlus sẽ giới thiệu đến các bạn một thủ thuật đơn giản nhằm chia Footer thành nhiều cột để có thể chứa được nhiều widget hơn. Đây là một thủ thuật không mới, nhưng có khả năng tùy biến và tính thẩm mỹ cao do MyBloggerTricks phát triển.

 Footer 3 cột

Nào, chúng ta cùng bắt tay làm nhé !

1. Vào Thiết kế > Chỉnh sửa HTML

2. Chèn đoạn code bên dưới vào trước thẻ đóng </b:skin>

#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}

Trong đoạn code trên :
  • width: 960px; : chiều rộng của widget
  • width: 23%; : % chiều rộng mỗi cột của widget

3. Tiếp tục, chèn đoạn code bên dưới vào trước thẻ đóng </body>

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

* Đoạn code trên sẽ chia widget thành 4 cột, mỗi cột có chiều rộng bằng 23% so với tổng chiều rộng widget là 960px. Nếu bạn muốn chia widget thành 5 cột, thì phải điều chỉnh chiều rộng widget và chiều rộng mỗi cột cho hợp lý ( ví dụ cho 5 cột là 17% ), sau đó chèn đoạn code bên dưới vào trước dòng <div style='clear: both;'/>:

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar5' preferred='yes'>
</b:section>
</div>

4. Save template và quay lại Phần tử trang để bắt đầu chèn bất kỳ widget nào bạn muốn.
Chúc các bạn thành công !

0 nhận xét:

|» Đăng hình ảnh | code chèn sẽ là [img] Link ảnh [/img]
|» Đăng nhạc của tui | code sẽ là [nct] Link bài hát [/nct]
|» Đăng Video Youtube | code sẽ là [youtube] Link Video Youtube [/youtube]
|» <b> Chữ in đậm <\/b>
|» <i> Chữ in nghiêng <\/i>

:) :( :)) :(( =)) Mã hóa code