Attractive Css3 Cycling Slideshow Untuk Blogger

Hari ini blog Oto Website akan berbagi tentang slideshow gambar untuk blogger yang berjudul Attractive Css3 Cycling Slideshow Untuk Blogger, ini adalah slideshow menarik di sertai dengan efek memuat gambar di setiap gambar yang Anda pasang. Dengan menambahkan Attractive Css3 Cycling Slideshow Untuk Blogger ini Anda akan mengubah link Anda sebagai link gambar! Satu hal yang perlu Anda ingat adalah ukuran dari gambar harus Anda rubah beberapa pixel untuk menyesuaikannya.
Sekarang mari kita lihat Demo dan bagaimana cara membuat Attractive Css3 Cycling Slideshow Untuk Blogger Anda.

ScreenShot

Lihat Demo

Lihat Demo

Cara Membuat

---

The CSS

---

/* fade slider www.otowebsite.blogspot.com*/
.content h1 {
 font-size:48px;
 color:#000;
 text-shadow:0px 1px 1px #f4f4f4;
 text-align:center;
 padding:60px 0 30px;
}

/* LAYOUT */
.otowebsite {
 margin:0 auto;
 overflow:hidden;
 width:960px;
}

/* CONTENT SLIDER */
#content-slider {
 width:100%;
 height:360px;
 margin:10px auto 0;
}
/* SLIDER */
#slider {
 background:#000;
 border:5px solid #eaeaea;
 box-shadow:1px 1px 5px rgba(0,0,0,0.7);
 height:320px;
 width:680px;
 margin:40px auto 0;
 overflow:visible;
 position:relative;
}
#mask {
 overflow:hidden;
 height:320px;
}
#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;
}
#slider:hover li,
#slider:hover .progress-bar {
 -moz-animation-play-state:paused;
 -webkit-animation-play-state:paused;
}

/* 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; }
}

---

HTML/JavaScript

---

<div class="otowebsite">
 <div id="content-slider">
     <div id="slider">
         <div id="mask">
            <ul>
            <li id="first" class="firstanimation">
            <a href="#">
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZWvcLEMuyBp92jJchMXz1-zj6dyEeyeS29ZfrnOzaVHlYI91gcKwkzOYw7Gkyb0cd_KlehLH8oJJAeV4gvHyh4btO90JHhQdNPX-ty8qrnLVAJROdtF64BdMQ5mj4smP571Wq_i7SYQ/s1600/OW-Kepulauan+Raja+Ampat,+Papua+Barat.jpg" alt="Raja Ampat"/>
            </a>
            <div class="tooltip">
            <h1>Raja Ampat</h1>
            </div>
            </li>

            <li id="second" class="secondanimation">
            <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUnDsCCz31zfTium-nFr3lhXE-kj9jG3VkK8-ko4i2crUxhDSXdqW-ALMh4tL_jsjjtHSCHxDCuysPpJvhCdQVCDhcJptLEs0GfBGnePU7Gb8tzqqfVWb1tBt9kTgNgUsF5lFeKLyzxw/s1600/OW-Gunung+Rinjani,+Lombok.jpg" alt="Gunung Rinjani"/>
            </a>
            <div class="tooltip">
            <h1>Gunung Rinjani</h1>
            </div>
            </li>
          
            <li id="third" class="thirdanimation">
            <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0y4MktfUccg4zkFv_zQ1qwyEdCMz-ss8x7ClzpndgZvS0BMRIBXNHMY6hK0JzjgHveQCj4ujJ4LaQ3X76uqQ15k1_Np-DaTOureoMuSZzWttriZm0UejMahTqC6-D5kIvl3cnl7zm8g/s1600/OW-Ngarai+Sianok+dan+Lembah+Harau,+Sumatera+Barat.jpg" alt="Ngarai Sianok & L.Harau"/>
            </a>
            <div class="tooltip">
            <h1>Ngarai Sianok & L.Harau</h1>
            </div>
            </li>
                      
            <li id="fourth" class="fourthanimation">
            <a href="#">
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhStTcCBhRe6LhlvKW5OLEkQLDPEq5RlpwVnHKRXWgiPdb_fmBH21jGXiF0OfWe4edmVdkYDHAbV_O6g_dt5OtOyVGjTFsPyYIjDgFrVLjXw2HK4ERgCVglp5FT19EbXmYbjefPlpj7w/s1600/OW-Taman+Nasional+Baluran,+Jawa+Timur.jpg" alt="Taman Nasional Baluran"/>
            </a>
            <div class="tooltip">
            <h1>Taman Nasional Baluran</h1>
            </div>
            </li>
                      
            <li id="fifth" class="fifthanimation">
            <a href="#">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeMGYg2Ys8o8UnnXRfq0FwOnjtisgbrcLhcpBickxPcyXMDGMsv-hpyTCPU1b2cHxMoXqEOoqHj0HjyLJcq2hyphenhyphen3pQhXIk9MaXU3h8T8GmdevxZe-A__CwsXb59RupoZW30M5BT0HLMZg/s1600/OW-Danau+Toba,+Sumatera+Utara.jpg" alt="Danau Toba"/>
            </a>
            <div class="tooltip">
            <h1>Danau Toba</h1>
            </div>
            </li>
            </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>
</div>