Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Thumbnail Gallery Photo CSS3 di Blog

Gallery Photo CSS3 di Blog
Membuat Thumbnail Gallery Photo CSS3 di Blog – pada posting sebelumnya saya juga sudah pernah membahas tentang simple gallery photo di blog dengan cara yang simple namun pada gallery photo tersebut tidak terdapat efek zoom hover. Maka pada tutorial ini saya akan kembali membahas tentang bagaimana cara membuat suatu gambar pada posting blog yang berjumlah banyak namun tidak membutuhkan banyak ruang posting dan sekaligus terdapat efek zoom pada gambar tersebut. Pada gallery ini default layout gambar hanya akan berbentuk thumbnail yang tampil didalam posting blog namun nampak akan membesar jika pada gambar tersebut tersentuh oleh mouse. Tentu sangat efisien dan minimalis namun akan tetap terlihat elegant. Untuk mengetahui hasil dari tutorial ini bisa langsung dilihat pada demo yang saya sertakan dibagian bawah. Apabila ingin menerapkan kedalam blog, berikut adalah tutorial cara Membuat Thumbnail Gallery Photo CSS3 di Blog.

1. Login ke akun blogger.
2. Lalu copy kode dibawah ini.
<style>
#thumbgallery { overflow: visible; }
#thumbgallery ul li { list-style:none; display:inline-table; padding:5px; }
#thumbgallery ul li .pic{
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
opacity:0; visibility:hidden; position:absolute; border:1px solid #52e052;
-webkit-box-shadow:#272229 2px 2px 10px;
-moz-box-shadow:#272229 2px 2px 10px;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
box-shadow:#272229 2px 2px 10px;}
#thumbgallery ul li .mini:hover { cursor:pointer; }
#thumbgallery ul li:hover .pic { width:550px; height:350px; opacity:1; visibility:visible; float:right; }
</style>

<div id="thumbgallery">
<ul><li>
<img src="https://lh5.googleusercontent.com/-0rHEvfnbAik/Uc32vnuWGqI/AAAAAAAAFDI/pH-zTntjer8/s100-no/Gallery+Faceblog+Evolutions+%25281%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://lh6.googleusercontent.com/-YkXSCBxlEOE/Uc32xRzAgdI/AAAAAAAAFD0/knGiHxgS9Kg/w552-h367-no/Faceblog+Evolutions+%25281%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://lh5.googleusercontent.com/-HfwHcNyiUH0/Uc32zu--NTI/AAAAAAAAFEw/9NdV8DrzVWc/s100-no/Gallery+Faceblog+Evolutions+%25282%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://lh6.googleusercontent.com/-WZes096ZLvc/Uc32jeCWJqI/AAAAAAAAFCQ/aYFCptAy1sQ/w552-h367-no/Faceblog+Evolutions+%25282%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://lh3.googleusercontent.com/--sFFJIw26nE/Uc320LhO-FI/AAAAAAAAFE8/-ZSbKf8WjjA/s100-no/Gallery+Faceblog+Evolutions+%25283%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://lh5.googleusercontent.com/-mEppElmNdaw/Uc32kyFDMqI/AAAAAAAAFCY/0mzDbV0TMEE/w552-h367-no/Faceblog+Evolutions+%25283%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://lh4.googleusercontent.com/-gSdJx6KcXbQ/Uc320eQEOJI/AAAAAAAAFFA/EyhPSttz7tI/s100-no/Gallery+Faceblog+Evolutions+%25284%2529.jpg" class="mini"  width="100" height="100" alt="" />
<img src="https://lh4.googleusercontent.com/-Jtfbxp3n5qI/Uc32nsD3kWI/AAAAAAAAFCg/JxLrnH_ZC0E/w552-h367-no/Faceblog+Evolutions+%25284%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://lh3.googleusercontent.com/-Jm8PyucnbnI/Uc320tFsi1I/AAAAAAAAFFM/9Ad8hc3oXbU/s100-no/Gallery+Faceblog+Evolutions+%25285%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://lh3.googleusercontent.com/-Q4VCGj2IYWM/Uc32p1WhciI/AAAAAAAAFCo/ZhCyghPBRsk/w552-h367-no/Faceblog+Evolutions+%25285%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://lh5.googleusercontent.com/-XDQnCXA6RCo/Uc321KQWhPI/AAAAAAAAFFQ/tpJ9Atv3Fk8/s100-no/Gallery+Faceblog+Evolutions+%25286%2529.jpg" class="mini" width="100" height="100"  alt="" />
<img src="https://lh6.googleusercontent.com/-n_ko8ZxngS4/Uc32qZdu0WI/AAAAAAAAFCw/byM0te2xGjk/w552-h367-no/Faceblog+Evolutions+%25286%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://lh6.googleusercontent.com/-iwhFpeY2VCM/Uc321RlscGI/AAAAAAAAFFc/-pL5TAo4V4Q/s100-no/Gallery+Faceblog+Evolutions+%25287%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://lh6.googleusercontent.com/-VlCDCIkmtBg/Uc32v-IIuSI/AAAAAAAAFDU/FbYLl0zLb2c/w552-h367-no/Faceblog+Evolutions+%25287%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://lh4.googleusercontent.com/-T8J-SofS6GU/Uc32195C7fI/AAAAAAAAFFo/_RzkW3Jn4JQ/s100-no/Gallery+Faceblog+Evolutions+%25288%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://lh4.googleusercontent.com/-GeuWnLfR7XQ/Uc32sD7HCbI/AAAAAAAAFC4/PDH7aHu3dqs/w552-h367-no/Faceblog+Evolutions+%25288%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://lh6.googleusercontent.com/-GIvdEQYXp5g/Uc321-GcbLI/AAAAAAAAFFk/n2HrVGRM1l0/s100-no/Gallery+Faceblog+Evolutions+%25289%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://lh4.googleusercontent.com/-6ueRJ7G1plo/Uc32u02SmGI/AAAAAAAAFDA/1FFjDonozug/w552-h367-no/Faceblog+Evolutions+%25289%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://lh4.googleusercontent.com/-TdSMitkKPrU/Uc32wengI-I/AAAAAAAAFDY/4HMO27SXQTE/s100-no/Gallery+Faceblog+Evolutions+%252810%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://lh3.googleusercontent.com/-XZgJIIWuhPg/Uc32SdiHv0I/AAAAAAAAFBA/K8VRjU5k_ic/w552-h367-no/Faceblog+Evolutions+%252810%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://lh6.googleusercontent.com/-OsV7LrMBymw/Uc32wg2rwwI/AAAAAAAAFDk/Ds3ETYgt7z0/s100-no/Gallery+Faceblog+Evolutions+%252811%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://lh4.googleusercontent.com/-SuIKSRD1AWE/Uc32TCPVdFI/AAAAAAAAFBI/5--eBBbKXVU/w552-h367-no/Faceblog+Evolutions+%252811%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://lh5.googleusercontent.com/-dz8sBRHQ7BQ/Uc32wzTZaSI/AAAAAAAAFDo/98kqnD_FhOI/s100-no/Gallery+Faceblog+Evolutions+%252812%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://lh3.googleusercontent.com/-cmnC-QJ-azk/Uc32V4bRLmI/AAAAAAAAFBQ/aqZAdHSDN5A/w552-h367-no/Faceblog+Evolutions+%252812%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://lh6.googleusercontent.com/-yiBpLftAur8/Uc32xi4HsKI/AAAAAAAAFD8/j85zN-g7nK4/s100-no/Gallery+Faceblog+Evolutions+%252813%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://lh4.googleusercontent.com/-XSX8qPP-FRM/Uc32XRDMxVI/AAAAAAAAFBY/G5UOem_1xJU/w552-h367-no/Faceblog+Evolutions+%252813%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://lh5.googleusercontent.com/-t05QSPMi9hw/Uc32xvTaySI/AAAAAAAAFEA/d4kV76bapO0/s100-no/Gallery+Faceblog+Evolutions+%252814%2529.jpg" class="mini"  width="100" height="100" alt="" />
<img src="https://lh3.googleusercontent.com/-agUwNiO4YHs/Uc32ZZc3aKI/AAAAAAAAFBg/UfrrDI3V6m8/w552-h367-no/Faceblog+Evolutions+%252814%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://lh4.googleusercontent.com/-pN-Em_tAxfU/Uc32yEZjZMI/AAAAAAAAFEM/oW0PbEurODE/s100-no/Gallery+Faceblog+Evolutions+%252815%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://lh5.googleusercontent.com/-ZHqIQuBi3TQ/Uc32ajMIqsI/AAAAAAAAFBo/hdL3z-po6-Q/w552-h367-no/Faceblog+Evolutions+%252815%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://lh5.googleusercontent.com/-teJqJYSlCRU/Uc32ySkjI9I/AAAAAAAAFEQ/RPWPwsFIWUE/s100-no/Gallery+Faceblog+Evolutions+%252816%2529.jpg" class="mini" width="100" height="100"  alt="" />
<img src="https://lh6.googleusercontent.com/-N_iNwr5K0Fw/Uc32cmpVpMI/AAAAAAAAFBw/iH_8blVPJS0/w552-h367-no/Faceblog+Evolutions+%252816%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://lh6.googleusercontent.com/-2f5b1wICdtE/Uc32yrOTRPI/AAAAAAAAFEc/ZFcwMDhqfrs/s100-no/Gallery+Faceblog+Evolutions+%252817%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://lh5.googleusercontent.com/-W5drhuhae10/Uc32eb3pB_I/AAAAAAAAFB4/HBBIMgittFY/w552-h367-no/Faceblog+Evolutions+%252817%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://lh4.googleusercontent.com/-Pi_160KWV9Q/Uc32zKwFSpI/AAAAAAAAFEg/ESZ8B0pGChQ/s100-no/Gallery+Faceblog+Evolutions+%252818%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://lh3.googleusercontent.com/-vBDNNv2C5Q8/Uc32giRuzFI/AAAAAAAAFCE/-zWZLCiP2RA/w552-h367-no/Faceblog+Evolutions+%252818%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://lh6.googleusercontent.com/-oL7S7wX9yh8/Uc32zbn0AwI/AAAAAAAAFEs/6bKStkhcWzA/s100-no/Gallery+Faceblog+Evolutions+%252819%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://lh6.googleusercontent.com/-VJzfPM-tr7o/Uc32g6u47OI/AAAAAAAAFCI/9AuRaZELpYc/w552-h367-no/Faceblog+Evolutions+%252819%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://lh5.googleusercontent.com/-qCfOIDhVdLk/Uc4A8voT9ZI/AAAAAAAAFF8/uVsx1r8WGr8/s100-no/Faceblog+Evolutions.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://lh3.googleusercontent.com/-H_Is7cbjJQ8/Uc4A8nT8PoI/AAAAAAAAFGA/U9eh8DzwcSI/w500-h390-no/Gallery+Faceblog+Evolutions.jpg" class="pic"  alt="" />
</li></ul>
</div>
Keterangan:
Ganti URL gambar di atas dengan photo yang di inginkan.

3. Selanjutnya paste kode tersebut kedalam area posting mode HTML, lalu klik Publikasikan.

DEMO:


  • cewek sexy cewek sexy
  • cewek sexy cewek sexy
  • cewek sexy cewek sexy
  • cewek sexy cewek sexy
  • cewek sexy cewek sexy
  • cewek sexy cewek sexy
  • cewek sexy cewek sexy
  • cewek sexy cewek sexy
  • cewek sexy cewek sexy
  • cewek sexy cewek sexy
  • cewek sexy cewek sexy
  • cewek sexy cewek sexy
  • cewek sexy cewek sexy
  • cewek sexy cewek sexy
  • cewek sexy cewek sexy
  • cewek sexy cewek sexy
  • cewek sexy cewek sexy
  • cewek sexy cewek sexy
  • cewek sexy cewek sexy
  • pria ganteng pria ganteng

Berlangganan artikel via email

20 Response to "Membuat Thumbnail Gallery Photo CSS3 di Blog"

cantik banget galery potonya.....makin byk ajah nih koleksinya

Balas

keren gan gallery nya tp lebih mantap kalo di klik baru muncul preview gambar yang lebih besar gan...:)

Balas

mantap sob kerenlah .. bakaln makin asyk neh blognya kalau pake ini

Balas

Wahh.. keren Sob...

Balas

Sudah saya coba di sini Sob (user saya)

Balas

yeeee.. aku pake mupeng gampang.

Balas

keren banget asli deh

Balas

Makin Ok aja nih mas koleki cssnya, absen jum'at malam

Balas

Wah lumayan juga bisa bermanfaat untuk menampilkan banyak gambar namun tidak membuat penuh postingan, mantap nih sob Membuat Thumbnail Gallery Photo CSS3 di Blognya... makasih udah berbagi :)

Balas
avatar
Anonymous

bagus nih photo gallerynya. bagus untuk posting, juga bagus untuk slide kali ya..., ijin copas sob.

Balas

dua jempol dech buat admin blog super ini :-)

Balas

ini yang saya cari gan..makasih tutorialnya

Balas

mantap bro,ijin untuk mencoba mas bro,,,,

Balas

kenapa saya coba selalu gagal haahahampreet :D
-__- jadi males makenya kalo gagal mulu.

Balas

yeee katanya gampang kok masih gagal juga.
mungkin yang dimasukin bukan fotomu miz, jadinya agak susah postingnya kurang support :D
hohoho

Balas

iya kang dede, mangga.. :)

Balas

sekarang udah ketemu kan.. :)

Balas

pasti yang di masukin foto mangyono

Balas

Mas, Aku kok udah ganti fotonya jadi malah berantakan mas bro, gimana ni? -_-

Balas

kenapa di saya gambarnya justru jelek / gak jelas waktu di zoom.

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Thumbnail Gallery Photo CSS3 di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode