Loading post navigation ...
 
 

Pro page

2
Nhận xét

Modify sidebar : bo góc header và tạo border (đường viền) cho các widget ở sidebar

| by Phan Dũng | views

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

[FD's BlOg] - Một cách khá phổ biến cho việc trang trí các widget ở sidebar là bo các góc. Ở bài viết này mình sẽ giới thiệu một thủ thuật nhỏ để bo góc cho header của widget với ảnh nền, và trang trí 1 chút cho khung hiển thị nội dung với việc tạo đường viền.


Hình ảnh minh họa :


Ở trong hình minh họa ta thấy có 2 phần cần phải chỉnh sửa, đó là phần headercontent của widget, do đó ta sẽ tìm trong code CSS của template 2 class sau: ".sidebar h2" và ".sidebar .widget" .(hoặc class tương tự)

☼ Ta bắt đầu với thủ thuật:
1. Đăng nhập blog
2. Vào bố cục (layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Tìm đọan code CSS sau (hoặc tương tự):

.sidebar h2 {
margin:0;
padding:0;
color:$sidebarHeaderColor;
font: $headerFont;
}

- Thay thế nó bằng code bên dưới:

.sidebar h2 {
background: #CCCBB9 url(http://img133.imageshack.us/img133/3540/h2bgwn2.png) top center no-repeat;
padding: 5px 10px;
margin-bottom: 0;
color: #333;
}

- Lưu ý : bạn nên download ảnh nền (code màu xanh) trong code về, và thay đổi màu sắc cũng như độ rộng để phù hợp với blog của bạn. Việc này khá đơn giản với các phần mềm đồ họa.

5. Tiếp tục tìm đọan code như bên dưới (hoặc tương tự):

.sidebar .widget {
font-size:86%;
margin-top:6px;
margin-$endSide:0;
margin-bottom:12px;
margin-$startSide:0;
padding:0;
line-height: 1.4em;
}

- Và thay thế nó bằng code như bên dưới :

.sidebar .widget {
font-size:86%;
border-left: 3px solid #CCCBB9;
border-right: 3px solid #CCCBB9;
border-bottom: 3px solid #e0d5c2;
padding: 10px;
line-height: 1.4em;
}

- các code màu xanh chính là code tạo đường viền cho khung hiển thị nội dung của widget.

6. Save template.

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


Enter your mail address:

2

ngan ling

póc tem bài này ha để góc vuông cho nhẹ
(các chú bộ đội phải xem xem bức thư nào không quan trong vứt bỏ cho đỡ nặng thật 100% mời mọi người ghé cho nhà mình http://Evnstudy.blogspot.com)

ucmasnb

tiện ích hay mà ^^ thank bác fandung



☺ 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