Cara Membuat Box Slide Image

Cara Membuat Box Slide Image (gambar)
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 sobat tinggal menyimpannya kode CSS di atas kode ]]></skin>

Untuk langkah sebagai berikut:


1. "Login".Blogger


2. Setelah masuk di Halaman Dasboard (Dasbord) cari dan KLIK link "Design (Rancangan)".


3. Ketika "Page Elements (Elemen Laman)" sudah terlihat, KLIK Add Gadget (Tambah Gadget)" yang berada dalam garis terputus-putus.


4. KLIK "HTML/Javascript" kemudian tunggu beberapa saat hingga box penambahan widget terlihat.


5. Copy-Paste Kode CSS dan Kode HTML dalam box penambahan widget.
KLIK SAVE (Simpan) dan lanjutkan dengan membuka blog untuk melihat hasilnya.


Copy Paste  Kode CSS dan Kode HTML Di bawah ini:

Kode CSS3

<style type="text/css">

.putramakkah_boxSlider{

       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;

       }

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

<div align="center">

<div class="putramakkah_boxSlider">

<div id="sliders">

   <img id="slider1" src="URL (img) gambar Sobat letakan di sini!! " />

   <img id="slider2" src="URL (img) gambar Sobat letakan di sini!! " />

   <img id="slider3" src="URL (img) gambar Sobat letakan di sini!! " />

   <img id="slider4" src="URL (img) gambar Sobat letakan di sini!!" />

   <img id="slider5" src="URL (img) gambar Sobat letakan di sini!! " />

   <img id="slider6" src="URL (img) gambar Sobat letakan di sini!! " />

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

http://www.negrionta.co.tv

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

Selamat Mencoba...!!
Semoga bermanfaat...