Bo góc và tạo đường viền cho các Widget ở Sidebar

Bo góc và tạo đường viền cho các Widget ở Sidebar
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 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.

Ở trong hình ta thấy có 2 phần cần phải chỉnh sửa, đó là phần header và content của widget, do đó ta sẽ tìm trong code CSS của template 2 classsau: ".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{font-size:16px;text-transform:uppercase;position:relative;margin:0 0 10px;padding:5px 10px;color:#222;font-weight:500;border-bottom:2px solid #e0e0e0;font-weight:normal}.sidebar h2:before{content:'';position:absolute;bottom:-2px;left:0;right:0;background:#3a5795;width:60px;height:2px}
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{background:#fff;margin:0 0 15px;padding:7px;border:1px solid #eee;border-bottom:3px solid #ddd;border-top-left-radius:15px;border-top-right-radius:15px}
6. Save template.
Ở đây là hướng dẫn đối với mẫu template mặc định v1 của blogger còn tại thời điểm này công việc chỉ là chỉnh sửa css của "#sidebar-wrapper"
Tdb Blogspot - Thủ thuật blogspot
Facebook Comments
Blogger Comments