S
iapa bilang kalau kita akan membuat slide image kita banyak membutuhkan script script yang sangat berat ,yang bisa dan pasti akan berpengaruh pada looding blog itu sendiri,memang sich penambahan script pada suatu tutorial blog pastinya akan menimbulkan effec effec yang sangat keren dan maksimal .Nah sebagai Alternatif nich kang mahfid akan membuat sebuah slide show dengan cara yang sangat sederhana akan tetapi yang kita dapatkan hasil yang lumayan maksimal.
Contoh slide image |
.kotak{border:3px solid #222;height:300px;width:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;-webkit-box-shadow: 1px 0px 5px 5px rgba(2, 2, 10, 1);box-shadow: 1px 0px 5px 5px rgba(2, 2, 10, 1); overflow:hidden;}.effec{width: 300px;height: 300px;overflow: hidden;position:absolute;}
.tab-img{width:300px;background:transparent}
Untuk pasang kode slidernya gunakan kode di bawah ini di setiap postingan berikut kode nya .
<center>Buat Sobat yang Mau lihat Demonya klik aja Di sini atau Disini
<div class="kotak">
<div class="effec">
<img id="gambar1"width="300"height="300"align="center"src=" http://lh3.googleusercontent.com/-nhT3WXXAZUE/AAAAAAAAAAI/AAAAAAAAAZ4/l_Oarll2yIc/s512-c/photo.jpg">
<img id="gambar2"width="300"height="300"align="center"src=" http://e-kuta.com/blog/wp-content/uploads/2011/02/kadek.jpg">
<img id="gambar3"width="300"height="300"align="center"src=" http://indonesiaindonesia.com/imagehosting/images/882/1_dian_036.jpg"></div></div>
</center>
<br/>
<center><div class="tab-img">
<a href="#gambar1"><button>gambar 1</button></a>
<a href="#gambar2"><button>gambar 2</button></a>
<a href="#gambar3"><button>gambar 3</button></a>
</center></div>
Untuk teks berwarna merah ganti dengan url gambar yang sobat sukai
0 comments:
Post a Comment