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ình5.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

vào đây

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

Nguồn : http://singleboy010.wordpress.com

Facebook

Twitter

Telegram

WhatsApp

Previous article

Next Post

Next article

Previous Post