Thêm một tùy chỉnh ba mục Footer Widget Trong Blogger
Bạn có thể đã thấy một widget ba cột ở phần dưới cùng của nhiều trang blog thương mại và chuyên nghiệp. Nơi bạn có thể thêm bất cứ điều gì những thứ bạn muốn. Có phụ tùng chân của tôi như là một ví dụ. Tôi đã thêm các widget tiếp tục giữ người đọc bận rộn. Widget này Footer chứa ba cột đó mỗi cột có thể chứa nhiều vật dụng như bạn có thể thêm! Để thêm một widget đó cho phần dưới cùng của blog của bạn và cũng có thể tùy biến giao diện và cảm nhận của nó sau đó cho phép bắt đầu học hướng dẫn hôm nay.
Thêm này ba mục Widget Trong Blogger Templates của bạn
Thực hiện theo các bước sau:
1. Về Blogger > Layout> Edit HTML
2. Sao lưu mẫu của bạn
3. Tìm kiếm ]]></b:skin>
4. Ngay trước ]]></b:skin> dán mã CSS này:
/* ----- LOWER SECTION ----- */
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333434; }
#lower-wrapper {
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333434; }
#lower-wrapper {
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
}
#lowerbar-wrapper {
border:1px solid #DEDEDE;
background:#fff; float: left;
margin: 0px 5px auto;
padding-bottom: 20px; width: 32%; text-align: justify;
font-size:100%;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
border:1px solid #DEDEDE;
background:#fff; float: left;
margin: 0px 5px auto;
padding-bottom: 20px; width: 32%; text-align: justify;
font-size:100%;
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 .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
color:#0084ce; text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana; border-bottom:3px solid #0084ce; }
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
color:#0084ce; text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana; border-bottom:3px solid #0084ce; }
.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
.lowerbar li {
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
border-bottom: 1px dotted #ccc;
}
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
border-bottom: 1px dotted #ccc;
}
5. Bây giờ tìm kiếm </body> và ngay trên mã này dán mã dưới đây:
<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 style='clear: both;'/>
</div> </div>
<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 style='clear: both;'/>
</div> </div>
6. Lưu mẫu của bạn. thực hiện!
Bây giờ truy cập vào trang Layout> Page Elements và bắt đầu thêm các vật dụng! : >>
Tùy biến
Bạn có thể dễ dàng tùy biến giao diện và màu sắc của các phụ tùng này chân. Tôi đã in đậm những phần quan trọng trong các mã CSS ở trên. Đọc các mô tả dưới đây một cách cẩn thận để phong cách hóa tốt hơn phụ tùng cột ba của bạn. Để thay đổi màu sắc của chúng tôi sử dụng màu tiên tiến Code Generator
background: # 333.434; Thay đổi mã màu sáu chữ số sẽ thay đổi màu nền của tiện ích này.
width: 960px; Đây là chiều rộng của widget. Nếu bạn muốn, bạn có thể điều chỉnh giá trị chiều rộng này phù hợp với chiều rộng của blog của bạn.
background: # fff; và width: 32%; là màu nền và chiều rộng của ba cột nơi các vật dụng được thêm vào.
color: # 0084ce; Đây là màu của các nhóm đề
font: bold 14px Arial, Tahoma, Verdana; Chỉnh sửa này để thay đổi kích thước phông chữ và gia đình.
border-bottom:3px solid #0084ce; Chỉnh sửa này để thay đổi độ dày, phong cách và màu sắc của biên giới xuất hiện ở dưới cùng của danh nhóm
border-bottom: 1px dotted #ccc; Chỉnh sửa này sẽ thay đổi kích thước, kiểu dáng và màu sắc của biên giới xuất hiện bên dưới liên kết.
Đó là tất cả!
Một hướng dẫn về Bốn phụ tùng Chân cột sẽ được đăng ngay.