Trang chủ > Thủ thuật blog > Tạo khung đẹp cho widget trên sidebar

Tạo khung đẹp cho widget trên sidebar

Để trang trí đẹp mắt cho blog mình, các bạn có thể dùng nhiều cách.Bây giờ mình xin giới thiệu một trong số đó để các bạn tham khảo.Đó là tạo khung cho các widget trên sidebar,như hình bên dưới:

Ảnh minh họa
Bây giờ chúng ta bắt đầu:
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://lh6.ggpht.com/_TaHzV-QgYq0/Skg5f9XukTI/AAAAAAAAAJc/BxXcr0AXlnc/tabrightC.gif) top center no-repeat;
padding: 5px 10px;
margin-bottom: 0;
color: #333;
}

Bạn có thể thay đổi code mau tím trên theo hình yêu thích của mình
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;
}

Bạn có thể thay đổi các code mau tím dựa vào bảng mã màu thập lục.Bạn có thể click

để xem mã màu
6.Xong bạn hãy save lại
Chúc thành công



Chuyên mục:Thủ thuật blog
  1. Chưa có phản hồi.
  1. No trackbacks yet.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: