Membuat Slide image Dengan CSS3

Perkembangan CSS3 sekarang sudah membludak, banyak fans-fans CSS3 yang sedang haus CSS3 baru untuk di pelajari dan banyak juga para webmaster yang sedang mengembangkan CSS3 ini. Walaupun CSS3 belum resmi di umumkan namun perkembangannya sungguh mengagumkan, denger-denger sich CSS3 bakal di resmikan pada tahun 2022. nah sekarang saya punya trik baru lagi nih dari perkembangan CSS3, Namun Trik ini tidak murni CSS3 semua ada campur tangan dari Javascript juga, namun penggunaan javascript disini tidak terlalu banyak dan tidak terlalu memberatkan loading blog sobat, coba sobat lihat screen shoutnya terlebih dahulu dibawah ini.

bagaimana Memasang Slide Image Dengan CSS3?

1. Login ke blogger
   
   
2. masuk ke Rancangan >> Edit HTML
   
   
3. cari kode ]]></b:skin> lalu taruh kode di bawah ini tepat di atasnya
   
   #slide1_controls span {
   padding-right:2em;
   cursor:pointer;
   }
   #slide1_container {
   width:450px;
   height:281px;
   overflow:hidden;
   position:relative;
   }
   #slide1_images {
   position:absolute;
   left:0px;
   width:1800px;
   -webkit-transition:all 1.0s ease-in-out;
   -moz-transition:all 1.0s ease-in-out;
   -o-transition:all 1.0s ease-in-out;
   -transition:all 1.0s ease-in-out;
   }
   #slide1_images img {
   padding:0;
   margin:0;
   float:left;
   }
   
   
4. Lalu kita cari kode </head>; dan taruh kode di bawah ini tepat di atasnya
   
   <script type='text/javascript'>
   $(document).ready(function() {
   $(&quot;#slide1-1&quot;).click(function() {
   $(&quot;#slide1_images&quot;).css(&quot;left&quot;,&quot;0&quot;);
   });
   $(&quot;#slide1-2&quot;).click(function() {
   $(&quot;#slide1_images&quot;).css(&quot;left&quot;,&quot;-450px&quot;);
   });
   $(&quot;#slide1-3&quot;).click(function() {
   $(&quot;#slide1_images&quot;).css(&quot;left&quot;,&quot;-900px&quot;);
   });
   $(&quot;#slide1-4&quot;).click(function() {
   $(&quot;#slide1_images&quot;).css(&quot;left&quot;,&quot;-1350px&quot;);
   });
   });
   </script>
   
   
5. Nah setelah itu bisa di simpan tapi belum bisa melihat hasilnya, sekarang kita masuk ke halaman Elemen Halaman
6. Setelah berada pada elemen halaman sobat harus tambahkan sebuah gadget (Untuk menambahkannya, terserah mau dimana)
   
7. Setelah menambahkan Gadget sekarang sobat pilih yang HTML/Javascript
   
8. Nah setelah menambahkan, berarti terdapat kaya form kosong gytukan? taruh kode di bawah ini ke dalam tempat tersebut
   
   <div id="slide1_container">
   <div id="slide1_images">
   <img src="http://css3.bradshawenterprises.com/images/Cirques.jpg" />
   <img src="http://css3.bradshawenterprises.com/images/Clown%20Fish.jpg" />
   <img src="http://css3.bradshawenterprises.com/images/Stones.jpg" />
   <img src="http://css3.bradshawenterprises.com/images/Summit.jpg" />
   </div>
   </div>
   <p id="slide1_controls">
   <span id="slide1-1">Gambar 1</span>
   <span id="slide1-2">Gambar 2</span>
   <span id="slide1-3">Gambar 3</span>
   <span id="slide1-4">Gambar 4</span>
   </p>
   
   
9. Setelah itu bisa sobat simpan deh dan bisa juga melihat hasilnya

Bagaimana mudah dan cantik bukan Slide image Dengan CSS3? hmm kira-kira apa lagi y yang akan keluar dari CSS3? Sekarang pamit dulu sobat, mudah-mudahan bisa bertemu di lain kesempatan (Amin). Terima kasih dan Happy Blogging.

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg