Cara Menciptakan Slide Gambar Dengan Css Di Blog

Galeri Slide Gambar sangat bermanfaat untuk Photoblogs, terkadang sobat Blogger membutuhkan gatget ibarat ini. Galeri gambar dengan efek slide ini sangat menarik, di bab atas thumbnail utama, terdapat beberapa gambar kecil yang membesar dari bab bawah dikala di hover.

Galeri gambar ini di buat tidak memakai javascript loh sobat, menariknya hanya memakai properti css. Untuk melanjutkan ketahap berikutnya, Anda sanggup melihat demonya di bawah ini :

Demo

Cara memasang Slide Gambar Dengan CSS di Blog

Langkah 1 :  Log-in ke akun Blogger > Pilih Template > Lalu klik Edit HTML

Langkah 2 : Tekan tombol Ctrl+F pada keybord untuk membuak kotak pencarian di Blogger,

Langkah 3 : Kemudian copy arahan </head> dan tekan Enter untuk menemukan arahan tersebut

Langkah 4 :  Setelah ditemukan, kopi arahan di bawah ini, kemudian pastekan arahan di atas arahan </head>.

<style type='text/css'>
.image-container {
position: relative;
width: 100%;
height: 530px;
margin: 0 auto;
text-align:center;
overflow: hidden;
}
.image-container a {
display: inline;
text-decoration: none;
}
/* Mini-thumbnails style */
.mini-thumbnail {
width: 18.4%; /* mini-thumbnails width */
margin:1px;
opacity: 1;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
/* Style for the main thumbnail */
.large-thumbnail {
position: absolute;
width: 100%;
top: 800px;
margin:0 auto;
text-align: center;
display: block;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
.feature {
top: 85px;
width: 100%;
opacity: .3;
}
/* style for the selected mini-thumbnail */
a:hover .mini-thumbnail {
opacity: .5;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
/* transition effects for the selected image */
a:hover .large-thumbnail {
top: 85px;
width: 100%;
z-index:3;
opacity: 1;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
</style>

Di sini telah ditetapkan ketinggian pada gambar ( 530px ) sehingga gambar yang di sembunyikan dengan ( overflow: hidden ) ; posisi : diktatorial dari gambar yang lebih besar ( .large - thumbnail ). Menariknya, jikalau gambar ukuran kecil di sentuh kursor maka gambar tersebut akan keluar denga ukuran 800px.

Gambar kecil tersebut bekerjsama dua gambar yang sama, hanya saja di modifikasi untuk membedakan ukurann gambar tesebut dengan memakai properti (a : hover .mini - thumbnail ) pada mouse over.

Langkah 5 : Simpan perubahan pada template dengan mengklik tombol Simpan Template. Samapi disini penerapan arahan telah selesai, langkah berikutnya ialah menambahkan arahan HTML.

Langkah 6 : copy struktur HTML di bawah ini, silahkan Anda terapkan sesuai keinginan. Jika ingin menampilkan Galeri di sidebar, pergi ke Layout atau tata letak >  tambahkan gadget gres > pilih HTML / JavaScript ) , atau sanggup juga di dalam postingan atau halaman dibagian HTML .

<div class="image-container">
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL1" />
<img class="large-thumbnail" src="BESAR-THUMB-URL1" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL2" />
<img class="large-thumbnail" src="BESAR-THUMB-URL2" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL3" />
<img class="large-thumbnail" src="BESAR-THUMB-URL3" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL4" />
<img class="large-thumbnail" src="BESAR-THUMB-URL4" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL5" />
<img class="large-thumbnail" src="BESAR-THUMB-URL5" />
</a>
<a href="javascript:void(0);">
<img class="large-thumbnail feature" src="BESAR-THUMB-URL1" />
</a>
</div>

Pada arahan diatas terdapat link gambar yang dikosongkan, tambahkan link tersebut sesuai keingian. Tambahkan URL pada MINI-THUMB-URL dan  bESAR-THUMB-URL (tambahkan saja URL gambar yang sama) serta tambahkan juga satu URL gambar daeful pada  BESAR-THUMB-URL1.

Nah, itu saja yang sanggup saya sampaikan mengenai tutorial cara menciptakan Slide gambar dengan CSS, terima kasih sudah berkunjung dan agar bermanfaat.



Sumber http://www.websiteedukasi.com/