Thay dấu gạch đầu dòng bằng một hình ảnh?

Bài trước mình đã chia sẻ hướng dẫn tùy biến giao diện của danh sách bullet và số thứ tự và bây giờ chúng ta  sẽ tìm hiểu làm thế nào để thay đổi danh sách bullet bằng cách sử dụng các hiệu ứng ảnh Hover. Bạn xem ví dụ ngay tại bài này sau đó làm theo các bước hướng dẫn bên dưới

  • Đây là blog Troll VL
  • VL nghĩa là Vui Lắm
  • Đừng nghĩ bậy nhé!
  1. Vào blogger > Mẫu > Chỉnh sửa HTML
  2. Dán code bên dưới vào trước ]]></b:skin>

  3. .post ul {list-style:none;
    }
    .post ul li {
        line-height: 1.4em;
            background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9sACbGOKecLYQZzsHiSP8y5O1Zo6QeXp2rftygitSWoeObO1AmnBXErfpFiG4tZprL7tDg-W-aRBDHgeXTpakp3lw1gQ3M4HxEFh82Q7kn8CBcF5c3K42DFCniCBLTp6TtcB1IxRYPtsA/h120/2.gif) no-repeat scroll 0px 4px;
        margin: 0.3em 0;
        padding: 0 0 0.8em 20px;
    }
    .post ul li:hover {
            background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3-GjFVVyR-AYlAAoeLVe8luSjq9a-mKPi36w3NCLgiLFvtyE1wgnbkoAgJRqBEIaVF_weCwFt2cURBN795To-Y4FXjqlMwa7iEwiQSSc1HnjgETjy0hLQUFzix78ACtAZVPj4kuGIpgbC/h120/1.gif) no-repeat scroll 0px 4px;
    }
  4. Lưu lại
Bạn có thể thay hình ảnh theo ý thích của mình tuy nhiên nên chọn hình nào hoặc phải resize sao cho phù hợp. Chúc blog của bạn ngày một đẹp hơn
6 Comments
Comments

6 comments

14/3/13
Cái em cần đây rồi, nhưng mà sao nó không có gì hết nhỉ? anh giúp em tí
14/3/13
Trong CSS của bạn phức tạp quá, nhiều cái chức năng giống nhau bạn vẫn để tồn tại song song chúng. Gửi template qua email cho mình và mình sẽ fix cho khi có thời gian
15/3/13
Vâng ạ, mong anh giúp đỡ :))
17/3/13
Anh đã nhận được template e gửi cho anh chưa vậy anh Huy. sao k thấy anh trả lời ;-(
18/3/13
Lần sau khi gửi template bạn comment thông báo đã gửi mail nhé vì mình không check mail thường xuyên lắm đâu. Còn cách khắc phục tình trạng của bạn như sau
Thay vì thêm code như trong bài này bạn thêm code bên dưới
.maincontent ul {list-style:none;
}
.maincontent ul li {
line-height: 1.4em;
background: transparent url(https://lh4.googleusercontent.com/-X8hSgK81W1U/UImDmBt2ZTI/AAAAAAAADqA/C1LA3d0KE6Q/h120/2.gif) no-repeat scroll 0px 4px;
margin: 0.3em 0;
padding: 0 0 0.8em 20px;
}
.maincontent ul li:hover {
background: transparent url(https://lh4.googleusercontent.com/-QesMX5JXUp8/UImDmHgO-4I/AAAAAAAADqE/qB0nxW_vxNg/h120/1.gif) no-repeat scroll 0px 4px;
}


Để khắc phục không hiển thị đánh số thứ tự bạn tìm đoạn code sau trong template
ol {
margin-left: 3px;
padding: 0;
}

Và xóa padding: 0; đi
20/3/13
Đã làm được.cảm ơn anh nhiều nhé :))

Cảm ơn bạn đã ghé thăm Troll VL !
» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>

Insert Emoticons
:cuoi
:hihi
:thank
:haha
:meu
:cry
:oaoa
1cuoi
:D
@@
:p
:o
:vi
:ko
:ca
:why
:xin
:lanh
:im
:aoi
:ado
:mda
:tat
0:khoa
a:ab
k:ac
q:ad
w:ae
e:af
l:ag
g:ah
8:ai
9:aj
9:ag
:9a
*Phải có khoảng trống trước các code mới hiển thị mặt cười


Mã Hóa Code Tạo và xem trước comments Cancel Reply
-->