Membuat Thumbnail 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU1wD3x3Hum4MOtUl2O25YZbUoNacTag29lCuMvAMq0HR4XSJxVeEzrtUE9CU7AvBhJp7mHySzxHluQ8ofJg-_u6k5SnOYbCRAGytUbTwvwZhZUgw6xvMNLjYuz1QCIasGlwrz7qzNYYzV/s100-no/Gallery+Faceblog+Evolutions+%25281%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzFrwpJJug1auvUWMrnDg_jvytO0Rc6FoXVbw0oJRBbTsvKQ7d9SmaUPhr7dPuue3K9l_zmcla7xEuMknN0hyphenhyphenmtl6ftUybZzZ9OuMkY8mtt4GY04fAHIlj7GsfsXnkiiXT7yDMpKk_pW-w/w552-h367-no/Faceblog+Evolutions+%25281%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpnwZotM4bZOqLdYYdRIX7fOZcRpf3Nq3OTvm8rdte-ag8UxEqP2jQl1kFwvhyphenhyphen8_kKkBq8ueatUmxfhyJlbRCb1Vsty1VpGHywtbawfABhDwuPbuHicWAxY6cps8Q8ZBcGnWCjqVnGZ6_a/s100-no/Gallery+Faceblog+Evolutions+%25282%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQQ0pZLUKEdIQgv_L6K0qE5xg5sexNHFi0uJZ9sCE6ffkOZxSgSoh8DWfFIkXHiyqVTt03aDhRFXdOmrWGG8TTlCtSg36aQbN_DJp30xCqtvONE-PUDFx8yolTHvFNENdAcvybLJ9PrGwj/w552-h367-no/Faceblog+Evolutions+%25282%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ONxpaZ7242_Zhx2A0v2mXlA2ilZOUNJz3URQ1FFTuCXKxGxP3-7Gb-ybl3zkkv9FZJxNXjo0UePQiIegApLvWbZ-bayoaxEU-3yadc_C5S3kZTs2TjgQgXiDgzBSHi1e8wGXG4nwO3ux/s100-no/Gallery+Faceblog+Evolutions+%25283%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdfh3PZKjBG_Bdxr5g5H6zX9ykbW4Ec1vCJYVpG4r1IZhyphenhyphenHRK3Ikk2roMntWlPKZVCYFR1UnUfZGPkNhNa5Yt_rn6ssvyoZdVV5Q6G1Ob3HIXTS3s-jT_CkR6oECkpO2t7v2SLFDq5DWi8/w552-h367-no/Faceblog+Evolutions+%25283%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsUnPEPx5EbmSTBy248OmX5qIt7_fzEnDhTS7r9jbqCyTNt6XxcAIMLUwGc-h7bgP-M7444Y5Mf3RyMyDDckt71-t0IrHuRq4qasHwCv-e72AB2IUHYI4AeYiAutND58rhblsQipep7CLK/s100-no/Gallery+Faceblog+Evolutions+%25284%2529.jpg" class="mini"  width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiCKcjKhYSblzwonJ8tfSr38bWRGBjW2q_bvA9I7e_6vAzrdJ2HqgVIEOwwuNT6149s3EPUWM7iMGHrKUCkzTtWW5OFricF1Go5G45hmTkaFoC6laIanhskoq21nowEp_9lHk9qlyUyKou/w552-h367-no/Faceblog+Evolutions+%25284%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGnBM8Tuxt7Gj83c8oTMveXEvpN8Lf6ox8jqaWrEEgs1VFTmj-W7wnTELSjL6ibND2lJnwoVrhrZwuF9sXqZGSPnaXrGlIzuzjXs3wo8r0ryOVSnJDwozD1iAXTQQZjET6lMxlDRgpLFhj/s100-no/Gallery+Faceblog+Evolutions+%25285%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisePM2q8PyS52vr0DpxjuUvSRavSFCbs-nno5CIF4268b1Yr2X4f7hAt9rsp2md9cxNQuVDHcLXUCgVYM1Lvb_wuBtYaYLCkxNedScMdt_6k8NbLAMm1mad0IiHEGIVUVQIX4T3m-MQPzG/w552-h367-no/Faceblog+Evolutions+%25285%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLB6LhbsNl9ajy01g-4eY6eu5-rGvF2LwLm3YwRaXxq2B3UYvlsDoTKGG7UR-F-LMM9_o1MOMaJKYwHqZeC_-lJohTMNfh15o5Ell1mA42qD66E4J7OZyWfyJ33GbdSj5uAhVEB8bWZ4ed/s100-no/Gallery+Faceblog+Evolutions+%25286%2529.jpg" class="mini" width="100" height="100"  alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdQFeu1yeWG7y7XDtSSpfIt5_0v9HV_cQbGdRfFb4h8xwYuQBAkVvwe61EVXGqNlEC0oQpRADNUvWxoa456jENiaX4Uts6whfmieq7E6V8RKUB5GQrm5Rwomqabq4qdOU6PxmHm8PnV-fb/w552-h367-no/Faceblog+Evolutions+%25286%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj7RlwaambJqfcartU5m3ZichYJmlMsRb2gmr4knN-cZjK2eeIdlpqAHlbmgeaJtU6WIGlSz0To9T4GrGoQ4Om4UPqA1yv6MzusIupRNMDvKCTro2UXc58_dYC_n9eMsVrOFaaIn9WuXHZ/s100-no/Gallery+Faceblog+Evolutions+%25287%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6vKJhtda1dyJ3Ja5HP5D5CAmy4NSSqCDT1xmJuNuvBUVDt1oG-qaEGQeAb0iFsFf1ySdhI-msfG8FMuvBtzT39r6VpWN05Xr3OjfCMfzXvx-7UdbHwxtewgZKJFEYLZdib-qD4huVA9NT/w552-h367-no/Faceblog+Evolutions+%25287%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVZzySSPUEy009l-tpOgmcmB_uoh_rRyQxKvVrtOOta7GQ3Jz2c8C752owq3ZRMx5gMAZJzMd8LcGr3-qLFEyrcB2UKCv4cMEOkBxmJI7P-OqfRrDgV2GyYizpv6hgI-wZhasr6oLeSfyh/s100-no/Gallery+Faceblog+Evolutions+%25288%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJhw_nF7gpNcveeClbuPb_-DXugVGizQRS7xlChCzrUHzv1wwG7C_jW8QfnUTbBdRW5W6ArbFtEycL15jSa3AElqkeyggwqfhO5SqqOMhzIP5Q1YPwkQQra1EAmC9gzqTcr9yueODuzl6N/w552-h367-no/Faceblog+Evolutions+%25288%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQSTKMG5o6DLGakn2iK9hHwx7chAJGQNGFYRxrEI0MQU_j66Qg2KcdIOlabKrTcxHjILisAQKMbYJT3pW15XojfKq7qTcNwgIqvUYoRwu94f2WozuV7fG7mnYncZInbJv_Qet9ktsxSm5z/s100-no/Gallery+Faceblog+Evolutions+%25289%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghs9d_zne7Q7qq13eAZ75Wzch3gGI7V21QURSOc0w_K91GmXs-7b9JgytGjFPb8Hn-aWoyjxI-WuN3fGiWadfvKKg1v2uyHMLF7TVFhkV8QfDIPCIJXDw8Rfi2z1pItPwbxvPphebEa3ap/w552-h367-no/Faceblog+Evolutions+%25289%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja0YKlEGmdg17tx7rkiphvfzsg13RAaSzxm05_m24yVmA1FmsnaiEaVbx4f9FKNiu5r9ihaK8cJHltjqxhpufISEsfL0odCUks3BG4kgoDIpvohMH9aGX0GdZMnD3uxT678czLw7dAYJ8F/s100-no/Gallery+Faceblog+Evolutions+%252810%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAbkaqUm7S1_piEg2iNyRmg3_Dul6cKnhrKaCyFQaiwfPt_pYmyadO8mbPAZbAx47A4gDa2W3aK5EiHkswajmip4_sxyyTjnxVjc32hwaqjuHiXJ3YbCz1qI9mRVjWd44S52zYAznUXayS/w552-h367-no/Faceblog+Evolutions+%252810%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOJyZwUjJx4H7ZGtkOYZkgCjgApPjibkpFKWPWPAuaCehzr1OBoy6hM1DDWN1fVo6IpoFD8bgO7a4YITKZIpGvWZqz-iwRSvxFZvexT5siA2b2b7-EQCqqsU84PZKi59SV20wELJzC2y5w/s100-no/Gallery+Faceblog+Evolutions+%252811%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0L-G2ZLq-Um0m-NCYFtZxWxpq02GZaT-annTGf40I7ryWrOiF457EoXeKfcRvTaCgiKdWfoGun0cuFfjaNLXWwviwk8chGzPCylxxVOCiosuQiqVJssdF0y5-RdP0ojQI8K0yRGXTUC99/w552-h367-no/Faceblog+Evolutions+%252811%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiepjFdg5hiD68qyK70nwAYuUx3StCzIkdVxWdfh_xDA37De19rOVAJXPZwxdosSn_PLot-s0YPsLtTwX4EoWK9k8jlZ1-yOaRt-NwyqekEG6GksUQBP2CJaZikvoalyTTLXkjMugyqzeW3/s100-no/Gallery+Faceblog+Evolutions+%252812%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2IoJu9FnASZBw8WbPQ1SegshQBO_wLFGxpd0g7zOo0PtZcppZ5Zb3or21am3dQiaVGJGP6EuLiKCLDC7cjtjDGp5iKl4byayLmX4RJi8l98tRo0cdHAaMMqKEKHymrTU810RR-DoUAwxy/w552-h367-no/Faceblog+Evolutions+%252812%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFc3BsN3ha5usVtnK-GnkF460EKyaRtt9XeqVGkCsQ5d8RPVJ8Q1b6_P1zzmI5odJXKYUZJyQUvwQRYv4Bm_P_1l1hiucN_nXurnkPvTTA9DWzRXLH7Wpiup_2MoK3EG_HJq6Qw_qZRe_p/s100-no/Gallery+Faceblog+Evolutions+%252813%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKqFDrXUkMgf6_B95_-he-OHj0GquV8WfGaBvKXPOcOlll3yKHyyaT9JZzPLPE7ThTNDUEIuUBuGCYVHrQDp9i8WbYvyC1A8YrIfRskU3reSw1lacP41EZ2-sIknAIYxSkzLEcrwkDLLUa/w552-h367-no/Faceblog+Evolutions+%252813%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfNQPjc_rpG-w7_dwQ44bUHGFJWcAL9jw5qxW8elBW_xWeDIo-yvvtv5dYjaQLBbOPGRqvhEHaVCe9JdzK9EQD-j9olQe9DwgbA2t_VnaGcspb7q-OEIh18Je-xgBtqPk3rSKksWnIVI_s/s100-no/Gallery+Faceblog+Evolutions+%252814%2529.jpg" class="mini"  width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg44uoHjDIKrQy1opZpWC7tiQ-Ruql8GQGti-XMHx31wnn8yVAwC5wAqkyjIi_aj8WO6W93SXtL7UjQXRYLd_acbA6DqTr-1eN_SIRMngBC8nql0pfBEj3OqrYAopVCQUUT8zoYSg3l_nOe/w552-h367-no/Faceblog+Evolutions+%252814%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBDlm-BtqmSFP8Qv0QpdufiedAFfoLZ5ibnJzXnBI0TRqACwPnqK9TFJaro4sJzUo49PAqnGbMewuXMBCKNxnScze2NRjfsgNmzTl6o-ESQSKKPifaE05GXda1e35mFrtfIET4K0jr1DIF/s100-no/Gallery+Faceblog+Evolutions+%252815%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpyi7dvto5ouvREWMHBT_WSON2T8dVeQmJGyX_B3Uv0x-XrnJPaEgamqpcX1dhIdttYe7ADNItL7YFqAwha0k5s4a43oYeKSKOgpAx93C3faBmjr-k7pdI_qwR-HrM-nXIu-vPRvknYQ92/w552-h367-no/Faceblog+Evolutions+%252815%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisAez5cDF9sBNmll-2GqmAZTCrWbjjgocYjBiPR8THt8iwbHX0oIB_E5yMfpkAMslwNWzRhCuQX6ZSA1az009fChsT9Dx7rFmMRZlUSh0L6ZM2l7UggNILcdtZ-kMaqOiQSDMHtRG69krh/s100-no/Gallery+Faceblog+Evolutions+%252816%2529.jpg" class="mini" width="100" height="100"  alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUIOhHxy37jAXbFEg4ZG7ksncpodU35S4X70cadS61pcuNKfF4TRxNStBoElbcwKDMAO6qAH-BkWmjCrLttopboV4qGRYTN3VLgRyGha8wRfWXwWO7EZbaGtxcVdQf-89oZBRoWqdqnue3/w552-h367-no/Faceblog+Evolutions+%252816%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaablheig5PiVSuUYEh5MMvQPJnxjmzhp4gSqxpMBiGV3bi67Kg1DKLdL9j8XdSFo4xCrX7Y8hd3km2XWzWLAfJjAtlUsXPwM2YhVuaDjUPND-NDWVEu3FFp3FSc-xSYS_6rNKCGEUIVnj/s100-no/Gallery+Faceblog+Evolutions+%252817%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqMyEc_rC4GTqQt695uyh-Tp5pEYANyfrUVMTJflPjvA2mSKoCp2bSuO0KYIMcP42TKv-dY1zGsEzHrbs_V2LlswdRBqoUbIWcH4dzuhB1D5mrdCT87rIEC5pZLpYJ3qObdN8vtWakdkyo/w552-h367-no/Faceblog+Evolutions+%252817%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGYrakXlsZF89D_gjx2YFoI2-0nov23xbhIkcuVOWUlJvviXtyegy0YEYKCygVvNNvLV1LyTDWRv0LDCZxYMHfjGoy1dRR_iRQtmsZIS_RZKgDcCmDmk91zMDltXO9B7yg2nBhxXto_VNX/s100-no/Gallery+Faceblog+Evolutions+%252818%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPhxTHT_OUkN1kg5U6mPFY8HyhkzgpaGvF_j4anFK8aKluY3ubT0IT3Yf0ir1d7Fg_-0Ch5fNdvNWgHksu9v7C2r2aM0EX8JWGEez-Ql9A_Oy5Wd1HXCOHyTv-SnfClwaLRYqZWXeNV5zX/w552-h367-no/Faceblog+Evolutions+%252818%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEsp6hqS6I5W7vKOIv6G8DYsQGGCaKKhHGbNBnH2ge2PRZ0OnvjhtTFdr-okDzjj507IJGoHTrv0QHvS3nFoP7qDi6HykO60shG_C2W0WLnjDvOakM79_GrEg3iQWcdmWr32fxwA0nMLYb/s100-no/Gallery+Faceblog+Evolutions+%252819%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Jte5sIc6x5OtTvip19_rN1W6ppK1IF2Fmk67mZKvDAO24zaEqrDtBrMt6fARcYB-qDViyv9VvPdHTXvj45on48ouqR-rEU9lQaxEIUN0nXkeZcSSwrR45c1ftfoFAIiP1i1HrnfzPUQX/w552-h367-no/Faceblog+Evolutions+%252819%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuQbafGwBTNArcjqj7uZ6DL6Oe2CRPp5MT3dFx4wj5p_tOp_jHzYdmE9hBWDYwRxfLSVfzJF4QkOykeWLQFiG57Z4jgbKhecRg1WQEPkSVWFsuia_sACI2hlvX28vEa04iW7hbBFu-a4rT/s100-no/Faceblog+Evolutions.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitwo2RxTmmUL2Z3lsS1yazMActIuIqBzOD3T5Rmll-PB6bcw6jrUapJjOZIHVoZWIagxrfYshs9udAVi7w5YZMctJ6mCuWihYUXXZWi1HkW2rCpVeKGSpYyke-uZPl1kedVpvPsB8leWA5/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:

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
•