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é!
- Vào blogger > Mẫu > Chỉnh sửa HTML
- Dán code bên dưới vào trước ]]></b:skin>
- Lưu lại
.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;
}
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
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
Cảm ơn bạn đã ghé thăm Troll VL !
Insert Emoticons» 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>
Mã Hóa Code Tạo và xem trước comments Cancel Reply
&
Convert
'
Convert
"
Convert
<
Convert
>