Với
các Widget sử dụng javarscip nếu đặt ở footer sẽ làm blog bạn load nhanh hơ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àicontent-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.
Do vậy sẽ
giới thiệu cho các bạn cách chia footer thành 2 hay nhiều cột.
☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào thiết kế
3- Chọn Chỉnh sửa HTML
4- 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
5- 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>
6- 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.
- Nếu trong Phần tử trang các section của Footer widget bố trí thẳng
dọc là do Blogger có sự điều chỉnh nào đó từ khi xuất hiện Trình thiết kế Mẫu,
nhưng điều đó không ảnh hưởng gì tới việc hiển thị trên Blog cả, bạn cứ chèn
widget vào đó bình thường.
(namkna)
Hãy like nếu bài viết có ích →
Kết bạn với gisgpsrs trên Facebook
để nhận bài viết mới nóng hổi
Không có nhận xét nào:
Đăng nhận xét