CSS3 là có một ưu điểm chỉ mình nó có đó là không ảnh hưởng đến tốc độ tải trang của bạn (trong khi nếu dùng javascript blog của bạn sẽ mất thời gian tải lâu hơn do phải gửi repuest). Hôm nay namkna sẽ hướng dẫn các bạn một slider với hiệu ứng trượt ngang mượt mà từ các thuộc tính CSS3 tức là không có jQuery hoặc không có bất kỳ mã JavaScript nào khác. Đây là một slider từ css3 đúng nghĩa do vậy đừng ngạc nhiên nếu thấy tốc độ của nó nhanh hơn bất kỳ một slider từ jQuery. Slider này chỉ có một hiệu ứng trượt ngang duy nhất (khác với slider CSS3 vesion 1 trước đây trượt dọc từ trên xuống).
Demo của thủ thuật:

VIEW DEMO

Ảnh minh họa:
Slider ảnh từ CSS3 cho Blogger ves 2

Sau đây là một số tính năng tuyệt vời của slider CSS3 ves2 này!

  1. Được thiết kế hoàn toàn từ CSS3 thuần túy.
  2. Các tùy chỉnh được thay đổi hoàn toàn với CSS3.
  3. Dừng hoạt động khi dê chuột lên slider.
  4. Có thể chèn trang web hay blog vào slider bằng mã nhúng  inframe.
  5. Bạn có thể thêm tiêu đề và nhiều thứ khác ....
Bạn có thể xem Demo của slider CSS3 ves2 này theo link dưới:


Thêm slider CSS3 ves2 này vào blog.

1- Đăng nhập vào blog
2- Chọn Bố cục (Layout)
3- Chọn Thêm tiện ích (Add widget)
4- Chọn HTML/Javascipts và dán code bên dưới vào..
<style>
#slider {
    width: 600px;
    height: 200px;
    margin: 40px auto 0;
    overflow: visible;
    background-color: #362c30;
    border: 10px solid #362c30;
    -moz-transition: all 150ms ease-in;
    -webkit-transition: all 150ms ease-in;
    -o-transition: all 150ms ease-in;
    position: relative;
}
 
#mask {
    overflow: hidden;
}
 
#slider:hover {
    background-color: #fff;
    border: 10px solid #ddd;
}
 
#slider:hover #pause {
    opacity: 1;
}
 
#slider:hover #progress {
    background-color: rgba(255,255,255,0.0);
}
 
#slider:hover ul, #slider:hover #progress, #slider:hover #overlay {
    -moz-animation-play-state: paused;
    -webkit-animation-play-state: paused;
}
 
#pause {
    width: 600px;
    height: 200px;
    position: absolute;
    top: 0;
    opacity: 0;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8be8RTHHyFSA1dRYAtQhrAHHYLM4AVt5KhUN6SH_6RdCnmGVOGZflKS67oldIffuVA0ynWGqEniiIDTiy70xVtOMKVmSfFF_6OM_5qu67gTdluEKPwlHFrC_G4CvR1l-YlRmYkZzfaLu9/s1600/paused-namkna-nlogspot-com-v2.png);
    background-position: 566px 10px;
    background-repeat: no-repeat;
    pointer-events: none;
    -moz-transition: all 150ms ease-in;
    -webkit-transition: all 150ms ease-in;
    -o-transition: all 150ms ease-in;
}
 
#progress {
    width: 1px;
    height: 1px;
    background-color: #ffd000;
    -moz-animation: progress 18s infinite;
    -webkit-animation: progress 18s infinite;
    position: relative;
    top: -1px;
    -moz-transition: all 150ms ease-in;
    -webkit-transition: all 150ms ease-in;
    -o-transition: all 150ms ease-in;
}
 
#overlay {
    width: 600px;
    height: 200px;
    position: absolute;
    top: 0;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYH2WDoSvIBRwQym0W640UEmET00aHwjm7y-tYo7MNcz3UwA7t5RPmbOv6USPMVjQIPtckOcwpuqk_9uDl-dHLkNv_bo0eidUcVn8p-F1slHdQXiZAnM3xdM0mGkUIIHr6YLAV9IaeQhnf/s1600/overlay-namkna-blogspot-com-v2.png);
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    -moz-transition: all 150ms ease-in;
    -webkit-transition: all 150ms ease-in;
    -o-transition: all 150ms ease-in;
    opacity: 0.5;
    -moz-animation: overlay-fade 18s infinite;
    -webkit-animation: overlay-fade 18s infinite;
}
 
#slider ul {
    width: 2400px;
    list-style: none;
    padding: 0;
    margin: 0;
    -moz-animation: slide-animation 18s infinite;
    -webkit-animation: slide-animation 18s infinite;
    position: relative;
    left: 0px;
}
 
#slider li {
    display: inline;
    width: 600px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
    position: relative;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqg3_lgZx2ZZkRxw279oSVxEL8-1EFOFXhU_2K4CVp2vBFzif4e90Rld56mLd7aaP_KNmNXzgFiYCc5xsEugNMF4riy7tnA2EG5DhjLWDE_wkkRT3fIPdGFpx-UBy-PZoLNL04EA3jxkBt/s1600/loader-namkna-blogspot-com-v2.gif);
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
 
#slider li:last-of-type {
    background-color: #362c30;
}
 
#slider li a {
    display: block;
    text-decoration: none;
}
 
#slider li span {
    display: block;
    width: 560px;
    padding: 15px 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(54,44,48,0.6);
    border-top: 1px solid #362c30;
    text-shadow: 1px 1px 1px #362c30;
    pointer-events: none;
    text-align: left;
}
 
#slider-shadow {
    width: 100%;
    height: 260px;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3xLpC9uIvs7SEqIN2_7fF-7JFOFdmUxqJqEMWGSIFh-N6XtjBS-YapgExzkmpfWCKYOlBii8K7krii7MD64p7HSATKMA0_XOZoafhyQj3QswCoVZKV-iIL2tzc9loyizGW2U4ZS4XsV-t/s1600/shadow-namkna-blogspot-com-v2.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    margin: 10px auto 0;
}
 
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
 
#slider ul li span h2 {
    font-size: 24px;
    line-height: 24px;
    color: #fff;
    font-weight: normal;
    font-family: 'Communist-Regular';
    text-shadow: 1px 1px 1px #362c30;
}
 </style>
 
 
<div id="slider-shadow">
 <div id="slider">
      <div id="mask">
       <ul>
<!-- Ảnh có mô tả và tiêu đề -->
        <li>
         <a href="#" title="Mô tả ảnh 1"><img src="Link photo 1" /></a><span><h2>Tiêu đề 1</h2></span>
        </li>
<!-- Ảnh có mô tả và không có tiêu đề -->
        <li>
         <a href="#" title="Mô tả ảnh 2"><img src="Link photo 2" /></a>
         <span><h2>ADD CAPTION HERE</h2></span>
        </li>
<!-- bắt đầu mã nhúng trang web hoặc blog -->
        <li>
         <iframe src="http://namkna.blogspot.com/" width="600" height="200" frameborder="0" scrolling="no"></iframe>
         <span><h2>Namkna Blogger</h2></span>
        </li>
<!-- Ảnh có mô tả và không có tiêu đề -->
        <li>
         <a href="#" title="Mô tả ảnh 3"><img src="Link photo 3" /></a>
        </li>
       </ul>
   </div>
      <div id="progress">
      </div>
      <div id="overlay">
      </div>
      <div id="pause">
      </div>
 </div>
</div>

Tùy chỉnh!

  1. Thay dấu thăng màu đỏ (#) thành liên kết tới bài viết hoặc trang web của bạn.
  2. Thay Mô tả ảnh 1,2,3 thành mô tả cho liên kết hoặc ảnh tương ứng.
  3. Thay Link photo 1,2,3 thành link của hình ảnh bạn muoona làm slider.
  4. Thay  Tiêu đề 1 thành tiêu đề của bài viết 1 hoặc hình ảnh 1.
  5. Thay http://namkna.blogspot.com/ thành trang web bạn muốn nhúng, và Namkna Blogger là tiêu đề của trang nhúng.
  6. width: 600px; là chiều rộng của slider
  7. height: 200px; là chiều cao của slider
Nếu bạn muốn test thử hoặc chỉnh sửa thì có thể dùng công cụ Test html/javarscip của namkna Tại đây
Kết: Đây là tiện ích thuần túy CSS 3 do vậy rất rễ thực hiện. Nếu gặp bất cứ khó khăn gì khi áp dụng vui lòng commnet bên dưới, namkna sẽ giải đáp giúp các bạn.!