10/26/12

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

10/26/12

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/AVvXsEiYFDFuMpnFGpQvY3Xv3Qnl7qoIgt-MI_Msqb4cqzGgDJ2bXGzbTnLcWHKJ75tZ1upgfbBunz3QUBeD96VuPSWD9xLNkQWVRSB9Hge4-ies3ubGn1mfgmvzRZ20yTSB_CtG_Ms2O07PtHMf/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/AVvXsEjZS589B0xhc5HideSUMy-MZd1CoHcljS0Q4gptypNlmzahis27YuW-eiloy7qJO1pSNxkTnU6osPotUKSjJTW__JpwqjjvT4xdYNW_SbyKi5jqoiIkr1vOQXFLPTVgLvquZJCgwalhYRjU/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
Tin liên quan
XEM TRÊN MOBILE

No comments:

Post a Comment

300x250