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



Advertisements
Chuyên mục:Thủ thuật blog
  1. Không có bình luận
  1. No trackbacks yet.

Trả lờ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 Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s

%d bloggers like this: