20.9.14
13
slider image

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:


<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/AVvXsEhTvRXefnARzhGtk_pYtdhosLEc5fhQw810DMLR2Ho1bbsbONT4CI2QkaaxYvyj8NMdBqXnZyOQo18OowXiUbu9gAXvZCAkGE1fboC6ZnU6KBO59gl5ZbO2bM7a4aewt_7oQ9k4d2EvJbY/s1600/img-1.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJCLu8LVSHdbRtxBO5qMxBNBsfQcyg_Y1kz0s1Xnd-IGUWsMSYwYFa1Nam_LuSZiiv0J26O9JCMehsRk0X4Tgv5rBB62nzqUoeqIY-jL_ygNvELq2mJY5Gdb7tI4_tt3l1O8KoOIPCtM0/s1600/img-2.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnwnulroxZZeMjdVLF7XIfolT9AKNwNRCjcK3JmUlZpi47bCJulWN4Pz8NBCV-05wZ0_6MI1cw0GY9_UZtuoQw-vK6p0bX0NX-HDY5x4_5hR8ClxVAg6xfe96wh7h2Wxr5vM8Bed2ewrI/s1600/img-3.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqnhw6i8_R4ZPAGVO68y7qrhDGWK1hh66dUlZvQMGI1yVsrlWtRzJBxB4ctuutpTfHv8WrumRokmeucnZTrW923H833Q536xDXqn6HaiyB5WMGHyG5QCzdiE6QBHaXXcJ4PccfqUvvqQc/s1600/img-4.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJaPGQyrmxObWwh3xeqv3IHp5TuTxIAStdQLerVYbhuNh3hxgGfSGC-RBhJQUB7dozFuk-yvr7q-xPJPIIXo7JntBDhJs9fmkhIax73ps5_0ybY0356E9kjg7Fa7PfpvPQWI_PKjDmBpk/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..!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Galeri Gambar Efek Slider Desain Terbaru
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

13 komentar

  1. Bagus juga ya Mbak Galery effects slider. ya Mbak Devy perlu di coba
    Tapi dalam element html img nya tidak memakai tag alt title apa tidak
    Mengaruhi pada validasi dan seo.? :)

    BalasHapus
    Balasan
    1. optional kang, karena gambar tersebut dalam wilayah kode,

      namun lebih baiknya bisa ditambahkan jika khawatir tidak valid.

      Hapus
  2. Wiih keren nie...kudu dicoba.. :)

    BalasHapus
  3. sip galery gambarnya..sukses.. pinjam potonya lgi..ya..

    BalasHapus
    Balasan
    1. tapi jangan lupa untuk segera di pulangin, hehe..!!

      Hapus
    2. kalau begitu orgnya sj lah..!, b-(

      Hapus
  4. simpel banget mbak codenya... mudah tuk difahami dan di acak-acak juga.. :d

    BalasHapus
  5. Balasan
    1. jika ingin menampilkan untuk postingan, maka letakkan pada formulir postingan mode HTML (bukan yang Compose)

      Hapus
  6. mbk saya coba kok tampilan potho yg besar gk kelihatan z.,.?

    BalasHapus
    Balasan
    1. yakin sudah mengganti URL-Gambarnya dengan benar, soalnya saya sudah periksa semua penggunaan kode, bahkan untuk peramban yang berbeda, widget ini bisa bekerja kok. coba lihat pada URL-Gambar yang mbak sisipkan, barangkali ada yang salah.

      dimana saya bisa melihat percobaan mbak untuk widget ini.?

      Hapus
    2. http://arisan-bunda-kelana.blogspot.com
      maaf z mbk,..saya blm pengalaman tentang blog.

      Hapus
    3. peletakan url gambar yg benar gmn z mbk,..
      saya coba begini
      url(http://2.bp.blogspot.com/-6FY8rtcZPE4/VBxyC4YE_LI/AAAAAAAAA7E/8nhjQFJ-XXg/s1600/img-1.jpg);b

      yg bawah begini:
      pic {background: url(http://2.bp.blogspot.com/-6FY8rtcZPE4/VBxyC4YE_LI/AAAAAAAAA7E/8nhjQFJ-XXg/s1600/img-1.jpg)}

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK