STUDY BLOG

HTML dan Caranya:
Masuk Blog ---> Rancangan ---> Edit HTML ---> Cari Kode ini ]]></b:skin> dengan menggunakan Ctrl+F, setelah ketemu kode diatas lalu copy kode CSS dibawah ini simpan tepat diatas kode ]]></b:skin> lalu save/simpan HTML.

<style type="text/css">
.landonggarut_boksSlider{
background:#333 url(Isi http Poto Anda) 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;
}
.landonggarut_boksSlider:hover{
background:#990000 url(Isi http Poto Anda) 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(Isi http Poto Anda) 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>

Setelah anda menyimpan kode diatas, lalu klik halaman laman, tambahkan laman HTML/Javascript, jika sudah terbuka copy kode dibawah ini dan simpan didalamnya,lalu save / simpan dan lihat hasilnya.

<div align="center">
<div class="landonggarut_boksSlider">

<div id="sliders">
<img id="slider1" src="Masukan http poto anda no 1" />
<img id="slider2" src="Masukan http poto anda No 2" />
<img id="slider3" src="Masukan http poto anda no 3" />
<img id="slider4" src="Masukan http poto anda no 4" />
<img id="slider5" src="Masukan http poto anda no 5" />
<img id="slider6" src="Masukan http poto anda no 6" />
</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:
1. perhatikan kode CSS diatas yang ini:

#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;
}

Perhatikan:
222 adalah lebar Luar/box Slide Foto
222 adalah Panjang Luar/box Slide Foto
200 adalah Lebar Foto
200 adalah Panjang Foto
Boleh kita rubah sesuai yang kita inginkan, masalan dengan kecilnya widget dan alasan lainnya. dengan catatan ukuran luar/box slide harus lebih panjang dari ukuran foto, misal:
- Box slide ukuran Lebar 410 dan Panjang 410 jika ingin persegi.
- Foto ukuran lebar 400 dan panjang 400 jika ingin persegi.
Ukuran pasnya dilebihin 10 px




Bisa juga lihat

DEMONTRASI

Silahkan dicoba, klik tombol nomor 1 sampai dengan 6 dibawah, lihat hasilnya.....











Jika tertarik bisa anda cek caranya disini











Kembali lagi ke

LANDONG GARUT

POSTING TERKAIT: