19 January 2014

simple css3 slider

simple css3 slider
     yosh kali ini moonroemoort akan share simple css3 slider untuk demonya bisa di lihat disini
    • masuk dashboard
    • klik edit html
    • cari kode ]]></b:skin>
    • paste kan kode di bawah ini tepat di atas kode ]]></b:skin>

    #slider {
     padding: 0;
     width:100%;
     height:400px;
     margin:0 auto;
     background:#000;
     position:relative;
     border:3px solid #000;
     overflow:hidden;
    }
    #slider .gallery {
     padding:0;
     margin:0 auto;
    }
    #slider .gallery input {
     display:none;
    }
    #slider .gallery li {
     list-style-type:none;
     margin:0;
     padding:0;
    }
    #slider .gallery img {
     width:100%;
     height:100%;
     position:absolute;
     -moz-transition:all 900ms linear;
     -o-transition:all 900ms linear;
     -webkit-transition:all 900ms linear;
     transition:all 900ms linear;
     opacity:0;
     visibility:hidden;
    }
    #slider input:checked ~ img,
    #slider input:checked ~ img#motion-left,
    #slider input:checked ~ img#move-down,
    #slider input:checked ~ img#move-over,
    #slider input:checked ~ img#run-around,
    #slider input:checked ~ img#move-right,
    #slider input:checked ~ img#italic {
     -moz-transform:rotate(0deg) scale(1);
     -ms-transform:rotate(0deg) scale(1);
     -o-transform:rotate(0deg) scale(1);
     -webkit-transform:rotate(0deg) scale(1);
     transform:rotate(0deg) scale(1);
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     filter:alpha(opacity=100);
     opacity:1;
     top:0 !important;
     left:0;
     right:0;
     visibility:visible;
    }
    #slider .nav {
     padding:2px;
     background:rgba(0,0,0,0.5);
     color:#09f;
     text-decoration:none;
     margin:0;
     position:absolute;
     top:0;
     left:0;
     right:0;
     text-align:center;
    }
    #slider label {
     padding:1px 10px;
     background:rgba(252, 252, 252, 0.31);
     color:#FFF;
     font:bold 12px/20px Arial,sans-serif;
     text-decoration:none;
     margin:1px 4px 1px 0;
     display:inline-block;
     cursor:pointer;
     position:relative;
     -webkit-transition: .3s;
     -moz-transition: .3s;
     -ms-transition: .3s;
     -o-transition: .3s;
     transition: .3s;
    }
    #slider label:hover {
     background: #000;
    }
    #slider .gallery li .description {
     position:absolute;
     padding:5px;
     background:rgba(10, 10, 10, 0.59);
     color:#fff;
     left:0;
     right:0;
     bottom:-1000px;
     font:bold 14px/20px Arial,sans-serif;
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     filter:alpha(opacity=0);
     opacity:0;
     -moz-transition:all 1s ease-in-out;
     -o-transition:all 1s ease-in-out;
     -webkit-transition:all 1s ease-in-out;
     transition:all 1s ease-in-out;
    }
    #slider input:checked ~ .description {
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     filter:alpha(opacity=100);
     opacity:1;
     bottom:0;
     -moz-transition-delay:0.5s;
     -o-transition-delay:0.5s;
     -webkit-transition-delay:0.5s;
     transition-delay:0.5s;
    }
    #slider .gallery li .description a,
    #slider .gallery li .description a:visited {
     color:#ff0;
     text-decoration:none;
    }
    #slider .gallery img#motion-left,
    #slider .gallery img#move-right,
    #slider .gallery img#move-down,
    #slider .gallery img#move-over,
    #slider .gallery img#run-around,
    #slider .gallery img#italic {
     -moz-transition-delay:0.5s;
     -o-transition-delay:0.5s;
     -webkit-transition-delay:0.5s;
     transition-delay:0.5s;
    }
    #slider .gallery img#motion-left {
     left:-100%;
    }
    #slider .gallery img#move-right {
     left:100%;
    }
    #slider .gallery img#move-down {
     top:100%
    }
    #slider .gallery img#move-over {
     top:-100%
    }
    #slider .gallery img#run-around {
     -moz-transform:rotate(1230deg) scale(0);
     -ms-transform:rotate(1230deg) scale(0);
     -o-transform:rotate(1230deg) scale(0);
     -webkit-transform:rotate(1230deg) scale(0);
     transform:rotate(1230deg) scale(0);
    }
    #slider .gallery img#italic {
     opacity:0;
     -moz-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
     -ms-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
     -o-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
     -webkit-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
     transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
    }
    •  lalu klik tata letak > tambah gadget
    • tambahkan kode dibawah ini

    <div id="slider">
    <div class="gallery">
    <li><input checked="true" id="a" name="system" type="radio" />
    <img id="motion-left" src="IMAGE URL" />
    <div class="description">DESCRIPTION TEXT</div>
    </li>
    <li><input id="b" name="system" type="radio" />
    <img id="move-right" src="IMAGE URL" />
    <div class="description">DESCRIPTION TEXT</div>
    </li>
    <li><input id="c" name="system" type="radio" />
    <img id="move-over" src="IMAGE URL" />
    <div class="description">DESCRIPTION TEXT</div>
    </li>
    <li><input id="d" name="system" type="radio" />
    <img id="move-down" src="IMAGE URL" />
    <div class="description">DESCRIPTION TEXT</div>
    </li>
    <li><input id="e" name="system" type="radio" />
    <img id="run-around" src="IMAGE URL" />
    <div class='description'>DESCRIPTION TEXT</div>
    </li>
    <li><input id="f" name="system" type="radio" />
    <img id="italic" src="IMAGE URL" />
    <div class='description'>DESCRIPTION TEXT</div>
    </li>
    <li><input id="g" name="system" type="radio" />
    <img id="run-around" src="IMAGE URL" />
    <div class='description'>DESCRIPTION TEXT</div>
    </li>
    <li><input id="h" name="system" type="radio" />
    <img id="move-right" src="IMAGE URL" />
    <div class="description">DESCRIPTION TEXT</div>
    </li>
    <li><input id="i" name="system" type="radio" />
    <img id="move-over" src="IMAGE URL" />
    <div class="description">DESCRIPTION TEXT</div>
    </li>
    <li><input id="j" name="system" type="radio" />
    <img src="IMAGE URL" />
    <div class='description'>DESCRIPTION TEXT</div>
    </li>
    </div><!--End up .gallery-->
    <div class='nav'>
    <label for='a'>1</label>
    <label for='b'>2</label>
    <label for='c'>3</label>
    <label for='d'>4</label>
    <label for='e'>5</label>
    <label for='f'>6</label>
    <label for='g'>7</label>
    <label for='h'>8</label>
    <label for='i'>9</label>
    <label for='j'>10</label>
    </div><!--End up .nav-->
    </div><!--End up #slider-->
    • klik simpan
     KETERANGAN
    • ganti image url dengan link gambar agan
    • ganti description teks dengan deskripsi gambar
     

      berkomentarlah sesuka anda
      ===>no link aktiv<===
      NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar