Alhamdulillah akhirnya bisa kembali lagi menyapa anda dengan
tutorial baru
membuat image slider keren dengan thumbnails. Image slider ini tentu sangat bagus sebagai sarana promosi artikel terbaik anda dengan bantuan gambar yang membuatnya tampil aktraktif, elegant dengan efek yang halus bertenaga
CSS3 dan JavaScript, namun tetap dengan fast loading sehingga anda tidak perlu khawatir akan mempengaruhi kecepatan loading blog anda.
untuk membuktikannya anda bisa mengecek live demo pada Halaman Blog DEMO saya
Nah jika anda tertarik untuk
menambahkan image slider keren dengan thumbnails pada blog anda, setelah melihat live demonya atau sekedar ingin tahu cara membuatnya, silahkan ikuti langkah-langkah berikut:
Simak langkah2 dibawah ini:
1. Login ke akun blogger sobat
2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>
.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: 100px 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);
}
/*Clicking on any thumbnail now should activate the image related to it*/
Perhatikan tulisan berwarna biru adalah lebar dan tinggi gambar
Penerapannya:
Supaya kode di atas muncul di posting blog sobat » Silahkan buat Entri baru
gunakan mode HTML kemudian masukan kode berikut ini kedalam halaman posting blog sobat.
<div class="slider">
<input type="radio" name="slide_switch" id="id1"/>
<label for="id1">
<img src="URL gambar" width="100"/>
</label>
<img src="URL gambar"/>
<!--Lets show the second image by default on page load-->
<input type="radio" name="slide_switch" id="id2" checked="checked"/>
<label for="id2">
<img src="URL gambar" width="100"/>
</label>
<img src="URL gambar"/>
<input type="radio" name="slide_switch" id="id3"/>
<label for="id3">
<img src="URL gambar" width="100"/>
</label>
<img src="URL gambar"/>
<input type="radio" name="slide_switch" id="id4"/>
<label for="id4">
<img src="URL gambar" width="100"/>
</label>
<img src="URL gambar"/>
<input type="radio" name="slide_switch" id="id5"/>
<label for="id5">
<img src="URL gambar" width="100"/>
</label>
<img src="URL gambar"/>
</div>
Kustomisasi
Ganti
URL gambar dengan link gambar anda.
- Tambahkan script berikut diatas kode </head>
<script src="https://sites.google.com/site/vanzdy/script/image_slider-thumbnails.js" type="text/javascript"></script>
Sebelum menyimpan anda bisa klik pratinjau dulu jika sudah sesuai dengan yang anda inginkan, silahkan Simpan dan lihat hasilnya diblog anda.
Demikian
tutorial membuat image slider keren dengan thumbnails semoga bermanfaat.
Jika ada pertanyaan silahkan tinggalkan pada kolom komentar dan terimakasih atas kunjungan anda.
Jika bermanfaat? Bantu share ya sobat
Welcome to my blog 😊
