Thumbnail Gallery Photo CSS3 di Blog

Baca Juga

Thumbnail Gallery Photo CSS3 di Blog - 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.

Langkah-langkah: 

1. Login di akun blog anda.
2. Buat postingan baru, dan buat mode postingan jadi HTML
3. Salin code dibawah ini, dan masukkan dipostingan anda.

<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>

Langkah selanjutnya ganti URL gambar yang berektensi .JPG  dengan URL gambar anda. Setelah itu jangan lupa save / publish postingan anda dan lihat hasilnya. Untuk melihat demonya silahkan klik link dibawah ini.

>> DEMO <<

Sekian postingan dari saya semoga artikel ini dapar bermanfaat bagi pengguna khususnya sobat blogger. Dan jangan lupa tinggalkan komentar untuk posingan ini :)