Gallery Photo Stack
Desain Gallery Photo Efek Tumpukan - Setelah sebelumnya SAHABAT BLOGGER 77 sudah membahas tutorial tentang Cara Membuat Gallery Gambar 3 Dimensi pada artikel sebelumnya, kesempatan kali ini saya akan coba memberikan efek yang berbeda pada gambar postingan Anda dengan efek tumpukan. Jika Anda menyimpan lebih dari 7 sampai 10 buah gambar pada tab gallery photo, sudah pasti disana akan membutuhkan tempat yang luas untuk menampilkan semua photo Anda, sehingga untuk menghemat space saya sudah membuat Desain Gallery Photo Dengan Efek Tumpukan untuk menyimpan semua koleksi photo Anda layaknya dalam sebuah album gambar.

Efek tumpukan (stack effect) pada sebuah gambar photo seperti ini merupakan cara untuk merapikan susunan gambar dengan jumlah yang banyak agar tampil dalam 1 frame gallery, namun semua gambar dapat ditampilkan dengan pointer hover (sentuhan panah mouse) seperti ini:




DEMO SHOW




Seperti Efek Keyframes Show Pada Gambar Hover yang menampilkan semua koleksi photo hanya jika panah mouse Anda berada diatasnya. Untuk desain gallery photo kali ini, saya membuat tumpukan gambarnya dengan efek-skew (gambar miring) seperti ini:


Photo stack



PENERAPAN KE BLOG
Saatnya melakukan percobaan. Untuk menyelesaikan pekerjaan Anda, terlebih dahulu siapkan gambar photo Anda, selanjutnya COPY URL-gambarnya lalu ganti teks yang saya beri warna MERAH dengan URL-Gambar Anda pada HTML berikut:



<ul class="gallery">
<li class="img1"><a href="#"><img alt="" src="URL-Gambar Anda.jpg"></a></li>
<li class="img2"><a href="#"><img alt="" src="URL-Gambar Anda.jpg"></a></li>
<li class="img3"><a href="#"><img alt="" src="URL-Gambar Anda.jpg"></a></li>
</ul>


Pada tampilan DEMO SHOW, disana saya hanya menampilkan 3 buah photo saja sebagai contoh. Selanjutnya Anda tinggal membuat bentuk tampilan gallery photo dengan pengaturan CSS dibawah ini, namun sesuaikan tata letak gambarnya jika Anda ingin menyimpan lebih banyak photo lagi sebagai koleksi seperti ini:


<style type='text/css'>
ul.gallery li a img {float: left;width: 200px;}
ul.gallery:hover li.img1, ul.gallery:hover li.img2, ul.gallery:hover li.img3 {
  -webkit-transform: rotate(0deg) translate(0px, 0px);
  -moz-transform: rotate(0deg) translate(0px, 0px);
  -o-transform: rotate(0deg) translate(0px, 0px);
  transform: rotate(0deg) translate(0px, 0px);}

ul.gallery li {
  border: 2px solid #ddd;
  float: left;list-style: none;
  padding: 0;margin: 0 10px 0 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;}

// Tata letak photo gallery...
ul.gallery li.img1 {
  position: relative;z-index: 50;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  transform: rotate(-3deg);}

ul.gallery li.img2 {
  position: relative;z-index: 40;
  -webkit-transform: rotate(3deg) translate(-210px, 0px);
  -moz-transform: rotate(3deg) translate(-210px, 0px);
  -o-transform: rotate(3deg) translate(-210px, 0px);
  transform: rotate(3deg) translate(-210px, 0px);}

ul.gallery li.img3 {
  position: relative;z-index: 30;
  -webkit-transform: rotate(-8deg) translate(-424px, -55px);
  -moz-transform: rotate(-8deg) translate(-424px, -55px);
  -o-transform: rotate(-8deg) translate(-424px, -55px);
  transform: rotate(-8deg) translate(-424px, -55px);}
</style>


Bagaimana.!! pekerjaan yang cukup mudah bukan...!? hehe...
Sampai disini, semua pekerjaan Anda untuk Mendesain Gallery Photo Dengan Efek Tumpukan sudah selesai, saatnya Devy permisi pamit mau bobo siang dulu. bye...guys..!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Desain Gallery Photo Efek Tumpukan
Ditulis oleh= Devy Indriyani
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 =

63 komentar

  1. iyya ya.. hasilnya unik juga..!

    BalasHapus
    Balasan
    1. masa iyya iyya dong..!,

      kapan2 share desain laman statis ya Vy.. kayak itu..seperti halaman2 demo kalo devy posting.. tidak ada embel side bar.. ato anjing herder

      Hapus
    2. daripada iya iya lah,hehe..!!

      Ok dech mas Al yang baik, apa sih yang gak buat mas Al, hehe..!!
      sebenarnya itu template buatan devy, karena untuk mendukung tampilan blog utama, yang harus dituntut memberikan contoh hasil tampilan, jadinya efek loading blog harus dipikirkan, jadi devy buat template yang hanya mengatur dan merespon kode-kode saja. sidebar, header dan link tidak difungsikan didalamnya.

      sehingga walau banyak mentisipkan kode script, halaman tetap cepat terbuka, Mas Al juga bisa kok membuatnya., dicoba dulu, kalau ada masalah sama-sama kita perbaiki, bagaimana.?

      Hapus
    3. Kalau boleh saya reques tutorial gallery foto yang di next prep secara manual seperti kaya di kapanlagi dot com itu ya Mbak Devy..? saya pengen banget buat gallery foto di blog saya. makasih sebelumnya Mbak Devy yang baik hati (f)

      Hapus
    4. akrab banget nih kedua anak ini...
      keknya cocok deh

      Hapus
    5. ada 2 model fungsi dalam perintahnya mas
      1. dengan icon arrow right dan left
      2. dengan pagination page

      mas saud mau yang seperti apa, biar tutorialnya sesuai seperti yang mas request.

      Hapus
    6. Sekarang saya sama Mas Al dan Mbak Devy mau buat Trio Pacul mas yanto :d

      Hapus
    7. hmmm...Ada yang jeles tuh mas Saud dengan keakraban kita, xixixix...!!

      Hapus
    8. Kalau say boleh pilh nih ya Mbak Dev,,? saya pilh dua dua nya saya suka semua dan seneng semua dan pengen sekali dan ngarep banget sekali.. dan apa lagi ya?
      Pokoknya :
      1. dengan icon arrow right dan left
      2. dengan pagination page
      Saya pengen ngebet banget deh Mbak.. Terima kasih sebelumnya dan kalau belum di terpaksa saya nginep di rumahnya Mbak Devy sampe kapan aja deh. biar bangkrut bangkrut dah Kerja Bakti hheheh :d

      Hapus
    9. padahal mah requestnya cuma 1, gilirin diberikan dalam 2 pilihan, ehhh..mau 22-nya, hehe..

      siap dilaksanakn komandan, InsyaAllah secepatnya akan Devy terbitkan

      Hapus
    10. Betul tuh Mbak orang mana ya? kok saya baru tau roman roman nya orang kulo apa orang Bandung apa orang orang an hheheh *becanda dot com cheer

      Hapus
    11. Mbak Devy sih nawarinya yang cantik dan manis dan imut dan geulis pisan jadinya saya kepencut kesengsem... terpikat, dengan gallery photonya...dan............. 8-)

      Hapus
    12. Devy aslinya Bandung mas, cuma besar di Bekasi, jadi bahasa bandung kurang begitu pasih, dan yang pasti devy jelmaan orang-orangan sawah, hehehe...!!

      Hapus
    13. ini lg pada ngbrolin apa coba ,,,,, =p~

      Hapus
    14. boleh ga nich kalau anak bekasi timur main ketempat mbak devy :p

      Hapus
    15. saya juga mau reques sama mba devi teh, antriannya panjang yah..

      Hapus
    16. panjang amir nih form yg ini

      Hapus
    17. aku tambahin nich kang yanto, biar tambah panjang form nya yaaaaa (c)

      Hapus
  2. BENER BENER UNIK MENARIK HASIL NYA, ya Mbak Devy foto/gambar hasil jadi bertumpuk dan ketika hover gambar jadi terpisah dengan rapi. sangat menajubkan, makasih mBAK Dev?

    BalasHapus
    Balasan
    1. sama-sama mas Saud, oh iya PACULnya sudah dipinjem lagi ya sama mas Al, ntar nagihnya sama dia saja,

      Hapus
    2. sebenrnya pacul siapa sih koq bisa muter2 gitu yg pinjem...
      pasti ada orang kerasukan lagi deh

      Hapus
    3. Ya itulah Mbak saya kan PACULNYA Lagi perlu buat Kerja bakti Mas Al ganggu terus jadi kerja baktinya gak kelar kelar nih mana orang nya ya..pacul saya mana Mas Al....lllll hhhh :d

      Hapus
    4. tau tuh mas Al, bisa pinjem doank, ada GOLOK, dipinjem juga, sekarang PACUL, padahal golok yang kemarin saja belum dipulangin.

      Hapus
    5. mungkin paculnya 'kakek cangkul' kali :p

      Hapus
  3. wuih keren banget nih demonya mbak
    jadi kepengen lagi.susah nih kalau berkunjung dimari bawaannya ingin gonta-ganti.hehehe

    BalasHapus
    Balasan
    1. kataji ya Mas sama gallery yang di buat Mbak Devy ini
      Sama kaya kaya malahan saya kataji semuanya deh Mas Yan :)

      Hapus
    2. dapat bahasa GAUL lagi neh dari mas Saud, kira-kira apa artinya itu ya mas KATAJI, hehe..

      Hapus
    3. kataji itu bahasa sunda, artinya kabita, atw sangat tertarik sekali.. org bdg kumaha atuh hehe..

      Hapus
    4. hehe...jadi maluuu, soalnya belum begitu pasih teh bahasa bandung (sunda), kan devy gedenya di bekasi.

      Hapus
    5. oalah gimana sih mbak devy koq baru tau
      sama dengan saya dong

      Hapus
  4. waaahh ini keren ini, saya harus terapkan di blog saya, berhubung blog saya selalu menggunakan gambar disetiap artikelnya.

    BalasHapus
    Balasan
    1. panggil mas atau mbak, ya..hmmm..panggil mas ajalah,
      ayoo... mas, jangan tunda-tunda lagi, segera diterapkan, hehe..!!

      Hapus
  5. Berarti harus upload dulu yaa mbak?

    BalasHapus
    Balasan
    1. Maksudnya photo nya ya Mas Im..? kaya nya begitu deh Mas :c:

      Hapus
    2. kalau meletakkan gambar secara langsung pada posting emang bisa, kan kudu upload dahulu gambarnya, untuk mengetahui alamat URL-nya.

      Hapus
  6. Bagus sekali mas namun itu efek memberatkan pada blog tidak ya?

    BalasHapus
    Balasan
    1. gambarnya motor, motor balap lagi, pasti sangat berat mas, coba ganti gambarnya dengan gambar kapas, pasti gak berat. hehe..(bercanda mas)

      Hapus
    2. nah aq suka gaya loe mbak.heheh

      Hapus
  7. pekerjaan yan cukup mudah, tapi perlu di pantengin dulu ... hehe

    BalasHapus
  8. siap siap nih buat demontrasi tutorial yang ini, kemarin juga gagal hehe gambarnya ga tampil semua, maaf ya vy ga berhasil sempurna hehe..

    BalasHapus
    Balasan
    1. kan teh santika cuma buat 2 gambar saja untuk ditampilkan, dan sudah devy lihat kok pada tutorialnya,

      Hapus
    2. 4 gambar ko, kalau dicrhome hitam putih kenapa ya.. aku pingin yang gitu lagi keren lho karya devy

      Hapus
    3. efek filter mbak, yang saya panggil menggunakan kode -webkit- untuk chrome, jika ingin sama tampilan pada firefox, tambahkan kode -moz-

      begitupun untuk efek rotate, disana tidak devy lengkapi kode detailnya, kode seperti ini:

      @keyframes rotation{
      from {transform: rotateY(0deg)}
      to {transform: rotateY(360deg)}}

      //tambahkan kode ini untuk semua peramban browser..

      @-webkit-keyframes rotation{
      from {-webkit-transform: rotateY(0deg)}
      to {-webkit-transform: rotateY(360deg)}}

      @-moz-keyframes rotation{
      from {-moz-transform: rotateY(0deg)}
      to {-moz-transform: rotateY(360deg)}}

      @-ms-keyframes rotation{
      from {-ms-transform: rotateY(0deg)}
      to {-ms-transform: rotateY(360deg)}}

      @-o-keyframes rotation{
      from {-o-transform: rotateY(0deg)}
      to {-o-transform: rotateY(360deg)}}


      tujuannya agar efek berputar rotasi infinite (tak terbatas)

      Hapus
  9. langsung cek demonya, wah bisa muncul dari tumpukan, manteb, makasih scriptnya mba

    BalasHapus
  10. tambah mantap aja nih foto nya kalau ditambah efek galeruy ya mbak ;)

    BalasHapus
  11. Wiuiww keren ya, tapi apa gak jadi berat loading pagenya yaa? Hohoooo

    BalasHapus
    Balasan
    1. sedikit saja tambahnya mas
      ingat sedikit kan?

      Hapus
  12. Vy..mau tanya..!

    Membuat Pesan Teks Melayang Saat Halaman Terbuka,
    kalo yg no. 1, saat sy terapkan knapa pesan teksnya muncul di side bar. tidak tepat di tengah halaman postingan.
    kalo yg no.2. pesan teksnya knapa berada di luar dari kotak kecil..maksudnya tidak tersimpan di dalam box teks yg nantinya diklik

    itu knapa ya?,.. ada solusi nda?.

    BalasHapus
    Balasan
    1. position:fixed !important;
      position:absolute;
      top:-1000px;
      left:50%;
      .....}


      mengambil lebar seluruh halaman, termasuk page sidebar, jika ingin tampil tepat ditengah halaman posting. atur nilai pada kode left:...?

      jika lebar halaman posting 500px, maka nilai pesan buat menjadi 400px dengan nilai left:10%, disesuaikan..

      Hapus
    2. makasi Vy..! sukses :-d

      Hapus
    3. terimakasih kembali mas.

      Hapus
  13. ijin coba ya mbak, sebab ini sangat unik untuk konten game yang akan saya buat :D (h)

    BalasHapus
  14. sekali-kali buat tips and trik wordpress dund mbak.

    masa tiap mampir ke tempat mbak devy harus keluar duit mulu buat beli obat sakit kepala akibat kode yang mbak suguhkan :p

    BalasHapus
    Balasan
    1. pengennya sih buat yang mendukung untuk diterapkan pada plat WP, tetapi karena berhubung kang jum kagak pernah tanya, masa mau devy beritahu, terus kebetulan devy pakai blogspot.

      tetapi ide bagus juga tuh kang, tutorial efek tentang WP, hehe,,

      Hapus
    2. kalau begitu saya request dech.
      template blogspot versi theme wordpress.

      Hapus
  15. efek hovernya keren mbak Dev, izin CTRL+D dlu mbak.
    maaf mbak Dev, saya masih kuper yang beginian
    yang diletakkan di postingan yang mana ya?? yg HTML atau yang CSS??

    BalasHapus
    Balasan
    1. kedua-duanya mas, yang CSS dan HTML, karena tidak selamanya CSS itu harus diletakkan pada Template kode.

      Hapus
  16. Mbak devy memang ratu kode-kode nih :D

    BalasHapus
    Balasan
    1. cieee-cieee
      iya kamuuuu
      (efek Dodit Mulyanto-Stand Up Comedy)

      Ada yang langsung berasa terbang nich kayanya :d
      hehe...

      Hapus
  17. keren ne mbak.. penerapannya pun sangat mudah sekali mbak, lain waktu saya pakai lah cara mbak devy nya ini....

    BalasHapus
  18. Wah, foto jadi lebih menarik ya mbak???

    BalasHapus

  • 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