Loading post navigation ...
 
 

Pro page

11
Nhận xét

Thủ thuật tạo nhiều cột widget trong blog

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Make Multi Column on Blogger Template
[FD's BlOg] - Bạn có bao giờ nhìn thấy phần footer của 1 trang blog nào đó được chia thành 2, 3 hay 4 cột chưa. Hôm nay mình sẽ giới thiệu thủ thuật này cho các bạn.

Để 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.


Enter your mail address:

11

http://nqhuy.net/

Không được anh ạ :(

fandung

thủ thuật này không có gì là khó, chỉ đơn giản là CSS, không có lý do gì mà không được cả bạn à.

Thứ nhất bạn phải xác định mình muốn chia cột ở chỗ nào, rồi chỉ cần dán code của thủ thuật ở trên (hoặc dưới) chỗ đó là đc.

Thứ 2, bạn phải cân chỉnh lại độ rộng của các khung cho phù hợp với độ rộng của nơi bạn muốn hiển thị. Ví dụ độ rộng của nơi bạn muốn hiển thị là 500px, mà bạn vẫn copy nguyên code phía trên vào thì không thể nào mà nó cho kết quả như mong muốn được.

akari
Khách (ẩn danh)

'bên dưới ngày trên' đọan code vừa tìm được

bên trên hay bên dưới đây :-ss

mà thử cả trên cả dưới đều k đc là tn ?

thientu

eeeeeeeeeeeee doan code thu 2 tim khong thay la sao

Rainey Tran

@thientu: đoạn thứ 2 bạn ko có là do template bạn ko có, muốn có thì copy đưa vào
@fandung: bạn ơi mình làm rồi nhưng 3 cái widget đó nó ko nằm ngan với nhau mà nó xếp chồng lên nhau tạo nên bố cục 4 cái widget hàng dọc (tính luôn cái có sẳn) :(

Khách (ẩn danh)

http://img217.imageshack.us/img217/4715/000ac9191423899kl5.gif=((

TB²

con khong duoc ba'c oi, xin giup HELP!!!

Phùng Anh Bản

Nghe rất hay, mình về làm thử
phunganhban.blogspot.com

PHÙNG BẢO KIÊN

Thử rồi nhưng e là không được

Tuanlte

E vẫn không làm dc ae rãnh teamview e dc ko ạ



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home