Image slider tidak harus menggunakan javascript. Dengan CSS3 sebuah image slider dengan transisi gambar yang menarik melalui durasi waktu dan effek blur (opacity effects) bisa diciptakan. CSS3 Image Slider akan bekerja secara sempurna di Opera atau di safari. Meskipun demikian, sekalipun tidak seoptimal di browser tersebut, slider dapat menampilkan beberapa efek CSS3 di Mozilla. Untuk membuatnya teramat gampang karena seluruh kode CSS dan kode HTML bisa disimpan melalui penambahan widget. Apabila akan disimpan di template sampeyan tinggal menyimpannya kode CSS di atas kode ]]></skin>
Cara Membuat CSS3 Image Slider
- Login to BloGGeR (Login ke BloGGeR) dengan menuliskan User Name (Nama Pengguna) atau Email Address kemudian tuliskan juga Password (Sandi). Setelah semua data tertulis dengan benar, silajhkan KLIK "Login".
- Setelah masuk di Halaman Dasboard (Dasbord) cari dan KLIK link "Design (Rancangan)".
- Ketika "Page Elements (Elemen Laman)" sudah terlihat, KLIK Add Gadget (Tambah Gadget)" yang berada dalam garis terputus-putus.
- KLIK "HTML/Javascript" kemudian tunggu beberapa saat hingga box penambahan widget terlihat.
- Copy-Paste Kode CSS dan Kode HTML dalam box penambahan widget.
- KLIK SAVE (Simpan) dan lanjutkan dengan membuka blog untuk melihat hasilnya.
Kode CSS "CSS3 Image Slider"
<style type="text/css">
.bgsGR_boksSlider{
background:#333 url(http://www.phpzone.net/wp-content/themes/mystique/images/bg.png) bottom left repeat-x;
padding:6px;
border:2px solid #555;
float:left;
border-radius:13px;
-moz-border-radius:13px;
-webkit-border-radius:13px;
box-shadow:4px 6px 4px #888;
-moz-box-shadow:4px 6px 4px #888;
-webkit-box-shadow:4px 6px 4px #888;
}
.bgsGR_boksSlider:hover{
background:#990000 url(http://www.phpzone.net/wp-content/themes/mystique/images/bg.png) bottom left repeat-x;
box-shadow:4px 6px 4px #555;
-moz-box-shadow:4px 6px 4px #555;
-webkit-box-shadow:4px 6px 4px #555;
}
#sliders {
width: 222px;
height: 222px;
overflow: hidden;
position: relative;
margin:0 0 10px 0;
}
#sliders img {
border:8px solid white;
padding:3px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: -222px;
z-index: 1;
opacity: 0;
transition: 1.5s;
-o-transition: 1.5s;
-moz-transition-duration: 1.5s;
-webkit-transition-duration: 1.5s;
}
#sliders img:target {
left: 0;
z-index: 9;
opacity: 1;
}
#sliders img:first-child {
left: 0;
opacity: 1.0;
}
#tap{
background:#FFFFFF url(http://i26.tinypic.com/vy6yox/bgsGR/bgSlider.jpg) top center repeat-x;
border:1px solid #777;
margin:-3px 0px 4px;
padding:5px 0px;
opacity: 1.0;
-moz-opacity:1.0;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#tap a {
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
opacity: 0.7;
-moz-opacity:0.7;
filter:alpha(opacity=70);
text-decoration: none;
background:#ddd;
border: 2px solid #666633;
padding: 0px 10px;
color: #222;
}
#tap a:hover {
background: #00CC33;
opacity: 1.0;
}
</style>
Kode HTML "CSS3 Image Slider"
<div align="center">
<div class="bgsGR_boksSlider">
<div id="sliders">
<img id="slider1" src="http://img.theomegaproject.org/thumbs/2009/06/114.jpg" />
<img id="slider2" src="http://img.theomegaproject.org/thumbs/2009/06/111.jpg" />
<img id="slider3" src="http://img.theomegaproject.org/thumbs/2009/06/130.jpg" />
<img id="slider4" src="http://img.theomegaproject.org/thumbs/2009/02/227.jpg" />
<img id="slider5" src="http://img.theomegaproject.org/thumbs/2009/03/53.jpg" />
<img id="slider6" src="http://img.theomegaproject.org/thumbs/2009/02/167.jpg" />
</div>
<div id="tap">
<a href="#slider1">1</a>
<a href="#slider2">2</a>
<a href="#slider3">3</a>
<a href="#slider4">4</a>
<a href="#slider5">5</a>
<a href="#slider6">6</a>
</div>
</div>
</div>
Catatan/Keterangan :
- Untuk merubah tinggi slider, ganti ukuran width dan/atau height pada :
#sliders {
width: 222px; ====> Lebar Slider
height: 222px; ===> Tinggi Slider
dan
#sliders img {
border:8px solid white;
padding:3px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
width: 200px; ========> Lebar Gambar/Image
height: 200px; ========> Tinggi Gambar/Image
position: absolute;
top: 0;
left: -222px; ========> Samakan dengan Lebar Gambar + 22px (penambahan width pada box).- - Selisih antara width pada #sliders dan #sliders img = 22px
- Selisih antara height pada #sliders dan #sliders img = 22px - Sebenarnya slider ini bisa berfungsi di IE, tapi sayangnya ketika di uji coba ditemplate blogspot fungsi slider menjadi tidak bekerja. Saat ini masih kucoba untuk mencari apa yang menjadi sebab kegagalan fungsi css3 slider di template ini.
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
� Happy Blogging - gubhugreyot �
