Slide Ảnh Cho Blogspot

Hãy làm theo 4 bước sau để chèn slide ảnh CSS3 này vào blog của bạn.
Vào đây xem:Side
1. Bạn vào phần quản lý Blogger > Bố cục >
2 Thêm tiện ích > HTML/Javascript
3. Copy đoạn code bên dưới và Paste vào đó

<style type="text/css" media="screen">
.container {
    margin: 0 auto;
    overflow: hidden;
    width: 700px;
}
#content-slider {
    height: 335px;
    width: 100%;
}
#slider {
    background: none repeat scroll 0 0 #000000;
    border: 5px solid #FFFFFF;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
    height: 320px;
    margin: 10px auto;
    overflow: visible;
    position: relative;
    width: 680px;
}
#mask {
    height: 320px;
    overflow: hidden;
}
#slider ul {
    margin:0;
    padding:0;
    position:relative;
}
#slider li {
    width:680px;
    height:320px;
    position:absolute;
    top:-325px;
    list-style:none;
}

#slider li.firstanimation {
    -moz-animation:cycle 25s linear infinite;
    -webkit-animation:cycle 25s linear infinite;
}
#slider li.secondanimation {
    -moz-animation:cycletwo 25s linear infinite;
    -webkit-animation:cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
    -moz-animation:cyclethree 25s linear infinite;
    -webkit-animation:cyclethree 25s linear infinite;
}
#slider li.fourthanimation {
    -moz-animation:cyclefour 25s linear infinite;
    -webkit-animation:cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
    -moz-animation:cyclefive 25s linear infinite;
    -webkit-animation:cyclefive 25s linear infinite;
}

#slider .tooltip {
    background:rgba(0,0,0,0.7);
    width:300px;
    height:60px;
    position:relative;
    bottom:75px;
    left:-320px;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;
}
#slider .tooltip h1 {
    color:#fff;
    font-size:24px;
    font-weight:300;
    line-height:60px;
    padding:0 0 0 20px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
    left:0px;
}

/* PROGRESS BAR */
.progress-bar {
    position:relative;
    top:-5px;
    width:680px;
    height:5px;
    background:#000;
    -moz-animation:fullexpand 25s ease-out infinite;
    -webkit-animation:fullexpand 25s ease-out infinite;
}
/* ANIMATION */
@-moz-keyframes cycle {
    0% { top:0px; }
    4% { top:0px; }
    16% { top:0px; opacity:1; z-index:0; }
    20% { top:325px; opacity:0; z-index:0; }
    21% { top:-325px; opacity:0; z-index:-1; }
    92% { top:-325px; opacity:0; z-index:0; }
    96% { top:-325px; opacity:0; }
    100%{ top:0px; opacity:1; }

}
@-moz-keyframes cycletwo {
    0% { top:-325px; opacity:0; }
    16% { top:-325px; opacity:0; }
    20% { top:0px; opacity:1; }
    24% { top:0px; opacity:1; }
    36% { top:0px; opacity:1; z-index:0; }
    40% { top:325px; opacity:0; z-index:0; }
    41% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
    0% { top:-325px; opacity:0; }
    36% { top:-325px; opacity:0; }
    40% { top:0px; opacity:1; }
    44% { top:0px; opacity:1; }
    56% { top:0px; opacity:1; }
    60% { top:325px; opacity:0; z-index:0; }
    61% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
    0% { top:-325px; opacity:0; }
    56% { top:-325px; opacity:0; }
    60% { top:0px; opacity:1; }
    64% { top:0px; opacity:1; }
    76% { top:0px; opacity:1; z-index:0; }
    80% { top:325px; opacity:0; z-index:0; }
    81% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
    0% { top:-325px; opacity:0; }
    76% { top:-325px; opacity:0; }
    80% { top:0px; opacity:1; }
    84% { top:0px; opacity:1; }
    96% { top:0px; opacity:1; z-index:0; }
    100%{ top:325px; opacity:0; z-index:0; }
}

@-webkit-keyframes cycle {
    0% { top:0px; }
    4% { top:0px; }
    16% { top:0px; opacity:1; z-index:0; }
    20% { top:325px; opacity:0; z-index:0; }
    21% { top:-325px; opacity:0; z-index:-1; }
    50% { top:-325px; opacity:0; z-index:-1; }
    92% { top:-325px; opacity:0; z-index:0; }
    96% { top:-325px; opacity:0; }
    100%{ top:0px; opacity:1; }

}
@-webkit-keyframes cycletwo {
    0% { top:-325px; opacity:0; }
    16% { top:-325px; opacity:0; }
    20% { top:0px; opacity:1; }
    24% { top:0px; opacity:1; }
    36% { top:0px; opacity:1; z-index:0; }
    40% { top:325px; opacity:0; z-index:0; }
    41% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
    0% { top:-325px; opacity:0; }
    36% { top:-325px; opacity:0; }
    40% { top:0px; opacity:1; }
    44% { top:0px; opacity:1; }
    56% { top:0px; opacity:1; z-index:0; }
    60% { top:325px; opacity:0; z-index:0; }
    61% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
    0% { top:-325px; opacity:0; }
    56% { top:-325px; opacity:0; }
    60% { top:0px; opacity:1; }
    64% { top:0px; opacity:1; }
    76% { top:0px; opacity:1; z-index:0; }
    80% { top:325px; opacity:0; z-index:0; }
    81% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
    0% { top:-325px; opacity:0; }
    76% { top:-325px; opacity:0; }
    80% { top:0px; opacity:1; }
    84% { top:0px; opacity:1; }
    96% { top:0px; opacity:1; z-index:0; }
    100%{ top:325px; opacity:0; z-index:0; }
}

/* ANIMATION BAR */
@-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
</style>

<div class="container">
    <div id="content-slider">
        <div id="slider">
            <div id="mask">
            <ul>
               <li id="first" class="firstanimation">
            <a href="http://www.càiwin8.vn/">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMFb5MftwBdXpZuqiUgzQ5OSVsoakR0kQI-KxtkGk4-JRxZXqa4-kTuLkTqv3mRwhfqBgAcOiYOBBWZr6IAAchKLccTBO1TethcoRWAoHLfuuIjahBSdWsdUSbUzwhF53jhdTFDeRly0o/s1600/img_1.jpg" alt="Cougar"/>
            </a>
            <div class="tooltip">
            <h1>Cougar</h1>
            </div>
            </li>

            <li id="second" class="secondanimation">
            <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgij34-3VUUfrL4vSQg9KcoP2tD5wDVOWmd6FWiGoppzQkjaEcH-8qxWiHniH2-AJ3hMxr2808Ew0LvIVwqueSDYYQWi3NkkLljrbKcC8Kf5zbo8Iy4O1akV63l7F7fM2BtjnrsKOLGLho/s1600/img_2.jpg" alt="Lions"/>
            </a>
            <div class="tooltip">
            <h1>Lions</h1>
            </div>
            </li>

            <li id="third" class="thirdanimation">
            <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH76SzpqaTbPa-IWliil-5FOWRnZIKgFrOK83DxBS7EVw6eh_Th9OLz4lRLIQMenbLvfdYpWXsZNnwAmdwnY_TTDUnW0FsBwUrqaCrfW0607a9Epgz2EfB_J7XTK-KsjeIkW84X3ZpMV8/s1600/img_3.jpg" alt="Snowalker"/>
            </a>
            <div class="tooltip">
            <h1>Snowalker</h1>
            </div>
            </li>

            <li id="fourth" class="fourthanimation">
            <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR7Tsy2XFFTJM2SdiXmnVJVcL2Ru6jfNB8j7EQtXm3sqMxmI1fvjqGjXJpfr5hxubJYtGoOdkLjgKIcauCI4VMyNszOMP76KbL1W3Ijqotnc86T1j_dIih1InJxMOOU9o3Uf3x5u47XIM/s1600/img_4.jpg" alt="Howling"/>
            </a>
            <div class="tooltip">
            <h1>Howling</h1>
            </div>
            </li>

            <li id="fifth" class="fifthanimation">
            <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim-9TqyqUib3e-TovBOFkVBfSlYFmkbAqN3-fOAI_EKwohZ9QvYKxulwdROtlsg5fGYzgowKsA8l6n-vlHkud5VxqVsbNlMEehvGtVBqNiYNq1uZ77JyNpJ5cB6k6re9Ths3noqGnT_gI/s1600/img_5.jpg" alt="Sunbathing"/>
            </a>
            <div class="tooltip">
            <h1>Sunbathing</h1>
            </div>
            </li>
            </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>