Slide Cycle Style Ảnh Cho Blogspot - Slide Ảnh Css3

Work on Trust
Author - Work on Trust
5:36:00 AM
0


slide tot cho seo


Slide ảnh này chỉ dùng CSS3 thuần khiết mà không đụng chạm 1 chút nào đến Javascript hay jQuery, điều này cực tốt cho SEO. Vì vậy Slide ảnh này rất dễ dàng để tùy chỉnh cho cả các bạn blogeer mới ( bao gồm cả mình ). Nó nằm hoàn toàn trong tay bạn vì không mã hóa trên máy chủ nào cả, chỉ cần một chút HTML cơ bản và 1 chút tốt kiến thức CSS3 là bạn có thể tùy chỉnh rồi. Dạng Slide ảnh này được code bởi smashingmagazine, vậy nên hãy xem trên trang web của họ để biết thêm về nó nhé. Phiên bản này mình sưu tầm từ phiên bản kia của họ, bây giờ bạn chỉ cần làm theo vài bước đơn giản để cài đặt slide ảnh đẹp này lên cho blogspot của bạn.

        * DEMO

Hãy làm theo 4 bước sau để chèn slide ảnh CSS3 này vào blog của bạn.

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/AVvXsEg9d5TKI-FcQu8SMGYDev8FXHs4buyPXlIq7YB2PMdFOb-o50yRwbWzdowarENs4opLR0HULYIXhzNgyo1wZr65xwVHeSyJBdu5FCgCLh2mA3v-RjNyvPmqzUtNb13uHCwm5Htln_GXnsQ/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/AVvXsEjcY05w3TKIy4Uxu4JGjpp6QKZRE0OEEiCF-xF4MIhNBPtoB-B6Jf5tOXzBMU9wZ1LQtxHzuBMLbbthEXG3WWQU3v38Bknpy79HhT-kWvLGeLx2b1VwD9APcrltVGNmqbWLrQVQfVtZsaQ/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/AVvXsEg1uRLpXHg5xJLF6_yjpwTXCZ1QcXNEec87i-1jAr6C8HmyJvR1yNVMimnIDJZOwYTnpP8qyvj3QkiyfgQp4JFqGJGa8e6cOiMKmMlK_BZYaP_Qmr1hFhaA42U4B8eKoc84yrIkN2zSGe4/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/AVvXsEhCGxHxIg5EnXfTVWjomwkHoFN1tL2SCHEICtUxo9Uj6AoGTB9D3K7gM2-oEMEHlC7FJ1wSLsv7NabMLd-6kVc7ETFbXg6Kyk1CQxSKpPMaTpBrGB7Mdmm9e2ziaWqMe57ogOlfFN4GuCE/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/AVvXsEiCyywJ2pGLH1edMokM6W7DAGgJB4X4bBlN1SOg-71CcK4uZ5v7k2Ua2eQoPxvPXrsy-HrEpZxn5frbfB4uLoKfhbOn6Wl4wKbJ02XFGpcSHW33xN3j00x1po1ZuIY2kot9_I301kLI_5s/s1600/img_5.jpg" alt="Sunbathing"/>
            </a>
            <div class="tooltip">
            <h1>Sunbathing</h1>
            </div>
            </li>
            </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>
4. Thay link màu xanh bằng link của bạn và thay hình màu đỏ bằng hình của bạn. Thay text trong thẻ <h1> nữa nhé.
Tags

You may like these posts

Show more

Post a Comment

0Comments
Post a Comment (0)
Share to other apps
Copy Post Link