Slider ảnh từ CSS3 cho Blogger

Bạn có thể xem Demo của slider CSS3 ves2 này theo link dưới:

VIEW DEMO

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/AVvXsEipaZOAkyX207UHXI4PSJbgmfagcpDi-FfItUEMGLFxR-TGfmzDIZPaq9Ub3jrJt3kVzB__Leyr-p2U92GKF2z8SdeniPGq9a4ns1EgRyZtnvIHsDs-Ow2WOmTSVtjWbe179Eq5uE4G2LO9/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/AVvXsEh1bXqbNaqvyT1cKOXg6migdibRhOetqUzILFsYiajQshQk3uOXaD-xqcy3-RqKms425BaPC070L7fQCEyw-yOPgcIwbQxr5dmHV4nceV6lH5JujIOKaevGWQkgj5yJdht6nvzkAzFjJh_9/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/AVvXsEjSYvkYy_SFiYlv4WwhbJ2wHD3BTzFZTvnZ8iUwdhvLcGAtnuEGfY9H8BE8k_pdLgmqHk7Duy9iWnh8gX2OwHJ-nZTf1RHZ3nz0_miQh8Wt3qqU10IZgnqECyxOOQHmVbWuMtKddLarpYxk/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/AVvXsEix_l9_V6CPhftTNSv5WUycddgLLM0ShsUZ85rEEwLfwuSrxaafjoEp1kq3YKkB_PMMM3Y0esWombWu1MT4G8Whlqfe8NvDCjXj6NGO2FuiroAxXqUVaRy-QqHogoH9je7ScYp_byEwpdFq/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!
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.
Thay Mô tả ảnh 1,2,3 thành mô tả cho liên kết hoặc ảnh tương ứng.
Thay Link photo 1,2,3 thành link của hình ảnh bạn muoona làm slider.
Thay Tiêu đề 1 thành tiêu đề của bài viết 1 hoặc hình ảnh 1.
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.
width: 600px; là chiều rộng của slider
height: 200px; là chiều cao của slider

THỦ THUẬT 06:27