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/AVvXsEggwuKvOXA8xOkJk74aU4BXicfCzJZS-VvyHBX1EUiPoGdy-DS3_8TD6VZDyk9ybEQ6hs2wjy-CY5uhMqBYiA354qbPSRkz3FDsiXl0pCtuH52yhoAFpt4aj4w5hK6jLebut404kJLcqa-9/s100-no/Gallery+Faceblog+Evolutions+%25281%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivoysQXS6d8dWlgRVn5wQWq1qapVBFjH5-k8C2M4esxiYzUHAzdDfAr7zzKUFIhhZJ71SrwiOnXrIALpjT7CqZ_pn9k4xFKU6NFeR6ZxOMUbidzJymAjL6C3kQ9aiow4WaMGeMQfFWsyDv/w552-h367-no/Faceblog+Evolutions+%25281%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjllJtfOsJts3VO8HwtoHeNda4C1tTZuZllAzSWqvDqNlKUSD2aLMt3ZSBjBZSmcotEXpSKsoblM0ufpqQ5VJgGEHH3yEDWX0cjVpjgz5RrsDbjUuYmKTKmwL4DAci_j1gzdJDiREt6lPnr/s100-no/Gallery+Faceblog+Evolutions+%25282%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV3Lx5whrC6WF3WwAsfCazsMD9mfIeEQ6NEAGnPApgmT7DE1PqxcW6BBnCnOx1kuvL8-EvSdob_sGkSgCpSYUbQKPj4uJXs9KR8r04tI8CozLcEbdR_8Ju0UJs_38H8l7V6hP3pKLIa9hW/w552-h367-no/Faceblog+Evolutions+%25282%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIy2uvKbQKxPt1UUKbhpfH1odhm6_XbecAUsfRB5CCKWxOdVJYxSWJSDpI3jijLaJ6Zp3p5sitOV-NvJULymFTbSka2uOwpLK-Qn__exgf5sCe2pKPDbfcx06LyQsN95lwmj-LH3-oRk4-/s100-no/Gallery+Faceblog+Evolutions+%25283%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkVWE0NGLBs0MqCNI3UIcRnEGdwU80QZw40Un6derkld09REEA3rwiYkzqZKebm33LIA7RHNm6UvXZ4V_RiM1E5yDW2SRyy1jBGrOg-E2K6rgKWrFW9zCGIkWoyLt-FenKfNYYy1u0WglT/w552-h367-no/Faceblog+Evolutions+%25283%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlmD8RrQ-PkOIon1TcwWUN-aKPDR-nDPnSXAONRzxZbk6ZRUbthG55gpwN6cY2ebmgodeP6F2z3EVqXRaMy8jMDIOs-LvHkgEqnOat8U8E7t-JQHYO_V-yraqeMhd-ia6OuD1mrKIeP6UJ/s100-no/Gallery+Faceblog+Evolutions+%25284%2529.jpg" class="mini"  width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUp79EjIeB4LRsum-6ygBa7uuFDh5t67ntCuKydJb0RGfJ-YQGrXOpvQzxgpHqagroji1x9dwjcieocG9m70ba1RhLuoxAy8uyUNo1wtHx2vtXIlT2Dra3Rs-qwwLwweQX6VlQdHhcRGtO/w552-h367-no/Faceblog+Evolutions+%25284%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtGS2P_2vUfMTPmd5bqvD6DOVZhmwbI_nZBtWUxN_RJgv2wBcWQz4RbFxpnlsYKadBhPQpHSEQRU9cdCPZ36r0cn4SzgZ0y7e4qMPelns0vCMOmzB6ylG5jGwkQXz1RNbnfcYTEaO5sKtD/s100-no/Gallery+Faceblog+Evolutions+%25285%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq-6cjoCF7OgLHN-OgmjwSrHO-xvb5L1budssmLYQuqLtUtfetbIF6V7DUTPkIGNjt3OMCW1ChusTB3C_x9CBLW9TpVJFuivhdlJB1j1dl0k3cC6t1QhPVANj45P7Yhs2p8rsWQaHeFTYz/w552-h367-no/Faceblog+Evolutions+%25285%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8J7h771Do5Fw5yh8pzpfdsDGPHJbJ18fSo6s_OJ5R2HBAP2Xih5brhwcGw-vmeYY-KcY-BvgkM8jeqK1BUjcSq7xxWxWW1kaKvZQDg0le7iW8FFMRhRF9jHhRwD6TG4kftnDE3ZHKQ5xP/s100-no/Gallery+Faceblog+Evolutions+%25286%2529.jpg" class="mini" width="100" height="100"  alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7mDS5ZGEZyn8e01deHf-e9kE5CFFZcqgJLhptxqwvRHrNMhy-Y5ZruET0MASsGa26raGP4ICyarMWBN_TIZ9KkrT2_xmRJMDLO6NICb87bKgd2BISy8rDsZvXAsqGUhEzKvtDDKRxQOVK/w552-h367-no/Faceblog+Evolutions+%25286%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAPP0smYzna4S99KWrrjXHGUvRYa816YWfUIMTAjUwGv2CkPWayY3iCtl5Wbg_Gww6A4wcbWE9jgpCTta2E0SIOiejAJNTTj2sQryill0QX4wc7832KFHaZKz4M45aypfm38I5FUqARHgR/s100-no/Gallery+Faceblog+Evolutions+%25287%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL83rPQw-eyxn53Vi2dL4hf_OdTwgBdjQYhwx6E7_QGytjrENVT4Pw8KIauPuUcmEP-5fwx6AbwQUV299BHmJ_LXF3cf5F5CvIql4iREQZPjy-dK1WCdvqlk_jkl37UYdQrTDjrrs9EDsa/w552-h367-no/Faceblog+Evolutions+%25287%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnwWAjd-wpV3DlZkVCvjnTffc1I7fXYTQRjAdB2eMVodZAvsKVmwz-qdiYnCFm6cdk42FBri4zEKM_TqhBxUfl05nyJYLUrvluOyUNUuShH1i_PRIGjxlOcOV6i5zlmIowIIFBgDlBcA85/s100-no/Gallery+Faceblog+Evolutions+%25288%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghyphenhyphenNNJSbi00m1Fw7zm-AcSXWtSOlL5Wglebef0YZo4B-bd6-i1KOpKhc5sRJdkXj2qdmEHVk2OnaeMg_ISPb2y2jylJehGR2iyjtBPVvMEvYaG_99suMCu6-qBUJE65kP7p4QkJk0Pf4bV/w552-h367-no/Faceblog+Evolutions+%25288%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU3u6UEwCQbPK4RWLs-GWY40f4t7SKNwB6Hj8B08KfLMYf8TvogTvvHLRKZXoJJLJ2k7LU81ycXbbHCetKfIOc-VVmNt3obd2J_PXtqJG2upb8kOxmabEDxUMFQyhtve1ULU3P7X79yvsu/s100-no/Gallery+Faceblog+Evolutions+%25289%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhomzjyBjDrXISWcqooj_TOsvnfpxlMEXJNYjuuh_4U_Arr6fLJoxEBXMEkK-mVaEtCgI51ddDbqDiFiuE239I5Afc6dxYw55hdtPC6TO5ggdCw-yPPWGMl6BEhkMZdzj46HJ1t8SMctkC8/w552-h367-no/Faceblog+Evolutions+%25289%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZOz9QGzFmWOz2f2ax-JiMrZYnJEIVcvqt-xkUWmQH_HnxL12hYxwsNMy_fEU6XqWxRr14Ayt4Gx9w29mOkRrOb5JfSlK0QU7v-jNbpifkufsLIM29bAJGAX5ufpvaGQ7leojpZGIXzDFz/s100-no/Gallery+Faceblog+Evolutions+%252810%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2y5WmsWe_2XSp8VilAC7Ow375hmmHI5xUme4usQKXqHlsWeAGzWI0nAegZjUo01V90oJKHGVpKFSVHl6tPga9K_M3Rz4mnF61DNP6tm4v2L-kE5qq5NB8IfN3wmHdV6JIuWHs9p7W4Ple/w552-h367-no/Faceblog+Evolutions+%252810%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjskmZ0yu7HI7eAp-rM3IG_jCfr0jsSDB99djhdszV8pIzjuxtZ8B_YOwrFVMIIxe7TX-jTtlbYlBBomPocz9GSSEZ7DwlGJ1b8qQhth46k6cM_YrdZJV77Otqu3CF3pEJBeR5ygx3Hc4ey/s100-no/Gallery+Faceblog+Evolutions+%252811%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjav6L8MCfpc8qClOUvMfvuLYf7guijzTBZcCqptchrvsee5jNwem9rPbbeyZrNYK8FzIzUNpwyUET9WiT7nj9_w9qHsaGVquHAlT8iC0VGqUektMfkZBRemBM3zusaOsppOo_LLK7yfFoh/w552-h367-no/Faceblog+Evolutions+%252811%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiglwknAIhYzdkeJPkZS7BHrAY3QT6DV9IfEb-Ro7lpqiG5MlCxhT-d6YM6kKctn9uEs6iVF7vNZnX-Aa-dPhID6aViXgw4BrvMF76c5JXV-sRA1wMdKS3xNq8Rzj1DHqvj6Z_s9GNdrbWj/s100-no/Gallery+Faceblog+Evolutions+%252812%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjig90btcMGSFfJX2YnxoGDfUoUmozfJr3gl2St0nCsDQVM9ATz6ffhgxUj7i9UtlHEgCd6cpnWxI0M09VocF7_ihV2FVKOIQeHZ4fADmNhLFPr_tyz5TKQ2F565lKvqpPYqYJ1IbG84K1K/w552-h367-no/Faceblog+Evolutions+%252812%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisYqsy9JdydbSdNVYHjvS7HrQyPbO0qA8TNB6e5N2_ICzcaVdsR5JXZTkvMrXRbEhQISEccAoxq2IJQof01fu1AeDvydIbkRXz8DaY6BJbFUP02yQTxivTg47ppBeXDnv-RHKFJQa15c2h/s100-no/Gallery+Faceblog+Evolutions+%252813%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicCFukqGUnb1p3yO3gNWkWLR7RCLngT-C3-tvr2j4aiq6F5qRDUq8zDYqITKB0dnnQRUkdblPuUSi8hmf_oef_-oCBSLBQKEThYpCbHJpcUkZ5CgdRriHTgF3YRX8fx7oM541S6UhMd1At/w552-h367-no/Faceblog+Evolutions+%252813%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYalvHrmYujq8eSxekGHD-OjMipxujz3WOW2NT1DRUI1nbMP8cW1EKwY3IJz4mR18bcMt_0mhBMx0DBAgf3w_wT3GRPRvLTev_wVajiuGCDXLdkkqbNr4whatZFLc6tlZqTelF6VXFGJfg/s100-no/Gallery+Faceblog+Evolutions+%252814%2529.jpg" class="mini"  width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglJKSzbRtBHAwRw_e_fC04ftvtEAyQm3TDByH8PLW-1xjsGVrK6ES39auNeDuTRLMbmQB_gJdoXJGosbPUE2YKsmho45GouazpxAomE4FejouPJdWp1nuiuPnRysdpnGquSkn32RhB0nxb/w552-h367-no/Faceblog+Evolutions+%252814%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaa9uTEsQ8UiAmN9EB_TdclFJRdVlN0ynNbgAHQXvLaJlE44dQzxc04FUFMnD8d9R14EwT1GUobVBUwtfmJi7LjGvd5d9ZXJhYbmUxI6zmgyFfsxwwYsxqRfUP_noWmI5MdqSrMlw1t7kp/s100-no/Gallery+Faceblog+Evolutions+%252815%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihjYDsTi3uqW5hVfsv8jXdXxvO1SdxXP5yqOpttKUIbm2XkvOb-7dkkSE8sUxT2jsRVlhHmM7sbdoP_qDSTuc2W7_xFViz1HEJTXxju5F3v56E9vddL9hWXVuWs88lq0atNn8soUKVUzGg/w552-h367-no/Faceblog+Evolutions+%252815%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDSaciigsiDPcXvnzbJa40mS8-DJuiQ8RjLqRQnTIVTKTYYUVSiEsl31KD18UPxzXGJUQ5CPKOrsbbQiOf9Kt3ERQKXZgJCodJa9Gr2eHVh4m1x9H-zYeiQsyOsP9YYDkMfGYVM31pIXew/s100-no/Gallery+Faceblog+Evolutions+%252816%2529.jpg" class="mini" width="100" height="100"  alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgAUKsWBhelxB7hIV2cg8EvhT2xznKUWe3uQeUKPtBKG9FFRQZ1-fIkahW7bGhciuT6eARA-n3Bwxa9yrsrwR-g_1Moi171O6hgU7DM0I-uGg5UER0VxIeZi6s9D9A9m2qXPtyOKJFw5U2/w552-h367-no/Faceblog+Evolutions+%252816%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKrFrDq6IWqdWjv8fMFRv3CfZj3D9denJv0oxy14jI97cB9NZjbZXTY8dWSB5OlzcyCmRyPgk9EbaAG1AHhj4D2GzqcCNV65AhX2mvEE2rbon7E94vmGskG9a-iZ06y3z_KmKezUNiekRs/s100-no/Gallery+Faceblog+Evolutions+%252817%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi2XfrdqTA1IISP_0bLdVoPFdu_sZ9pmpUm4e_ayfctUh5cr9QoqwG3uUVAD9GAOnQgdbPfnU7_6ZstP3Iujk5DW1UwdSyLxTnQdqLpWwjla331m6bfI716XLsXRh6DEZAX_AAWmFW8QEV/w552-h367-no/Faceblog+Evolutions+%252817%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSUP2jhpmRHb9DmYtOXWTYtVNzmm1Zp3M2GmN8Rp7vAsoQETvbnqBVwLdzib2FJVDI6Tq3OAf4u9b56aoFvutuH9PdXhLKXDJmWmTGPA24pb_AyXFpQ_gml1S7ZMRDlpe3H3Vw2ZjMkYth/s100-no/Gallery+Faceblog+Evolutions+%252818%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6p5qeaVeD3VvfKHKI4koB54qokQOet3t63R0ZjLAf407c4TGBt0p1ykOYPmLAgF1RP2yH1PcUv1Lgen99Kc49rVQYCibDYk_sr-ie6K2dnRmUvNHWW3DC1aAl74ba39O7Ck7iBVK2zuBE/w552-h367-no/Faceblog+Evolutions+%252818%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgecHjhEBIhw-4-QIZ_KD3XjhmbU7RFgRz-I_6zdhuByFk0SkhRoxy9-dGTXwwZKNSFfEO26mHzYICFS0G04LN23p0BZVR0BqbzXB77aXc5d6K3wTNdK3jrv122AZttvGmiCFlpikumXhn-/s100-no/Gallery+Faceblog+Evolutions+%252819%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTrJPn_nC_J0lDi1v-p3T9JGJqJhlZh7Spzz4v2MCDiOrgqqGMcgjz13xOb5HQ5hUaGetghya0vWvlaoj6F4jTpTPaqi0pfjZU79HA0ixZDK2SoNI5yST5N6PYaSOB2RKgCCxr1F9GrAqw/w552-h367-no/Faceblog+Evolutions+%252819%2529.jpg" class="pic"  alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ZoRP8ZaM7tAKJi0FP4wTePMe0dPpDET0h121s_QxP7O0EBLw7IyhFDtdXwPd2USuiXqBxhiSxlpLw9xTFeVqavMWky8j-6VtQj0udjO8rvBDRcsAGdgmZ5xGVe-ArXu8Khk1U1oeVLO2/s100-no/Faceblog+Evolutions.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEeiPPGda6ZEmx5XoFiL4emn2-QG-phNTuPfGliK3JaPbLLYmmelYsUw_fye-LjplyjZqgC53TNZAXQnw19riVJW7UJttwtQanpa6N0NAuilqxiF6gi1bLYvtqllWFQ-RJchQt55CvMo5I/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:

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

Membuat Gallery Photo Thumbnail With jQuery

Membuat Gallery Photo Thumbnail With jQuery – masih seperti tema pada postingan sebelumnya yakni modifikasi gambar pada posting blog, dan tema kali ini adalah tentang gallery photo. Untuk membuat gallery photo pada posting blog terdapat bermacam cara dan berbagai efek yang dapat mengcustom gambar atau photo tersebut. Jika pada saat akan mengupload photo ke blog dan terdapat banyak photo yang akan di upload kedalam satu halaman posting agar photo-photo tersebut memiliki style layout yang minimalis maka perlu sedikit melakukan customisasi pada gambar hanya dengan menambahkan kode yang simple untuk memperoleh hasil maksimal yang akan menghias halaman blog dengan mengatur photo tersebut supaya dapat bervariasi. Untuk melakukan hal ini tidaklah rumit seperti jika sudah anda bayangkan sebelumnya. Langkah singkat dan efisien untuk membuat gallery photo di blog dengan ukuran gambar yang sudah kita atur sebelumnya maka hanyak akan terdapat satu gambar berukuran besar dan disertai beberapa thumbnail yang mengelilingi photo tersebut dimana nantinya jika pada thumbnail tersebut di klik maka akan tampil gambar yang berukuran besar pada kolom utama yang terdapat dibagian tengah antara baris photo thumbnail atas dan bawah. Jika ingin melihat hasil yang akan kita bahas pada tutorial ini bisa langsung dilihat pada demo. Sedangakan selanjutnya untuk memasang ke blog, berikut adalah tutorial cara Membuat Gallery Photo Thumbnail With jQuery.

1. Login ke akun blogger.
2. Lalu copy kode dibawah ini.

<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery.gallery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h2").append('<em></em>')
$(".thumbs a").click(function(){  
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");      
$("#largeImg").attr({ src: largePath, alt: largeAlt });      
$("h2 em").html(" (" + largeAlt + ")"); return false;
});  
});
</script>
<style type="text/css">
#largeImg { border: solid 2px #52e052;
width: 530px; height: 350px; }
.thumbs img { border: solid 2px #52e052;
width: 100px; height: 100px; }
.thumbs img:hover { border-color: #FF9900; }
</style>

<h2>Gallery</h2>
<p class="thumbs">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3_Pj1L9nOedkyTuRSIsj56FV8ThAJI6SbxUI241sipid47Bs_JebLF_jWLkwJNjEXunqVJlgmEJtnUPuWdjxM8QiJKBmd3OWxFKe8_rpqcoFuMOebXo53aNxrz27EGDOeuY_jxVQMh7Sf/w550-h350-no/Helm+%252812%2529.jpg" title="Helm-Type 2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhOApEVWral734Zt95CAWahNJxWfASazIPu0l-8Qyd1UMTdPBU17SHTwQZN2oqMU0ZruKM7882O6uD_ibKLsPQ_cGzK3jbfpjGqCtANkIcyyO-OPDz0dd3JWEAPVnJtB3JBjvsCIvyK-2J/w174-h195-no/Thumb-Helm+%252812%2529.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFQkBaxR0QaAqg8K5SmgLb6P0rCvUhJC6gG29W0V4_ak-2lmytCVVyGfxZQRKor_1gZw9xpbXF2Wf9LI2rw3oH9UUPSFa1r8vdoJopWj-H6FxMSOqpZ4CrBFdUHpK1YH6agc1bHyRhdoOh/w550-h350-no/Helm+%25282%2529.jpg" title="Helm-Type 3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6cQOwhgpmZ3n52her-bPUX5Wfzvp5Q7ePc1ma3XSKuNaoaXqKYODQcyXTdIAPHwMLA8cJ4b_ByrL4U6-6VTvbaw3AQPw0KGx5CNGdfk_O7vC_75pt7v0iz-qYTcDXXWW6pnBUVzxpgCjP/w174-h195-no/Thumb-Helm+%25282%2529.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN4PAcIWkB0MALPDOkNPMPttQCVOUKHUqEiSmksjscuy1HeVjbfOjjTVqtus1jdURrpPPSDXZ8yHm9Mha9D_O5a4csgH3reQo_QzgvazBl6ODWje936qR9I1O-5Wcq0mqmodIQhXfYThSp/w550-h350-no/Helm+%25283%2529.jpg" title="Helm-Type 4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHn58Xiw2rlYdYVm61L_Hs89wKVLWdUxK_7La2cUgHIYfCvrqo9Jmsr9IUC6Hxld8V_HA45Gb5SXwlYWw-z8giSMIa5wv5zyRdrla70bJZa47-KXpoDvyE2z0hCKAwGHvtEFrMWGjXSzNo/w174-h195-no/Thumb-Helm+%25283%2529.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia-qtiHLvnfmKhV0qfF2H-97srfm3rcf_5Swmi0i-ko3LFx1piHY0P8YHGMZ5yF1vqgPbv-S4h4U9Dn8y0tt_Uc3LsMOk2nGTUcQSDIE03x_VssMwwfAyL2hT-nkZn8WJTVqg_z2nuXB28/w550-h350-no/Helm+%25284%2529.jpg" title="Helm-Type 5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-pMVjgAJJDLdxkyqtn-2eGk6Sqif0clHkYBObBuw02C3UAF_8eM-_5OR5TMvH8iMgSb-TL5XJY6zRmeqyPylMSKk8ZMnfPhRvLGyTBQoy8xg2zZiEq1bRgeavx07eTEeBX7rrgI9ycLlb/w174-h195-no/Thumb-Helm+%25284%2529.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBawNmvdJAAE6vN-5CL_Q8P7IsvEgJnn45O0AgKqMkexk7GOGUK6WUcsWuQsqyx6qZAXp9fZitN4AZ_cJavaNLKzLRFy3B4vxlTKslZHp1zvVnrqxTL_C_Lcpiy_aYWMZBP-J5C4-N3QJS/w550-h350-no/Helm+%25285%2529.jpg" title="Helm-Type 6"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4B_0lHPsUt5p8J59Q4uOLzAoG6fbrwbSq6JEnoTPsfXsgg9QlhmUoogkdNE449cS9fVFcRxxUDjWMuo8gq-JVeuJ9tx-CkswEO45FE2ZLP6p1tzH0Zcfz1Hdepni8o3tjNEfnmWz8FU_F/w174-h195-no/Thumb-Helm+%25285%2529.jpg" /></a>
</p>
<p><img id="largeImg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8yMPNDA07SAr9qM6QPfTx-onFYhA6ck7A-SZqCRKPMpyZZBSPnGtUGSraNEhmIXgn-NG49k0q-vayfXpF_j0eXl5wPJ7skf3Vwu0rRYlPrtYornYi2s-xVPUByk3vuBTDdkJPoOmETdqV/w550-h350-no/Helm+%252813%2529.jpg" alt="Large image" /></p>
<p class="thumbs">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidHMpLoFZQr59z07b56oUp6MIV5oGGK6i8jnhhIuy1LJZyqeuEOJYHruhAHexI_YlCKnH35tIdBQYLFS0tk9M-mtYWBSRVHki5l9R8PNa_hUgYPVDzaB-nlqer8qZry5lBw2Gw1DxJ1ekG/w550-h350-no/Helm+%25287%2529.jpg" title="Helm-Type 7"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjROoXGxowrpTlSH0cZPZaJbrljJDxmAo9eCouQBpeYTPMyBsZEBRniJR45bwrxfAzx1UXlD8UQxl0tWnY-R2GPKXBsijpROa0Uszuw6LqZU5NqGK3L3BeFvesiNcs1L-5D3NZjZ226iliA/w174-h195-no/Thumb-Helm+%25287%2529.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmLs2zQ8F8GdngGKbog3LsUOcLOjzY3OcqXH-HeoGJReE37MCgWP15Bnx8DhnheudgEHHAu-iBFYYFc8pIqQi9BZxFTNs5Ns1gsqEIf8g5Ac5mPVqYZNoOdJOSiGphyphenhyphen5W5gn9CqNyyeNH2/w550-h350-no/Helm+%25288%2529.jpg" title="Helm-Type 8"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtbO5bH3ETJHV06k4IxY4p2eq6fJKB2UwgzBz8WUNQeq_9Jj_I1q4Ki5q1vULhv5WzHgZ_vP16oDXsQbm0zAR-7pgRsqYggVVt5bEypz2ceq6NUM7tNwpYeFb-Ksdy6nKuZfe5XZH81V8Z/w174-h195-no/Thumb-Helm+%25288%2529.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn6Tl5sq4pboNS6liWE81Sqild4qjuVhdaDNX7WuEX4iNpd4MhkhsEkOqDIQKLPZ1D-6RsZBsd79wvGz_FnCBx10YLD-pKjwWA8Ko5TCUAwF4iQSd9isIwVZ-ev5tzNXf6wE5tpwzRhF_H/w550-h350-no/Helm+%25289%2529.jpg" title="Helm-Type 9"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbSW5tccITTfjT8Y2vwVl2Oi2QEO3ix-s45T1A1jrMSFveluu4E8_as09PF5mBhzH2J1b5QXfnyhrMhN9aIIdb2tvCCkE3I8DJaLsKRPyOGKsPhYMM2dhtzb97qJvxJb0jjnRilUdmSSnw/w174-h195-no/Thumb-Helm+%25289%2529.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyZmWYlGaBbbvsB_D_UiCHDc17pAGEyWi9PmjuWUx9z5ZYGMCl1pmNTLCL9LENf9zxWNcD_vOYyOE5OZ34zjP68BtL7_e7hviWi4dTZoniyT0tazDC_XLddm78z3uiGDaiINg2ATHkii2v/w550-h350-no/Helm+%252810%2529.jpg" title="Helm-Type 10"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRVvvnmzp7TXlKBc_-comfuVNxwienWe0sOsjWCGlKZYc8pqq0FR8dLRKdTHyxCi9hKYeyaB54Yfmfmw4isS48yUqWSFb6wE24XEchhAMx63Xn50JSj9lMUUknm4CkX2cToQ0Tuc8MWmVF/w174-h195-no/Thumb-Helm+%252810%2529.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV6UMMbyaxZIMkzUic4voLIOMccdPvYgM_0TUfwdUEOjnAwRXWtV8au4e651yoGJbZlgfGwBON31Onfzw6nl467IOaLdsx85GW61KQyzFyF9Fvxw6L-T8K-NSyAnLkHb59j6ubKY83KX6t/w550-h350-no/Helm+%25281%2529.jpg" title="Helm-Type 11"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_8erbPXwTYAkmgqqZYEfzoc8OZmuoc-_1yZ4HeGTwbHlNos49dcHuDTcXQumMxc-94vpkkBmV7aoIwQ-AsDTXBgr6TsGtpgiJrfU08Ktaj3BE-hRZI63H2NFKB274f_gjE010__YENlsC/w174-h195-no/Thumb-Helm+%25281%2529.jpg" /></a>
</p>

Keterangan:
Ganti URL gambar dengan yang di inginkan.

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

DEMO:

Klik gambar yang kecil.