Nhiều cột Footer Widget Đối với Blogger-Hot!
Trước đây chúng tôi đã chia sẻ một hướng dẫn về ba mục Widget Footer đó là cũng đánh giá cao và hôm nay chúng tôi có thêm một phiên bản tiên tiến hơn của các phụ tùng cùng. Widget mới có thể trở thành ba cột, bốn cột hoặc nhiều cột như bạn muốn. Thêm widget này chân mới có một số hiệu ứng CSS lớn thêm vào nó mà làm cho nó thậm chí còn tốt hơn. Đầu tiên nhìn thấy một bản demo để biết những gì rất khác nhau về nó.
<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>
Làm thế nào để Thêm Cột nhiều Footer Widget Để Blogger ?
Trước tiên chúng ta sẽ thêm mã CSS để mẫu blogger của bạn và sau đó là HTML. Vì vậy mà không lãng phí bất cứ lúc nào cho phép chuyển thẳng sang các bước:
1. Về Blogger> Thiết kế> Chỉnh sửa HTML
2. Sao lưu mẫu của bạn
3. Tìm kiếm ]]></b:skin>
4. Ngay phía trên ]]></b:skin> dán mã dưới đây:
/*----- Lutip MULTI COLUMN FOOTER WIDGET -----*/
#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;
}
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;
}
5. Bây giờ tìm kiếm </body> và dán đoạn mã sau ngay phía trên </body>
<div id='lower'>
<div id='lower-wrapper'>
<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>
6. Lưu mẫu của bạn và bạn đã làm xong!
Bây giờ hãy vào Page Elements và thêm các vật dụng của bạn để các Widget Footer mới được thêm vào.
Nếu bạn muốn tăng hoặc giảm số cột dọc sau đó làm theo các bước dưới đây.
Làm thế nào để tùy chỉnh các Widget?
Vâng, tôi sẽ giữ nó đơn giản. Tôi nghĩ rằng các màu sắc và kích thước tổng thể và padding và margining chỉ là hoàn hảo. Điều duy nhất mà bạn sẽ cần phải điều chỉnh theo mẫu của bạn là chiều rộng của widget và số cột dọc.
1. Để giảm hoặc tăng chiều rộng tổng thể của các phụ tùng chỉ cần thay đổi width: 960px;
2. Nếu bạn muốn giảm số lượng các vật dụng để ba sau đó chỉ cần xóa phần này của mã này:
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
3. Hoặc nếu bạn muốn thêm một cột sau đó thêm mã dưới đây ngay trên <div style='clear: both;'/>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div>
Hãy nhớ rằng lowerbar # là số cột. Vì vậy, nếu bạn muốn thêm một cột thứ năm sau đó chỉ cần thay thế lowerbar # với lowerbar5.
Sau khi bạn đã thêm vào cột thứ năm sau đó nhớ để thay đổi width: 23%; với width: 17%;
Bạn sẽ lặp lại bước 3 cho bao nhiêu cột như bạn muốn tạo. Nhưng ba và bốn và năm cột là một tiêu chuẩn. Tăng chúng sẽ làm cho mọi việc trông xấu xí.