Cara membuat slide image sederhana

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

Nah untuk cara membuatnya sobat mesti login dulu ke blogger setelah masuk ke dasboard pilih Edit Html cari kode ]]></b:skin> gunakan Ctrl+ F untuk mempermudah pencarian kode , Copas kode CSS di bawah ini lalu taruh tepat di atas kode]]></b:skin> berikut kode nya :

.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>
 <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>

Buat Sobat yang Mau lihat Demonya klik aja Di sini atau Disini
Untuk teks berwarna merah ganti dengan url gambar yang sobat sukai