Thay đổi màu nền và thêm hình ảnh cho thanh tiêu đề Widget

Thủ thuật nhỏ: Thay đổi màu nền và thêm hình ảnh cho thanh tiêu đề Widget

Các bạn có thể dễ dàng thay đổi màu nền cho thanh tiêu đề tiện ích khi vào thẻ "Trình thiết kế mẫu", nhưng thẻ này chỉ áp dụng cho giao diện Blogger mặc định, còn các giao diện bạn tải trên mạng sẽ vô ích với "Trình thiết kế mẫu" này.

Trước khi thực hiện thủ thuật:

Sau khi thực hiện thủ thuật:

Ở đây mình chỉ thay đổi màu nền cho thanh tiêu đề chứ không chèn thêm biểu tượng

Đối với giao diện tải về trên mạng, bạn phải áp dụng thủ thuật sau:

Đầu tiên, bạn đăng nhập vào Blog > Chọn thiết kế > Chọn chỉnh sửa HTML (bấm chọn Mở rộng mẫu tiện ích)

Bạn nhấn Ctrl + F tìm nội dung /* Accents rồi chèn ngay dưới nó đoạn code sau:

.sidebar .widget h2 {

background: #292929 url('URL_hình_ảnh_bạn_muốn_chèn_làm_Icon_cho_thanh_tiêu_đề') no-repeat left top;

margin-top:5px;

text-indent: 2px;

padding:5px;

}

Trong đó:
background: #292929 là màu của thanh tiêu đề, bạn thay đổi theo ý thích.
text-indent: 2px; là khoảng trống thụt vào của tiêu đề tiện ích.

Tới đây, thanh tiêu đề các widget đặt trên Sidebar dọc 2 bên blog đã đổi màu và có Icon như ý, nhưng với 1 số Template (lại như cái template khó chịu mình đang xài :D) thì thanh tiêu đề của các widget đặt ở phần chính của blog vẫn không thay đổi. Nếu gặp tình trạng này thì bạn cần làm như sau:

- Tìm nội dung /* Widgets trong CSS code của template và chèn ngay dưới nó đoạn code này:

.widget h2 {

background: #292929 url('URL_hình_ảnh_bạn_muốn_chèn_làm_Icon_cho_thanh_tiêu_đề') no-repeat left top;

margin-top:5px;

text-indent: 2px;

padding:5px;

}

Các thông số trong đoạn code bạn tùy chỉnh giống với đoạn code đầu tiên để các thanh tiêu đề được đồng bộ.
-  Lưu mẫu  và xem kết quả.

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

Related Post

Admin Huỳnh Phụng

Xuất thân là Quản Trị Kinh Doanh. Yêu thích Marketing Online và trở thành Blogger với gần 1000 bài viết về nhiều lĩnh vực. Blog cá nhân http://toilaquantri.com