Cara Membuat Slide Gambar Dengan CSS di Blog

Galeri Slide Gambar sangat bermanfaat untuk Photoblogs, terkadang sahabat Blogger membutuhkan gatget seperti ini. Galeri gambar dengan efek slide ini sangat menarik, di bagian atas thumbnail utama, terdapat beberapa gambar kecil yang membesar dari bagian bawah ketika di hover.

Galeri gambar ini di buat tidak menggunakan javascript loh sobat, menariknya hanya menggunakan properti css. Untuk melanjutkan ketahap berikutnya, Anda bisa 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 kode </head> dan tekan Enter untuk menemukan kode tersebut

Langkah 4 :  Setelah ditemukan, kopi kode di bawah ini, lalu pastekan kode di atas kode </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 : absolut dari gambar yang lebih besar ( .large - thumbnail ). Menariknya, jika gambar ukuran kecil di sentuh kursor maka gambar tersebut akan keluar denga ukuran 800px.

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

Langkah 5 : Simpan perubahan pada template dengan mengklik tombol Simpan Template. Samapi disini penerapan kode telah selesai, langkah berikutnya yaitu menambahkan kode 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 baru > pilih HTML / JavaScript ) , atau bisa 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 kode 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 bisa saya sampaikan mengenai tutorial cara membuat Slide gambar dengan CSS, terima kasih sudah berkunjung dan semoga bermanfaat.

Bagikan Artikel ini