Css3 Fade Slide Show cho Blogger v3

Làm thế nào để thêm slide với hiệu ứng trượt đẹp sử dụng CSS3 và HTML. Tiện ích sẽ giúp cho blog của bạn hấp dẫn, bạn có thể thêm một số hình ảnh có liên quan đến blog để trình chiếu. Bao gồm một số hiệu ứng như di chuyển tiêu đề và ảnh thumbnail. Tiện ích này giúp tăng tốc blog vì nó sử dụng hoàn toàn CSS3 như ves 1 và ves 2.

Bạn có thể xem ảnh minh họa.

Bạn có thể xem demo để thấy rõ hơn.

VIEW DEMO

¤ Thêm slider CSS3 ves 3 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>
/* fade slider http://namkna.blogspot.com/ */
.slides {
    height:300px;
    margin:50px auto;
    overflow:hidden;
    position:relative;
    width:600px;
}
.slides ul {
    list-style:none;
    position:relative;
}

/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
    0% {opacity:0;}
    6% {opacity:1;}
    24% {opacity:1;}
    30% {opacity:0;}
    100% {opacity:0;}
}
@-moz-keyframes anim_slides {
    0% {opacity:0;}
    6% {opacity:1;}
    24% {opacity:1;}
    30% {opacity:0;}
    100% {opacity:0;}
}
.slides ul li {
    opacity:0;
    position:absolute;
    top:0;
    /* css3 animation */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}
/* css3 delays */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.slides ul li img {
    display:block;
}
/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
    0% {left:100%;
        opacity:0;}
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:10%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;

    /* css3 animation www.bloggertrix.com*/
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}
</style>
<div class="slides">
 <ul> <!-- slides -->
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrCqq6kylOTtgQkQKoe4EPXuzgZdoAwbPE4bh6F6tXngNFGTvFHuki8zK85MxjQ-BYl2goFymBKc2RrWJZx2nnSW-pxOBuIzq_Nht7Qna64_RyNZQEGptADkecedMq3RARcXCuARJoOkU/s1600/bloggertrix-pic1.jpg" alt="image01" />
       <div>Title 1</div>
    </li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQu3wodUzBaFweMadFr4qjgTvlxB8PhcDR3gd9wpHup3FNklc61ITdPybjw4-pMK-BFSQzc0QeWPFkUHwIpmJTIZJGdKczKBO_PiH2IIcy-9KbdcEQNDSlL50TLav6Y_UcCONZu2yRIbw/s1600/bloggertrix-pic2.jpg" alt="image02" />
       <div>Title 2</div>
    </li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKk5G3MCCtKtgRuclAT5H3uhHKGpNG4AM7i6v87jsxWaarl8KcfmkryFiUuWCzH_u1HE5csJBMvnPnpzCay4t9hKgR2pUCMh7gQit1KehVfKgC5o20Ru55eZE6OgpSkfakwC67nDST2GM/s1600/bloggertrix-pic3.jpg" alt="image03" />
       <div>Title 3</div>
    </li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-tR9Fkwj9hi6hxxm4fbzN5aUCuaN6NyMt9ZSur8RKNaA8skWlz_lWjU2ZFSwpTq8sUXNe2xQn6BPnvH-bJrWx4GgQUraSJOBWxcIrYK4bQC8xmTCYqCr-kS0MGtXawhEy5TqtOCZvQsI/s1600/bloggertrix-pic4.jpg" alt="image04" />
       <div>Title 4</div>
    </li>
  </ul>
</div>

¤ Tùy chỉnh:

• Thay phần màu cam thành tiêu đề bài viết hoặc bức ảnh của bạn,
• Thay phần màu vàng thành link hình ảnh của bạn.
• height:300px; là chiều cao của ảnh.
• width:600px; là chiều rộng cuả ảnh.
• Bạn nên chọn các bức ảnh có chiều rộng và chiều cao thích hợp như trên nha.

5- Lưu mẫu lại và xem kết quả nha.