Css3 Fade Slide Show cho Blogger

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/AVvXsEhSv220mYVfwhpdJ3FQ8lECEvSgVauatUawfNFmeSTAppWvz_fFZ6Yd0PeUCE9YJPQE7y4CLL39HvXX7uRHwPSR-I4vdxuKR_KCd4CaulIenv-SAcQBItL3rUNrkySVBvogubvteJ4LZgU/s1600/bloggertrix-pic1.jpg" alt="image01" />
       <div>Title 1</div>
    </li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAEeX8n3jnL83nH_7qVEHl1B6veexwaR6WHGflLVrP_SC4NtE2kY-axpyD7Gj6HDzdN5b4_DY18on3oHym1o28-eCAhwT2pGL_YESh0mj5leA3JSiPsdVJh3QBgZy300glVpJ5cJNyec4/s1600/bloggertrix-pic2.jpg" alt="image02" />
       <div>Title 2</div>
    </li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvufzOkSDwU_cVooeszMbGWa44o7NX7clJcoFSnbjUht-FigyPUI5ICq3ND1WoubRugkqZDphTBFCralG2y0ENJRETez4T-drW8EFehLtnklK-4k1BGd9YZuJ2-fkvMF7nt1QKD3v6UVU/s1600/bloggertrix-pic3.jpg" alt="image03" />
       <div>Title 3</div>
    </li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHl8som0o2f1VN0vFHjg0egXgMaoYslkndo4YHMTN1ku3AeCCSmfnzNqDu7Y0PAILT5qtngv6KL9Bu9eXGMTOyGxCXhSYHfPVdXzWQDOGuc7L1oaCUbwS11I4xrwScpt1YkU1v7M4ejvs/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.

THỦ THUẬT 04:42