Tạo bullet khác nhau cho các widget

Như các bạn thấy trên sidebar, lowerbar của Minh Hai Blog một số mục như "Chủ đề", "Blogroll", "Twitter Update"... có các biểu tượng bullet khác nhau. Theo yêu cầu của bạn Hoang Thanh, mình sẽ trình bày cách tạo bullet cho từng widget riêng biệt như vậy trong blogspot.

Thông thường với các template miễn phí các bạn tìm thấy trên internet thì bullet thường chỉ có một dạng duy nhất cho tất cả widget. Chúng được qui định trong code HTML có dạng như sau:

.sidebar ul {
         margin: 0;
         padding: 0;
}
.sidebar li {
         margin: 0;
         padding: 5px 0px 5px 20px;
         background: url('http://i306.photobucket.com/albums/nn272/Talkvietnam/bullet01.png') no-repeat 0px 7px;
         line-height: 1.6em;
         list-style-type: none;
         border-bottom: 0px solid $sidebarListLineColor;
}

Trong đó http://i306.photobucket.com/albums/nn272/Talkvietnam/bullet01.png là hình ảnh của bullet, các bạn nên chọn cỡ khoảng 14x14.

Để tạo bullet riêng cho từng widget bạn cần xác định được ID của nó. Ví dụ với widget "Chủ đề" trong blog của mình.
Vào blog, bấm chuột phải chọn View Page Pource. Bấm Ctrl+F, tìm tới "Chủ đề". Bạn chú ý tới đoạn code sau:

Bạn thấy ID của "Chủ đề", trong blog của mình là Label2. Sau khi đã xác định được ID bạn sẽ thêm một đoạn code để qui định bullet cho nó. Thêm đoạn code sau bên dưới đoạn code qui định bullet chung cho sidebar ở trên.

#Label2 ul{
        margin: 0;
        padding: 0;
}
#Label2 ul li {
        border-bottom: 1px solid #f2f2f2; 
        background: url('http://i306.photobucket.com/albums/nn272/Talkvietnam/folder.png') no-repeat 0px 6px; 
        padding: 5px 0px 5px 20px;
        margin: 0; 
        list-style: none;
}

Tùy theo kích thước, hình dạng của bullet mà điều chỉnh lề cho hợp lý. Vậy là xong rồi.

Với các widget được tạo ra bằng cách Add HTML/JavaScritp thì hơi khác một chút. Đầu tiên bạn cũng phải xác định được ID của nó bằng cách làm như trên. Ví dụ với "Blogroll", ID của nó là HTML3.

Để qui định bullet cho "Blogroll" bạn thêm đoạn code sau:

.HTML3, #HTML3 ul{
        margin: 0;
        padding: 0;
}
.HTML3, #HTML3 li {
        border-bottom: 1px solid #f2f2f2; 
        background: url('http://i306.photobucket.com/albums/nn272/Talkvietnam/blogroll.png') no-repeat 0px 7px; 
        padding: 5px 5px 5px 20px;
        margin: 0; 
        list-style: none;
}

Phần HTML code của "Blogroll" có dạng:

<ul>
<li><a href="Link01">Mô tả</a></li>
<li><a href="Link02">Mô tả</a></li>
<li><a href="Link03">Mô tả</a></li>
<li><a href="Link04">Mô tả</a></li>
</ul>

Với các widget khác bạn làm tương tự nếu muốn.
Chúc các bạn thành công!