Membuat efek pure css3 slider keren ~ Blog Irvan Efendy

Hayyy,. sobat kali ini saya akan membagikan efek keren pada gambar yaitu Efek Pure Css3 Slider karena slider ini saya buat dari banyak kode CSS3. Setelah saya membaca Disini Walaupun saya cuma mengerti sedikit mengenai Efek Pure Css3 Slider ini.

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 hehehe. Lebih jelas nya silahkan sobat lihat DEMO nya di bawah ini.

1234567

Untuk melihat efeknya silahkan sobat klik tombol Navigasinya, Jika sobat tertarik untuk membuat Efek Pure Css3 Slider ini.

Simak langkah² dibawah ini:

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7JsZu0GXiRQAeZE78O-1p8iO8L5Lq4uO6Eu0e2seDv9LhT4g5uFrwuD6o3lFlJ1bjsAxXRMAIS-krcgpl6gEA6n8Mf0foP6YwrqTzZ2eJwb6H-BU0GlkUuoBQDczvOz3Cg2OfuYR51rUj/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><!--Penutup .nav-->
</div><!--Penutup #slider-vanz-->

Silahkan di coba dan semoga berhasil......
Happy Blogging and Coding,.. :)

16 Comments

Balas Hapus

IRVAN EFENDI 28 May, 2014

bisa kok gan,..
silahkan di coba (y)

Deancooel 28 May, 2014

Bisa di coba dulu gan semoga work di blog saya

Anonymous 28 May, 2014

wah keren kayaknya nih om ane coba dulu ya

thanks dah share

Unknown 28 May, 2014

bagus nih... ijin bookmark dlu

Udhy 28 May, 2014

ini mah keren abizzz gan, harus ane coba nich, makasih gan udah berbagi :)

kalo mau di pasang header gimana caranya bang?

Milah 28 May, 2014

Wis Keren gan.. Ijin nyoba ya..
thank Syahriel

taruh script HTML nya di widget header mu gan,..

monggo di coba gan (y)
semoga sukses ya :D

iya sama" :D
silahkan di coba gan,..

okeyy,.. sama2 gan =D

thankz atas kunjungan nya :e05:

monggo gan,..

oh iya makasih gan

IRVAN EFENDI 29 May, 2014

iya sama" gan :-d
silahkan cek postingan terbaru efek nya makin wusss :) :-bd

Aditya 31 May, 2014

Mantap gan,
ijin coba

💬 Peraturan dalam berkomentar :
➥ Budayakan berkomentar sesudah membaca artikel sob.
➥ Dilarang Menghina, Promosi (Iklan), Menyelipkan Link Aktiv, dsb.
➥ Dilarang berkomentar berbau Porno, Spam, Sara, Politic, dan Profokasi.
➥ Berkomentarlah yang Sopan,Bijak, dan Sesuai Artikel (Dilarang OOT).
➥ Saya sangat berterima kasih atas semua yang mau berkomentar diblog saya.

Konversi Kode Konversi KodeOut Of TopicEmoticon

Terima kasih telah berkomentar

Simak langkah2 dibawah ini:

Simak langkah² dibawah ini: