Hiệu ứng Link nudging từ CSS3 cho blogspot
Hiện nay hiệu ứng CSS 3 được sử dụng rất nhiều thay thế cho một số scripts đơn giản vì tính tiện lợi cũng như load nhanh của nó. Bài viết này mính sẽ giới thiệu đến với các bạn một hiệu ứng chuyển động thụt đầu dòng (tương tự như hiệu ứng Link Nudging từ Jquery) khi dê chuột vào thẻ ul hoặc li cho blogspot.

Các bạn có thể xem demo bằng cách dê chuột vào một số dòng bên dưới nha:
  • List Hover Background Effect 1
  • List Hover Background Effect 2
  • List Hover Background Effect 3
  • List Hover Background Effect 4

» Cách thêm hiệu ứng List Nudging từ CSS3 cho blogspot.

1. Đăng nhập vào blospot
2. Chọn mẫu (template) => Chọn Chỉnh sửa HTML (Edit HTML)
3. Thêm đoạn code bên dưới vào trước thẻ đóng ]]></b:skin>.
.post ul{
padding: 0;
margin: 0;
list-style: none;
}

.post ul li{
width: 100%;
clear:left;
overflow: hidden;
}

.post ul li:hover{
min-width: 400px;
color: #fff;
background: #ce3e3e;
border-left: 10px solid #8B0000;
box-shadow: 0 0 6px #B22222;
-moz-box-shadow: 0 0 6px #B22222;
-webkit-box-shadow: 0 0 6px #B22222;
transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
}
» Tùy chỉnh:
  • 400px là chiều rộng tối thiểu của hiệu ứng khi hover vào list.
  • #fff là màu chữ trên các list.
  • #ce3e3e là màu nên khi ta dê chuột lên list li. 
  • 10px: Là độ thụt vào của chữ so với dầu dòng khi ta dê chuột vào list.
  • #8B0000 là màu nền của phần bên trái khi ta dê chuột lên nó sẽ lùi vào 10 px.
  • 6px là độ dày của lề bên phải khi ta dê chuột lên trên list.
  • #B22222 Hiệu ứng đổ bóng khi ta dê chuột lên.
  • 0.4s là thời gian chuyển động thụt đầu dòng khi ta dê chuột lên list. Bạn nên dể thời gian hợp lý nếu không nó sẽ quá nhanh hoặc quá chậm.
  • Nếu bạn chưa biết lấy mã màu thích hợp ở đâu hãy sử dụng bảng lấy mã màu của namkna nha: Color conveter for web

4. Để có được link chứa hiệu ứng bạn chỉ cần sử dụng đoạn mã XML sau trong tiện ích, trong HTML của bài viết hay bất cứ đâu bạn muốn. 
<ul>
<li>List Hover Background Effect  1</li>
<li>List Hover Background Effect  2</li>
<li>List Hover Background Effect  3</li>
<li>List Hover Background Effect  4</li>
</ul>
- Xuất bản tiện ích bài viết hoặc tiện ích của bạn để xem demo nha.