106 Cara Membuat Gallery Photo Keren Di Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Gallery Photo Dalam tutorial kali ini saya ingin mengetengahkan cara membuat gallery photo keren diblog dengan menggunakan CSS3 dan tanpa JavaScript. Ya, anda tidak salah membaca, benar tanpa javaScript. Kalau pada tutorial sebelumnya membuat image slidermenggunakan javascript maka kali ini tidak ada penggunaan script sama sekali, murni hanya dengan properti CSS3 seperti, user-select, box-sizing, transition, box-shadow dan transform.
Pada gallery photo ini anda bisa mengklik image/photo untuk mendapatkan efek zooming dan anda bisa menggunakan tombol tab pada keyboard untuk melihat photo selanjutnya. Penasaran? Silahkan ke blog tempat eksperiment saya, untuk mendapatkan ide yang jelas dari gallery photo yang mengagumkan ini.

Tekan Tombol “View Demo”


View Demo
 
Bagaimana? Tertarik untuk membuat gallery photo keren diblog anda? Silahkan ikuti langkah-langkah berikut ini:

Cara Menambahkan Widget Ini KeBlog

Gallery Photo Pure CSS3
  • Login ke akun blogger anda
  • Pada dasbor pilih Template >> Edit HTML >> Proceed
  • Klik Ctrl+F cari kode ]]></b:skin
  • Tambahkan kode CSS berikut diatas kode ]]></b:skin>
/* Photo Gallery styles */   
.gallery {      
margin: 100px auto 0;    
width: 800px;    
}      
.gallery a {
display: inline-block;
height: 135px;
position: relative;
width: 180px;
/* CSS3 Prevent selections */
-moz-user-select: none;
 -webkit-user-select: none;
-khtml-user-select: none;
user-select: none; 
} 
.gallery a img { 
border: 8px solid #fff;
border-bottom: 20px solid #fff; 
cursor: pointer;
display: block; 
left: 0px;
 position: absolute;
top: 0px;
width: 100%;
z-index: 1;
/* CSS3 Box sizing property */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
box-sizing: border-box;
/* CSS3 transition rules */ 
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease; 
 -o-transition: all 1.0s ease;
transition: all 1.0s ease;
/* CSS3 Box Shadow */ 
-moz-box-shadow: 2px 2px 4px #444;
 -webkit-box-shadow: 2px 2px 4px #444;
-o-box-shadow: 2px 2px 4px #444;
box-shadow: 2px 2px 4px #444;
}       
/* Custom CSS3 rotate transformation */ .gallery a:nth-child(1) img { -moz-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } .gallery a:nth-child(2) img { -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); transform: rotate(-20deg); }
.gallery a:nth-child(3) img { -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg); }
.gallery a:nth-child(4) img { -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
.gallery a:nth-child(5) img { -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }
.gallery a:nth-child(6) img { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
.gallery a:nth-child(7) img { -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg); }
.gallery a:nth-child(8) img { -moz-transform: rotate(10deg); -webkit-transform: rotate(10deg); transform: rotate(10deg); }
.gallery a:nth-child(9) img { -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg); }
.gallery a:nth-child(10) img { -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); transform: rotate(20deg); }
.gallery a:nth-child(11) img { -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); transform: rotate(25deg); }
.gallery a:nth-child(12) img { -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); }
.gallery a:focus img { cursor: default; height: 250%; left: -150px; top: -100px; position: absolute; width: 250%; z-index: 25; /* CSS3 transition rules */ -webkit-transition: all 1.0s ease;     -moz-transition: all 1.0s ease; -o-transition: all 1.0s ease;     /* CSS3 transform rules */ -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
  • Simpan template.

Cara Menampilkan Widget Ini Dalam Postingan

Anda bisa menampilkan gallery photo keren ini dalam postingan atau pada halaman mandiri blog anda dengan menambahkan kode berikut pada bagian HTML.
Ingat pada bagian HTML bukan bagian Compose!
<div class="gallery">   
<a tabindex="1"><img src="IMAGE LINK"></a>    
<a tabindex="2"><img src="IMAGE LINK"></a>      
<a tabindex="3"><img src="IMAGE LINK"></a>      
<a tabindex="4"><img src="IMAGE LINK"></a>    
<a tabindex="5"><img src="IMAGE LINK"></a>     
<a tabindex="6"><img src="IMAGE LINK"></a>      
<a tabindex="7"><img src="IMAGE LINK"></a>     
<a tabindex="8"><img src="IMAGE LINK"></a>      
<a tabindex="9"><img src="IMAGE LINK"></a>      
<a tabindex="10"><img src="IMAGE LINK"></a>      
<a tabindex="11"><img src="IMAGE LINK"></a>      
<a tabindex="12"><img src="IMAGE LINK"></a>       
</div>

Kustomisasi

Ganti IMAGE LINK dengan alamat gambar anda.
Silahkan klik pratinjau, jika sudah sesuai dengan yang anda inginkan, silahkan publikasikan gallery photo anda.
Anda bisa mengedit lagi bagian CSS diatas, menyesuaikan dengan bagian posting blog anda dengan mengganti lebar dan tinggi gallery, atau menambah dan mengurangi jumlah photo yang ingin ditampilkan. Anda juga dapat menampilkan gallery photo dengan menghilangkan bagian sidebar blog, footer blog dengan menambahkan kode display: none.

Silahkan mengembangkan kreasi anda.

Demikian tutorial cara membuat gallery photo keren diblog, semoga bermanfaat. Jika ada pertanyaan seputar tutorial ini silahkan kemukakan pada kolom komentar.
Original Source: Script Tutorial


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

106 komentar :

  1. bagus sekali kawan, sangat bermanfaat.

    BalasHapus
  2. wah.. makasih atas infonya ya..

    BalasHapus
    Balasan
    1. Sama-sama, makasih jg tuk kunjungan dan apresiasinya.

      Hapus
  3. Ihh keren... tapi saya gak punya foto-foto buat di pajang (sebenarnya ada banyak tapi takut dibilang terlalu eksis) hehe. Itu gallerynya dibuat halaman khusus ya? (jadi teringat kegiatan anak2 masjid, mending pajang itu aja kan?)

    BalasHapus
    Balasan
    1. Iya ukh, bisa dibuat dihalaman postingan bisa juga dihalaman khusus. Blh jg ukh. Terimaksh apresiasinya.

      Hapus
  4. Nah ini diaa sobat cocok banget sebagai inspirasi yang saya butuhkan. thank's banget kawan sudah berbagi informasinya. untuk supportnya pasti gan sukses selalau. oh gan costum domainnya masih eror jika tidak menggunakan "www" di browser google chrome.

    BalasHapus
    Balasan
    1. Trimaksh support, info custom domain dan smua apresiasinya.

      Hapus
  5. keren banget ,minta ijin mau nyoba sob,,,

    BalasHapus
    Balasan
    1. Aih, nggak prlu izin lg! Silahkan dicoba, gratis! Trimaksh apresiasinya.

      Hapus
  6. Wah bagus ni sob,,berat tidak untuk loading blog??
    ^^

    BalasHapus
    Balasan
    1. Ini murni bertenaga CSS3 tanpa JavaScrip jd menurut anaa ya nggak beratin loading blog, tp lbh bk anda tes aja sndiri ya!

      Hapus
  7. ini dia yg lagi saya cari...pengen posting di sisipin sama galery foto...jd tau deh tutornya..
    trims ya kawan...blognya bagus...sy suka :)

    BalasHapus
    Balasan
    1. Alhamdulillah nemu nemu disini ya? Terimaksh apresiasinya...sy suka.

      Hapus
    2. bakalan dapat lagi nih tutor keren lain...dari mbak adminnya disini...hehe :)

      pokoknya ..di nanti bgt deh :)

      Hapus
    3. Waduh dpt tantangan ni. Iya insyaAllah nantikn sj deh!

      Hapus
  8. keren-keren nih triks2nya.. lanjutkan :D

    BalasHapus
    Balasan
    1. Trimakasih tuk apresiasinya, maaf ya request tutorialx dtgu aja yg sabar :D

      Hapus
  9. buat gallery ini yah :D

    mantep nih :D

    BalasHapus
    Balasan
    1. Iya dah jelas judulnya khn diats, terimaksh telah membaca "Cara Membuat Gallery Photo Keren Di Blog" dan terimaksh jg tuk apresiasinya.

      Hapus
  10. Terima kasih atas ilmunya kawan. aku follow blog kamu melalui email. maksudnya aku langganan artikel anda. salam kenal :)

    BalasHapus
    Balasan
    1. Terimaksh banyak apresiasinya. Wassalam

      Hapus
  11. Keren ya sob gambarnya :) semuanya miring2 ke arah kanan kiri :D

    BalasHapus
    Balasan
    1. Iya krn pakai CSS3 rotate inilah yg mnjdkn gallery ini keren slain efek yg ada tntux, Polaraid style gtu. Trimaksh apresiasinya.

      Hapus
  12. Patut dicoba nih terima kasih banget ya gan..hahahhayy

    BalasHapus
    Balasan
    1. Silahkan dicoba, terimaksh banget jg ya apresiasinya.

      Hapus
  13. Patut dicoba nih terima kasih banget ya gan..hahahhayy

    BalasHapus
  14. wah,...saya pikir selama ini yang sering bikin postingan tutorial seperti ini cuman kaum laki gitu,ternyata ada juga dari kaum hawa,...hebat mbak,saya salut sama mbak,..oh iya membaca profil mbak sepertinya mbak seorang akhwat ya,..maaf mbak kalau banyak nanya nih hehehehehe

    BalasHapus
    Balasan
    1. Gpp khn bun brbg, lg biasanya bbrpa dr blogger cewe/wnt akn lbh care nanya kesesamax jd biarlh ada diantara qta yg mnkuni hal ini, diluar sbnrx msh bnyk lho kaum qta brbg hal desain web.

      Iya alhamdulillah anaa akhwat bun, terimaksh tuk kunjungan dan apresiasinya ya bunda.

      Hapus
  15. Terimakasi atas ttutorialnya Mba' cocok banget nih buat dipasang diblog Desainku, Makasi yah Mba', Oya link blognya sudah Aku simpan disidebar bloku, klo berkenan simpan balik yah...

    BalasHapus
    Balasan
    1. Sama-sama, trimaksh jg tuk apresiasinya. Iya insyaAllah linkx disimpan balik :)

      Hapus
  16. kuik kuik ternyata pusink juga, kalo ada waktu mampir gan

    BalasHapus
    Balasan
    1. Knpa smpe pusink ni khn singkat tu code dan carax? Mkash kunjunganx, ntr anaa kunjung blk insyaAllah.

      Hapus
  17. Trimakasih tutorial membuat photo gallery keren diblogx mbak. Mmg benar2 keren deh demo di blog eksperimenx dan gallery diblog ini. Hemm yg digallery photo diblog ini itu ank2x ya mbak? Kiraain blm nikah, trnyata...trnyata...

    BalasHapus
    Balasan
    1. Iya 'buah hati' anaa, klu dah nikah mmgx knpa? Mksdx? Yah udah.
      Makasih apresiasix

      Hapus
    2. Maaf mbak klu ada kata yang kurang berkenan dihati!

      Hapus
  18. Balasan
    1. berap gak ya>? Mksdx Berat gak ya? Buru-buru amat nulis komentarx, ngejar apa? Tes aja sendiri ya! :P

      Hapus
  19. terimakasih tutorialnya sob,yang pasti menambah ilmu baru buat saya nih :)

    BalasHapus
  20. met sore sob wau mantap sob trmksih'y sob dah berbagi

    BalasHapus
    Balasan
    1. Sore, sama-sama, terimakasih tuk kunjungan dan apresiasinya.

      Hapus
  21. Hai sobat, salam kenal .. saya sudah lihat blog demonya .. wah, ternyata boleh juga yah ??

    Hehe saya mau ijin follow blogmu biar kita lebih dekat dan memper erat tali persahabatan kita sesama blogger ;)

    BalasHapus
    Balasan
    1. Hi, wassalam. Iya, trimaksh apresiasinya.

      Hapus
  22. Wuih lihat demo gallery photo diatas jadi tak tahan untuk segera mencobanya. Terimakasih sharingnya mbak.

    Oh ya, dishare juga dong mbak cara buat gallery photo seperti diblog ini.

    BalasHapus
    Balasan
    1. Silahkan dicoba, insyaAllah anaa sharing cara buat gallery photo sprti di blog ini dikesempatan yg lain. Terimaksh apresiasinya.

      Hapus
  23. ternyata mbak jago banget nih. :)

    BalasHapus
    Balasan
    1. Ternyata mbak jg jago banget nih (ngasih apresiasi mksdx),
      Klu anaa mksdx jago apa mbak? He :)

      Hapus
    2. mbak indah bener, .. mbak adminnya jago bgt. :D :D
      .

      Hapus
    3. miztia juga sama 'jagonya' dengan mbak Indah :D

      Hapus
  24. gan menurut agan blog saya berat gak ??

    http://zakkysoft18.blogspot.com/

    BalasHapus
    Balasan
    1. Kalau untuk koneksi anaa, blog agan berat.

      Hapus
  25. Balasan
    1. Terimakasih juga sudah berkunjung dan memberikan apresiasinya pada postingan cara membuat gallery photo keren diblog.

      Hapus
  26. postingan yang sangat aku sukai kawan
    sepertinya perlu di coba nig, semoga berhasil terima kasih sudah berbagi

    BalasHapus
    Balasan
    1. Silahkan dicoba, Yup smg brhasil. Terimakasih juga tuk apresiasinya.

      Hapus
  27. Kalau mau masukin url image nya...lewat photobucket bikin berat ga ya.. :)

    BalasHapus
    Balasan
    1. Kalau blognya diblogger untuk buat gallery photo disarankan tempat hosting images atau upload imagesx internal aja, klu t4 hosting imagesx eksternal exp di photobucket pasti lbh lama loading gallery photonya.

      Hapus
    2. ok..thx mbak..jd paham sekarang.. :)
      di tunggu update nya..:)

      Hapus
  28. Balasan
    1. Silahkan dicoba Miz Tia. Terimakasih.

      Hapus
  29. keren keren sob,, css bisa di bikin gtu ternyata ya..

    BalasHapus
    Balasan
    1. Bahkan lebih dari itu, untuk terus mendapatkan update silahkan follow blog ini. Terimakasih.

      Hapus
  30. Ini suatu hal yang sangat menarik sekali mbak, saya akan coba terapkan.
    terimakasih mbak,sukses selalu untuk Anda.

    BalasHapus
    Balasan
    1. Silahkan dicoba, terimakasih apresiasinya.

      Hapus
  31. ko saya tidak bisa ya, ketika saya menuliskan kode pada bagian HTML. malah berubah menjadi id blog saya, ini knp?

    BalasHapus
  32. Maksudnya id blog? Silahkan dicoba kembali dengan cara diatas atau kalau mau mudahnya gabung aja kode diatas dalam bentuk HTML.

    Anaa kira harusnya anda bisa karena pasti ngeri karena anaa lihat ada blog anda jasa pembuatan web/blog.

    BalasHapus
  33. Selamat sore, saya ingin tanya, bagaimana kodenya agar design saya teratur dan rapi seperti di blog http://tempat-eksperimen2.blogspot.com/2013/01/gallery-photo-keren-dengan-css3.html
    saya sudah otak atik css nya, tapi belum ketemu dan masih berantakan bloga saya ini: http://solopalazzo.blogspot.com/
    Syukron..

    BalasHapus
  34. assalamualaikum ...

    umi, kalau menampilkan gambarnya secara otomatis per label dipostingan atau laman gimana ya umi...

    makasih umi...

    BalasHapus
  35. KK MAU NANYA KAN SAYA DAH PASANG DI HEADER EMOTICON BISA GK DIPASANG GALLERY PHOTO INI

    BalasHapus
  36. KK GIMAN KALAU DIATAS HEADER DAH SAYA PASANG EMOTICON BISA GK PASANG YG PHOTO GALLERY INI JUGA ?

    BalasHapus
  37. wah mesti dicoba nih ,, makasih ya mba mudah"an aku bisa :-)

    BalasHapus
  38. Kunjungi 1DragonNando.blogspot.com all :)

    BalasHapus
  39. patut di coba :-),,, izin nyoba ya sob ???

    BalasHapus
  40. assalamu'alaikum admin...

    numpang ninggalin jejak ya.
    sambil ambil tutor galerynya. hehehe
    jika ada waktu silahkan berkunjung di blog saya.
    http://mandirimultimedia.blogspot.com/

    BalasHapus
  41. Om, kalo mau bikin halaman khusus, apa harus tetep nempelin css3 tsb di template?

    BalasHapus
  42. Om, kalo mau bikin halaman khusus, apa harus tetep nempelin css3 tsb di template?

    BalasHapus
  43. Om, kalo mau bikin halaman khusus, apa harus tetep nempelin css3 tsb di template?

    BalasHapus
  44. kren, ini yang aku cari...
    thanks...

    BalasHapus
  45. kok kalau pas di klik gambarnya pecah y?pdhal pke gambar yg pixelnya gede,,yg ak kompres jg pecah,yg ga ku kompres jg pecah,, :(

    BalasHapus
  46. wih makin rame aja mbak blog nya keren ngarep bisa nyamain nih ;-(

    BalasHapus
  47. ane udah nyoba mba sist, tapi gambarnya kok ga kebaca ya ;-(
    Dateng deh ke Wiprasio.blogspot.com
    makasih sebelumnya

    BalasHapus
  48. gan mau tanya kalau cara menghilangkan sidebar atau gadget agar yang muncul hanya lembaran yang berisi gallery foto aja itu gmana..??

    BalasHapus
  49. salam kenal..
    kalo untuk foto portrait gak bisa yah? karena jadi lebar-nya sama kayak yg landscap.. bisa kasih pencerahan supaya bisa jadi 1 gallery untuk foto portrait n landscap sekaligus? atau cara buat gallery seperti di web ini..
    keren banget web & semangat berbaginya ;)

    salam kenal..
    eLLa_giThu ;)

    BalasHapus
  50. cantik nya gallery yang di posting ! , gak secantik desain blog ini ..


    CANTIIIIIIIIIIIIIIIIIIIIIIK BANGET! :D

    BalasHapus
  51. Terimakasih kawan info'ya bermanfaat sekali !!!
    Izin copas ya ...

    BalasHapus
  52. Wah kebetulan banget ane lagi cari tutorial foto gallery kaya gini, keren banget tutorialnya mbak, btw ane mau tanya nih, klo dibuat jadi 3 kolom aja tapi barisnya bisa terus ditambah itu gimana caranya ya mba, mohon dibales ya mba, syukron :)

    BalasHapus
  53. Wah bagus banget tutorialnya mba, kebetulan lagi cari script buat gallery foto, kebetulan ketemu yang keren kaya yang mba buat ini :)

    btw ane mau tanya klo dibuat jadi hanya 3 kolom gambar aja yang muncul gimana caranya ya mba, tapi barisnya bisa terus ditambah

    mohon dibalas ya mba, syukron :)

    BalasHapus
  54. di tempat saya kenapa tidak bisa ya??
    ada solusi tdk Kak ??
    saya utk penyimpanan gallery artis
    www.febrianmanagement.blogspot.com.

    BalasHapus
  55. KEreen :((

    kunjungi www.sistemmikir.com

    BalasHapus
  56. kode itu gk ada d.blog sy [-( gmana donk kak?? (p)

    BalasHapus
  57. Kira2 bisa dipasang dihalaman statis blog ga ya?
    Trims sebelumnya dan salam kenal :)

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!