Galeri Gambar Efek Slider Desain Terbaru - Banyak cara dalam membuat tampilan gambar dengan berbagai efek, salah satunya dengan mengubah tampilan galeri gambar dengan efek slider seperti ini:
DEMO SHOW
Galeri merupakan sekumpulan gambar dalam satu wadah yang kesemuanya dapat kita lihat layaknya seperti "ALBUM FOTO". Desain kali ini saya mengambil tema efek slider terbaru dikarenakan pada efek-efek gambar sebelumnya, saya banyak mengubah elemen kodenya dengan penggunaan perintah JavaScript. Sehingga banyak yang khawatir menggunakannya dengan alasan beban loading pada blog akan mempengaruhi, koleksi efek galeri gambar sebelumnya dapat Anda lihat pada TAB di bawah ini:
Jika dengan penggunaan JavaScript yang menjadi alasan sahabat semua, maka rangkaian kode berikut saya akan coba membuat tampilan galeri gambar dengan efek slider hanya dengan CSS. Jadi sudah tidak ada alasan lagi ya untuk khawatir terhadap beban loading blog, hehe..!!
Kodenya seperti ini:
Perhatikan kode yang saya beri warna MERAH - background: url(.../img-1.jpg), belum ada gambar. Anda bisa gunakan URL gambar berikut sebagai bahan percobaan, agar nantinya Anda bisa mengubahnya dengan URL-gambar Anda sendiri.
Saatnya penerapan hasil kerja Anda dengan penempatan HTML seperti ini:
Seseorang akan terlihat senang jika apa yang sebelumnya tidak mereka ketahui, tetapi dapat dengan mudah membuatnya, karenanya tutorial tentang Galeri Gambar Efek Slider Desain Terbaru kali ini, saya persembahkan terspesial buat sahabat semua pecinta SAHABAT BLOGGER 77.
Galeri merupakan sekumpulan gambar dalam satu wadah yang kesemuanya dapat kita lihat layaknya seperti "ALBUM FOTO". Desain kali ini saya mengambil tema efek slider terbaru dikarenakan pada efek-efek gambar sebelumnya, saya banyak mengubah elemen kodenya dengan penggunaan perintah JavaScript. Sehingga banyak yang khawatir menggunakannya dengan alasan beban loading pada blog akan mempengaruhi, koleksi efek galeri gambar sebelumnya dapat Anda lihat pada TAB di bawah ini:
Jika dengan penggunaan JavaScript yang menjadi alasan sahabat semua, maka rangkaian kode berikut saya akan coba membuat tampilan galeri gambar dengan efek slider hanya dengan CSS. Jadi sudah tidak ada alasan lagi ya untuk khawatir terhadap beban loading blog, hehe..!!
Kodenya seperti ini:
<style type="text/css">
/*slider images radio type with css only
input[type='radio'] {input code='no-script'}
design from: devy indriyani
url='http://sahabatblogger77.blogspot.com/'
*/
.slider-img {
background: #A0522D;
height: 355px;
padding: 10px;
position: relative;
margin:-4em auto;
border:2px solid #e06666;
border-radius:8px;
box-shadow: 0 30px 50px -20px black;
overflow: hidden;}
label{
width: 134px;
height: 73px;
cursor: pointer;
position: relative;
margin: 280px 0 0 10px;
float: left;
box-sizing: border-box;}
label:hover{border: solid 3px #ccc;}
#slide1:checked ~ .slide1{border: solid 3px #7FFFD4;}
#slide2:checked ~ .slide2{border: solid 3px #7FFFD4;}
#slide3:checked ~ .slide3{border: solid 3px #7FFFD4;}
#slide4:checked ~ .slide4{border: solid 3px #7FFFD4;}
#slide5:checked ~ .slide5{border: solid 3px #7FFFD4;}
.pic {
background: #ccc;
width: 100%;
height: 73%;
margin:-20px 0 0 -3px;
border:2px inset #ddd;
transition: background .3s linear;
-webkit-transition: background .3s linear;
-moz-transition: background .3s linear;}
input[type='radio'] {opacity: 0;position: absolute;z-index: -9999;}
input[type='radio']:checked {content: '';border: solid 3px #ccc;}
input[type='radio']:hover{border: solid 3px #7FFFD4;z-index: 9999;}
.slide1 {background: url(.../img-1.jpg);background-size: cover;}
.slide2 {background: url(.../img-2.jpg);background-size: cover;}
.slide3 {background: url(.../img-3.jpg);background-size: cover;}
.slide4 {background: url(.../img-3.jpg);background-size: cover;}
.slide5 {background: url(.../img-3.jpg);background-size: cover;}
#slide1:checked ~ .pic {background: url(.../img-1.jpg)}
#slide2:checked ~ .pic {background: url(.../img-2.jpg)}
#slide3:checked ~ .pic {background: url(.../img-3.jpg)}
#slide4:checked ~ .pic {background: url(.../img-3.jpg)}
#slide5:checked ~ .pic {background: url(.../img-3.jpg)}
</style>Perhatikan kode yang saya beri warna MERAH - background: url(.../img-1.jpg), belum ada gambar. Anda bisa gunakan URL gambar berikut sebagai bahan percobaan, agar nantinya Anda bisa mengubahnya dengan URL-gambar Anda sendiri.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdFAPogTHv1LfKEVwY99exMeN6AiNrh0AM4A9ItfGaGUFKMXaZ_Jeh3110Ytym6CmMd_R9W4LwWLXJ_CEkuB0VI_RihxuBV0mJIRObFkYb1neZ55zuCbYXgmyFeBXr7xtbrjwLHAytLFg/s1600/img-1.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRwvjBfUzBA-DjA4npU5LWbLi4qsfEd2RpCBGC7dlG50RA5QMg4Yf5BV1YU9-M4TwULwmwBNEBlPkunNDG6dQP0PelAolOOCeu7kwxNEjGrGEb7ZlpmC6L_vN8kLG9G-MEXBKBzZ8iJvk/s1600/img-2.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNPlB7BFpguM2dBUEf-8Tu-dmPmggEtrkSn9IHr8_Zyn32FEYJxZlItqGxw1CMbm8UEKSGzZJjeo2iY6UXEwTFvt2q69fGgshb8MoG8843RuuygPdcw38iOjPqr3e3yMtlIu0OoAuTe4I/s1600/img-3.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlPo9g-fe7qHK4Ng_aJbdY3Ay8Usw9pfE01iHPvvGvJcvzg3HHlTGlJsiNKkIq9smscCvFa4_xfMgtWvYFFfrj-QucCp4bKt9jhgE_C5_awl6X6j5Otu95sU09QntnduypNjKYJbKCBmE/s1600/img-4.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoUo1CsKDL9zn_d0ZRuZJiGnNZcWSJ7jZzAPO-mr_EXMCJJ8t1tb6uv1fU35hSKvy0Fiv0NycPQ8oRChuX5GaMAwJDRefPG3l-tJZMknkb4BTJKs9KtM7T_0em8bkWdr0WFS2Zsirnez8/s1600/img-5.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRwvjBfUzBA-DjA4npU5LWbLi4qsfEd2RpCBGC7dlG50RA5QMg4Yf5BV1YU9-M4TwULwmwBNEBlPkunNDG6dQP0PelAolOOCeu7kwxNEjGrGEb7ZlpmC6L_vN8kLG9G-MEXBKBzZ8iJvk/s1600/img-2.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNPlB7BFpguM2dBUEf-8Tu-dmPmggEtrkSn9IHr8_Zyn32FEYJxZlItqGxw1CMbm8UEKSGzZJjeo2iY6UXEwTFvt2q69fGgshb8MoG8843RuuygPdcw38iOjPqr3e3yMtlIu0OoAuTe4I/s1600/img-3.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlPo9g-fe7qHK4Ng_aJbdY3Ay8Usw9pfE01iHPvvGvJcvzg3HHlTGlJsiNKkIq9smscCvFa4_xfMgtWvYFFfrj-QucCp4bKt9jhgE_C5_awl6X6j5Otu95sU09QntnduypNjKYJbKCBmE/s1600/img-4.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoUo1CsKDL9zn_d0ZRuZJiGnNZcWSJ7jZzAPO-mr_EXMCJJ8t1tb6uv1fU35hSKvy0Fiv0NycPQ8oRChuX5GaMAwJDRefPG3l-tJZMknkb4BTJKs9KtM7T_0em8bkWdr0WFS2Zsirnez8/s1600/img-5.jpg
Saatnya penerapan hasil kerja Anda dengan penempatan HTML seperti ini:
<div class='slider-img'>
<input checked='' id='slide1' name='thumbnail' type='radio' /><label class='slide1' for="slide1"></label>
<input id='slide2' name='thumbnail' type='radio' /><label for="slide2" class='slide2'></label>
<input id='slide3' name='thumbnail' type='radio' /><label for="slide3" class='slide3'></label>
<input id='slide4' name='thumbnail' type='radio' /><label for="slide4" class='slide4'></label>
<input id='slide5' name='thumbnail' type='radio' /><label for="slide5" class='slide5'></label>
<div class='pic'>
</div>
</div>Seseorang akan terlihat senang jika apa yang sebelumnya tidak mereka ketahui, tetapi dapat dengan mudah membuatnya, karenanya tutorial tentang Galeri Gambar Efek Slider Desain Terbaru kali ini, saya persembahkan terspesial buat sahabat semua pecinta SAHABAT BLOGGER 77.
Semoga bermanfaat. Happy blogging..!!
Demikian artikel tentang Galeri Gambar Efek Slider Desain Terbaru ini dapat kami sampaikan, semoga artikel atau info tentang Galeri Gambar Efek Slider Desain Terbaru ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
