Home » Thủ thuật blog
Thủ thuật tạo nhiều cột widget trong blog
Thứ Năm, 16 tháng 4, 2009
Make Multi Column on Blogger Template
Để làm điều này, mình khuyên các bạn nên tạo 1 blog mới để thử nếu như bạn có ít kinh nghiệm về chỉnh sửa template của blogger. Không nên thực hiện trực tiếp tên blog của mình khi mà mình chưa dám chắc. Nếu bạn đã khá rành về bố cục blog trong phần HTML (cũng như code CSS) thì mình không ngăn cản bạn làm điều này.
Bước đầu tiên chúng ta cần chuẩn bị là chú ý đến độ rộng của cột mà ta muốn chia nhỏ thành nhiều cộ, số lượng cột mà chúng ta sẽ làm, khoảng cách từ cột này đến cột kia.
Bây giờ mình sẽ hướng dẫn cho các bạn ở mẫu có độ rộng là 660px, và ở đây chúng ta chia thành 3 cột. Như vậy 660px=3x220px, với khoảng cách giữa các cột (padding) là 10px thì độ rộng của các cột theo tính tóan là 205px.
Bây giờ bắt đầu:
1. Đăng nhập blog -> vào chỉnh sửa code HTML (ko nhấn vào mở rộng tiện ích)
2. Chèn đọan CSS bên dưới trên dòng ]]></b:skin>
/* bottom
==================== */
#bottom {
width: 660px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:#BDBABD;
padding: 15px 0 15px 0;
}
#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}
#bottom ul {
padding: 0;
margin: 0;
}
#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}
#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;
}
#bottom ul li a:hover {
background: #B1ACB1;
}
#left-bottom {
width: 205px;
float: left;
padding-left:10px;
}
#center-bottom {
width: 205px;
float: left;
padding-left:10px;
}
#right-bottom {
width: 205px;
float: left;
padding: 0 5px 0 10px;
}
4. Tìm đọan code sau:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
5. Chèn đọan code bên dưới ngày trên đọan code vừa tìm được:
<div id='bottom'>
<b:section class='bottom' id='left-bottom'/>
<b:section class='bottom' id='center-bottom'/>
<b:section class='bottom' id='right-bottom'/>
</div>
6. Save template.
Hình minh họa
Trước khi thực hiện thủ thuật

Sau khi thực hiện thủ thuật

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

- Ngẫu hứng Blogger (2)
- Bạn biết gì về Blogspot, hãy chia sẻ cùng tôi.
- Blogger chính thức add avatar vào comment feed
- Share 3 template bloger đẹp cho anh em
- 12 cách giảm thời gian load trang cho bloger
- Blogger Templates Vector Responsive
- Tạo iFrame YouTube Màu bạc
- Thêm tác giả, quyền Admin cho blogspot
- Hiển thị nhãn (label) phong cách màu tím cực nổi cho blogspot [V3]
- Thêm Google translate - dịch đa ngôn ngữ cho Blogspot
- Cài đặt theo dõi Google analytics cho blogspot
- Cách tạo khung Form đăng nhập cho blogspot
Comments[ 0 ]
Đăng nhận xét