Ok sobat seocips.com kembali lagi pada kesempatan ini seocips akan membagikan lagi Pure CSS3 Manual Slider untuk Blogspot dan bagusnya slider ini tidak menggunakan java script seperti sebelumnya. Sebelumnya juga kami telah membagikan manual slider yang tidak kalah kerennya yaitu simple manual slider.

Mengapa ini manual slider? yah tentu saja karena slide gambarnya tidak berjalan secara otomatis seperti slider-slider otomatis yang telah dibagikan sebelumnya. Slider ini harus di klik / diperintah untuk menampilkan gambar slider dan deskripsi selanjutnya. Jika anda tertarik dengan slider otomatis silahkan lihat di label " Slider" di blog ini.

LIVE DEMO Pure CSS3 Manual Slider

Silahkan lihat DEMO nya di bawah ini, Silahkan tekan tombol angka / nomor navigasinya untuk menampilkan efek slidernya.

  • Disini deskripsi gambar atau Link www.seocips.com
  • Disini deskripsi gambar 2 www.seocips.com
  • Disini deskripsi gambar 3
  • Disini deskripsi gambar 4
  • Slider Efek muter www.seocips.com
  • Slider Efek gerak-kanan
  • Slider Efek miring


  • Membuat Pure CSS3 Manual Slider


    1. Login ke akun blogger sobat
    2. Klik Template » Edit HTML
    3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>
    4. Lalu tambahkan kode CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>
    #slider-vanz { padding:0; width:550px; height:300px; margin:0 auto; background:#98d url(http://3.bp.blogspot.com/-wvyTXZxiy7w/U4Uie__CUfI/AAAAAAAABps/ON7dmkEhbiM/s1600/BIE_Beckheader.jpg)no-repeat center; position:relative; border:4px solid #C03E16; overflow:hidden; }
    #slider-vanz .gambar { padding:0; margin:0 auto; }
    #slider-vanz .gambar input { display:none; }
    #slider-vanz .gambar li { list-style-type:none; margin:0; padding:0; }
    #slider-vanz .gambar 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-vanz input:checked ~ img,#slider-vanz input:checked ~ img#gerak-kiri,#slider-vanz input:checked ~ img#gerak-bawah,#slider-vanz input:checked ~ img#gerak-atas,#slider-vanz input:checked ~ img#muter,#slider-vanz input:checked ~ img#gerak-kanan,#slider-vanz input:checked ~ img#miring { -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-vanz .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; }
    #slider-vanz label { padding:1px 10px; background:#BC2315; color:#FFF; font:bold 12px/20px Arial,sans-serif; text-decoration:none; margin:1px 4px 1px 0; display:inline-block; cursor:pointer; position:relative; }
    #slider-vanz .gambar li .deskripsi { position:absolute; padding:5px; background:rgba(0,0,0,0.8); color:#FA381E; left:0; right:0; bottom:-1000px; font:normal 13px/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-vanz input:checked ~ .deskripsi { -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-vanz .gambar li .deskripsi a,#slider-vanz .gambar li .deskripsi a:visited { color:#fff; text-decoration:none; }
    #slider-vanz .gambar img#gerak-kiri,#slider-vanz .gambar img#gerak-kanan,#slider-vanz .gambar img#gerak-bawah,#slider-vanz .gambar img#gerak-atas,#slider-vanz .gambar img#muter,#slider-vanz .gambar img#miring { -moz-transition-delay:0.5s; -o-transition-delay:0.5s; -webkit-transition-delay:0.5s; transition-delay:0.5s; }
    #slider-vanz .gambar img#gerak-kiri { left:-100%; }
    #slider-vanz .gambar img#gerak-kanan { left:100%; }
    #slider-vanz .gambar img#gerak-bawah { top:100%; }
    #slider-vanz .gambar img#gerak-atas { top:-100%; }
    #slider-vanz .gambar img#muter { -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-vanz .gambar img#miring { 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); }
    5. Masukan kode HTML di bawah ini didalam gadget HTML/Javascript atau bisa juga di taruh dalam postingan blog sobat
    <div id="slider-vanz">
    <div class="gambar">
    <li><input checked="true" id="a" name="system" type="radio" />
    <img
    id="gerak-kiri" src="URL gambar1.jpg" />
    <div class="deskripsi">Disini deskripsi gambar 1</div>
    </li>
    <li><input id="b" name="system" type="radio" />
    <img
    id="gerak-kanan" src="URL gambar1.jpg" />
    <div class="deskripsi">Disini deskripsi gambar 2</div>
    </li>
    <li><input id="c" name="system" type="radio" />
    <img
    id="gerak-atas" src="URL gambar1.jpg" />
    <div class="deskripsi">Disini deskripsi gambar 3</div>
    </li>
    <li><input id="d" name="system" type="radio" />
    <img
    id="gerak-bawah" src="URL gambar1.jpg" />
    <div class="deskripsi">Disini deskripsi gambar 4</div>
    </li>
    <li><input id="e" name="system" type="radio" />
    <img
    id="muter" src="URL gambar1.jpg" />
    <div class='deskripsi'>Disini deskripsi gambar 5</div>
    </li>
    <li><input id="f" name="system" type="radio" />
    <img
    id="miring" src="URL gambar1.jpg" />
    <div class='deskripsi'>Disini deskripsi gambar 6</div>
    </li>
    <li><input id="g" name="system" type="radio" />
    <img src="URL gambar1.jpg" />
    <div class='deskripsi'>Disini deskripsi gambar 7</div>
    </li>
    </div><!--Penutup .gambar-->
    <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>
    </div>
    </div>
    Selesai.
    Catatan : sebelum anda melakukan tutorial di atas sebaiknya anda membackup template anda terlebih dahulu, misalnya menyimpannya di notepad agar dapat mengembalikan seperti semula jika terjadi kesalahan.

    Efek Pure Css3 Slider ini akan sempurna anda lihat jika browser anda mendukung efek transition jika browser anda tidak mendukung efek transition maka slider ini tidak akan terlihat sempurna, karena perpindahan gambarnya menggunakan efek transition. tapi slider ini tetep bekerja di browser yang tidak support transition cuman efeknya saja yang tidak muncul.

    Bagaimana, keren bukan? ok sobat sekian yang dapat kami bagikan untuk saat ini dan semoga bermanfaat.
    2 Komentar untuk "Cara Membuat Pure CSS3 Manual Slider di Blog"

    terimakasih atas post yang telah anda share.. kalau boleh tanya, kenapa ketika saya aplikasikan sesuai dengan prosedur diatas. ketika saya preview, yang keluar malah tidak seperti yang diharapkan. tidak adanya muncul gambar diatas melainkan hanya kotak yang membuat rusak tampilan design. mohon penjelasannya..

    Mungkin gambarnya belum sobat masukan, pada langkah ke 5 tulisan url gambar itu di isi dengan url/link gambar milik sobat, dan deskripsinya juga diganti sesuai deskripsi gambar. Dan ukuran gambar harus sama dengan ukuran yang ada di dalam kode #slider-vanz yaitu width:550px; dan height:300px.