Blogger CSS3 Resim Slayt Eklentisi ( Tek kodla)

DEMO
İNDİR

"Blogger bloğunuza CSS3 görüntü slayt" eklemek için aşağıdaki adımları takip edin.

1. Bloggere git Yerleşim'e tıkla
2. Bir ekleme HTML / Javascript Gadget açın
3. Aşağıdaki kodu kopyalayın ve yapıştırın.

<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.nettehizmetvar.com/">
            <img src="http://project.dimpost.com/image-slider/images/img_1.jpg" alt="Panter"/>
            </a>
            <div class="tooltip">
            <h1>Cougar</h1>
            </div>
            </li>

            <li id="second" class="secondanimation">
            <a href="#">
            <img src="http://project.dimpost.com/image-slider/images/img_2.jpg" alt="Aslan"/>
            </a>
            <div class="tooltip">
            <h1>Lions</h1>
            </div>
            </li>
            
            <li id="third" class="thirdanimation">
            <a href="#">
            <img src="http://project.dimpost.com/image-slider/images/img_3.jpg" alt="Snowalker"/>
            </a>
            <div class="tooltip">
            <h1>Snowalker</h1>
            </div>
            </li>
                        
            <li id="fourth" class="fourthanimation">
            <a href="#">
            <img src="http://project.dimpost.com/image-slider/images/img_4.jpg" alt="Howling"/>
            </a>
            <div class="tooltip">
            <h1>Howling</h1>
            </div>
            </li>
                        
            <li id="fifth" class="fifthanimation">
            <a href="#">
            <img src="http://project.dimpost.com/image-slider/images/img_5.jpg" alt="Sunbathing"/>
            </a>
            <div class="tooltip">
            <h1>Sunbathing</h1>
            </div>
            </li>
            </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>
</div>

Düzenlemeniz Gerek Kısımlar;

<div id="mask"> <ul> <li id="first" class="firstanimation"> <a href="http://www.nettehizmetvar.com/"> <img src="http://project.dimpost.com/image-slider/images/img_1.jpg" alt="Cougar"/> </a> <div class="tooltip"> <h1>Cougar</h1> </div> </li> <li id="second" class="secondanimation"><a href="http://www.nettehizmetvar.com/"> <img src="http://project.dimpost.com/image-slider/images/img_2.jpg" alt="Lions"/> </a> <div class="tooltip"> <h1>Lions</h1> </div> </li> <li id="third" class="thirdanimation"> <a href="http://www.nettehizmetvar.com/"> <img src="http://project.dimpost.com/image-slider/images/img_3.jpg" alt="Snowalker"/> </a><div class="tooltip"> <h1>Snowalker</h1> </div> </li> <li id="fourth" class="fourthanimation"> <a href="http://www.nettehizmetvar.com/"> <img src="http://project.dimpost.com/image-slider/images/img_4.jpg" alt="Howling"/> </a> <div class="tooltip"> <h1>Howling</h1> </div> </li> <li id="fifth" class="fifthanimation"> <a href="http://www.nettehizmetvar.com/"> <img src="http://project.dimpost.com/image-slider/images/img_5.jpg" alt="Sunbathing"/> </a><div class="tooltip"> <h1>Sunbathing</h1> </div> </li> </ul> </div>