Tạo nhiều cột Footer (chân trang) cho blog

Đăng bởi Admin | 27/10/13 | 0 nhận xét

Tiện ích này giúp bạn có thể tạo được Footer 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. 

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:

/*----- MBT 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;
}

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='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 sẽ giống như thế này:

   

Bạn có thể quan sát rằng có tổng cộng bốn cột mặc định và bạn có thể thêm nhiều vật dụng như bạn muốn mỗi cột. 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 chiều rộng: 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>

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>

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 chiều rộng: 23%; với chiều rộng: 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í.

Thật dễ dàng phải không nào!

Chúc bạn thành công !...

                                                                            Nguồn: mybloggertricks.com