Cara Mudah Membuat CSS3 Image Slider With Stylized Thumbnails di Blogger
Membuat tampilan blog menjadi lebih menarik tidak selalu harus menggunakan JavaScript yang rumit. Salah satu cara sederhana yang bisa dicoba adalah membuat CSS3 Image Slider With Stylized Thumbnails. Dengan fitur ini, kamu bisa menampilkan beberapa gambar dalam satu area slider, lengkap dengan thumbnail kecil sebagai tombol untuk memilih gambar yang ingin dilihat.
Tampilan seperti ini cocok digunakan untuk berbagai kebutuhan, misalnya menampilkan foto, screenshot aplikasi, koleksi game, gambar produk, atau ilustrasi artikel. Yang menarik, slider ini dapat dibuat menggunakan CSS3 sehingga tampilannya bisa dibuat lebih ringan. Kamu juga bisa mengatur ukuran gambar, bentuk thumbnail, efek ketika gambar dipilih, serta posisi slider sesuai dengan desain blog.
 |
| CSS3 Image Slider With Stylized Thumbnails |
CSS3 Image Slider With Stylized Thumbnails
<div class="slider">
<input type="radio" name="slide_switch" id="id1"/>
<label for="id1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmA6bUbhls3XyXihc-HEWdHVfZf2hlxOLfap0F7X0Ra0J6OEuIgCpGjj2HfxEkkhEk4N1hbFulfrD2Bje50jxCtli1MRHubABRvbYmhIo5tcOzBYuI3hC1Yc-CiMxIxTYpyxysQ2Ttbn8/s100/seocips1.jpg" width="100"/>
</label>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmA6bUbhls3XyXihc-HEWdHVfZf2hlxOLfap0F7X0Ra0J6OEuIgCpGjj2HfxEkkhEk4N1hbFulfrD2Bje50jxCtli1MRHubABRvbYmhIo5tcOzBYuI3hC1Yc-CiMxIxTYpyxysQ2Ttbn8/s1600/seocips1.jpg"/>
<input type="radio" name="slide_switch" id="id2" checked="checked"/>
<label for="id2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ-E_6Es5tXabjsP2rK_-6RiOcPkTwj-zPJ2hSjtzy4Gq4T1CJQ4JmecN2Ffip-FP8RdTCbPMsoRX400zdcpXv4Baw2Pij4atQpF7vJK9KN0JdhD9UmLYhq4q1VPdEeL07RgC3dosKVZA/s100/seocips2.jpg" width="100"/>
</label>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ-E_6Es5tXabjsP2rK_-6RiOcPkTwj-zPJ2hSjtzy4Gq4T1CJQ4JmecN2Ffip-FP8RdTCbPMsoRX400zdcpXv4Baw2Pij4atQpF7vJK9KN0JdhD9UmLYhq4q1VPdEeL07RgC3dosKVZA/s1600/seocips2.jpg"/>
<input type="radio" name="slide_switch" id="id3"/>
<label for="id3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNvTTrizUuVy9aQ1XvmKbMwifgy0w7wph0Fhfrn4NXq_U4vRTxDJ6f3QCSRvvIFJ1VW8r5Y6RsZrH9MApGyL4CuK8xUA9G-xM2ksWymx1aza0APiq0K6iu2JBy8nWru4OsIEvH3f0iXgM/s100/seocips3.jpg" width="100"/>
</label>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNvTTrizUuVy9aQ1XvmKbMwifgy0w7wph0Fhfrn4NXq_U4vRTxDJ6f3QCSRvvIFJ1VW8r5Y6RsZrH9MApGyL4CuK8xUA9G-xM2ksWymx1aza0APiq0K6iu2JBy8nWru4OsIEvH3f0iXgM/s1600/seocips3.jpg"/>
<input type="radio" name="slide_switch" id="id4"/>
<label for="id4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ7iZGexZAmLxyXKJCZOc8Md11arurEry7gDKueDb22jR2vqIL4HO3oBJwnJbLb575vsYl2U792vSJ_eTFRnJ3guvyX5oj1VlTL406ZTllN9tlU0BBxH3SPwuv-bHpFP5j5-i-odH-Jjs/s100/seocips4.jpg" width="100"/>
</label>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ7iZGexZAmLxyXKJCZOc8Md11arurEry7gDKueDb22jR2vqIL4HO3oBJwnJbLb575vsYl2U792vSJ_eTFRnJ3guvyX5oj1VlTL406ZTllN9tlU0BBxH3SPwuv-bHpFP5j5-i-odH-Jjs/s1600/seocips4.jpg"/>
<input type="radio" name="slide_switch" id="id5"/>
<label for="id5">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgye3CUukwhZityYS-7ayjnnwwMdLYmHbb1DBRn3l_jfEv0JjhnC4cUHk3er0aTua0r4PztngbGsHUklUCX8gKUydUMHirw_iywXrvFFsDdEBT_56qDK-skmkJCyKiHMuMjoUF2gn1IebE/s100/seocips5.jpg" width="100"/>
</label>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgye3CUukwhZityYS-7ayjnnwwMdLYmHbb1DBRn3l_jfEv0JjhnC4cUHk3er0aTua0r4PztngbGsHUklUCX8gKUydUMHirw_iywXrvFFsDdEBT_56qDK-skmkJCyKiHMuMjoUF2gn1IebE/s1600/seocips5.jpg"/>
</div>
<script src="https://sites.google.com/site/seocips/seocips-script/prefixfree.js" type="text/javascript"></script>
<style>
body {background: #333;}
.slider{
width: 640px; /*Same as width of the large image*/
position: relative;
/*Instead of height we will use padding*/
padding-top: 320px; /*That helps bring the labels down*/
margin: 10px auto;
/*Lets add a shadow*/
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
/*Last thing remaining is to add transitions*/
.slider>img{
position: absolute;
left: 0; top: 0;
transition: all 0.5s;
}
.slider input[name='slide_switch'] {
display: none;
}
.slider label {
/*Lets add some spacing for the thumbnails*/
margin: 18px 0 0 18px;
border: 3px solid #999;
float: left;
cursor: pointer;
transition: all 0.5s;
/*Default style = low opacity*/
opacity: 0.6;
}
.slider label img{
display: block;
}
/*Time to add the click effects*/
.slider input[name='slide_switch']:checked+label {
border-color: #666;
opacity: 1;
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.slider input[name='slide_switch'] ~ img {
opacity: 0;
transform: scale(1.1);
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.slider input[name='slide_switch']:checked+label+img {
opacity: 1;
transform: scale(1);
}
</style>
Oh ya, lebar gambar harus sesuai dengan lebar slider dimana diatas lebar slider adalah 640 px. Silahkan di ganti gambar-gambarnya dan edit sesuka kamu.
Dengan menggunakan CSS3 Image Slider With Stylized Thumbnails, tampilan blog bisa menjadi lebih menarik. Slider ini juga cukup fleksibel karena dapat digunakan untuk menampilkan berbagai jenis gambar sesuai kebutuhan. Kamu bisa mengubah ukuran, warna, posisi, maupun bentuk thumbnail agar sesuai dengan desain Blogger yang digunakan. Silakan coba dan sesuaikan tampilannya agar lebih cocok dengan tema blog kamu.
