Cara Menciptakan Slide Gambar Dengan Css Di Blog
Galeri Slide Gambar sangat bermanfaat untuk Photoblogs, terkadang sahabat Blogger membutuhkan gatget menyerupai 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 :
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>.
Di sini telah ditetapkan ketinggian pada gambar ( 530px ) sehingga gambar yang di sembunyikan dengan ( overflow: hidden ) ; posisi : otoriter 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 bahwasanya 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 adalah 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 .
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 supaya bermanfaat.
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 :
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 : otoriter 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 bahwasanya 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 adalah 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 supaya bermanfaat.