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:
- Login di akun blog anda.
- Buat postingan baru, dan buat mode postingan jadi HTML
- 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFQAS2gwZAVi2v5c4YzJcy9jeOngSM86L1Uu2E24R4YC35hr4CCO3eRlDPmTtMAMnopdz9Nhib5oioRybUuA4pc_QKfaXOdY7E76luCRZ1teiMAka7HQ3BW20AUjuCsxlj37bBsQ9FiQ1s/s100-no/Gallery+Faceblog+Evolutions+%25281%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGsazi1C-17wzGyvnO68OrqiX5RochtmxkXRRhV4uF0mYtjCbB-rnElhDW2uOrRkVnUk8Tk61CmuV3OL5TVGeC39t_SlNVIDxO24vS6JmHEBcI2vui3mXWmJxo1_BfR-T6FJfuGbeL2vM-/w552-h367-no/Faceblog+Evolutions+%25281%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIgxb6LvA_LDN5fCPx8NqklL8a8Tt-emihegaoYJ1xpA3pnA_UDltZ8WA_Gmic-PKel7Nsm3G5twAHkm-NsPAtHDFiKyBS8adltDq66GiC252sVL_sk3NgkZroc2lZRv_BFDaaGZ40tQKO/s100-no/Gallery+Faceblog+Evolutions+%25282%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL1jlAsSuAv_hO0XcXLlTFr6dxK4xcjbxLCkcrpoOrtE3-hWiNaJQ301h0edDnsksiy1tiPAI3pYYDgo_zbk5_M0hcUHoP1ii82qWWT5VWlOxxO2IGOcldAQ9oLGiIFCCegtRnF2solgRO/w552-h367-no/Faceblog+Evolutions+%25282%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3dxj9NVyPxA9JvtFG7hr3iRY_6a6rrfaLH_M8HKtYYrPAgfsVjJjXY93wpaW3qkP2Eyu1-4nva-71aPBWsZ9yXfOCatN-tePGQscxFtioCWjlPa1ffXRpro99aZJx5JJoep_JNiZ0HHYn/s100-no/Gallery+Faceblog+Evolutions+%25283%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPkpKH4X9XtL_iRlnxfXE6KcetHBkQ1tQkE24mm945QMEwtTxwvyTftCNdOP_naLvbhlvohAi4ZobdosZbVBNSU90SFUXz6OaPPkUap-if-4ewmBcg-F7RnbTNzWke3WHt2yURcaz8SkQC/w552-h367-no/Faceblog+Evolutions+%25283%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUimDDL9LvIStT-iwWI7owJpMCbrQk2qDbTM5sZf8CMURM_pvye_N7dD7X1LAVQkFucmrypbPwjX_izYEpbfDregx1RC_k_LEKq-kVlSGbCEiwll7mnoL7e7PyrAByhEUTHHZfQeffLuO6/s100-no/Gallery+Faceblog+Evolutions+%25284%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwQnbghu2P0nk6Nq03HILR4xGmaIW1H3cpPRYXBNlUEpSyD4vuL7p20AC41kyDG4EW8AXxu1Al93QY0JwGKK1ZgOtiLvSqAVLE0c8csNTCaptCQMObbrWRQPaApXTl9804hQw_DtgRRbK0/w552-h367-no/Faceblog+Evolutions+%25284%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj0MRVVzVXbxCUkt7e0rBt6Hd-ogstr7OJJpbP9gCued9TG2u-5HIF118dh07DCCsOR1lGTud_fwIaOhISsxTQ4gnVgHXeXtVqDQLNXTapPcyHDPphMBOwKCyQsT-Sn1sha1AXviwawCue/s100-no/Gallery+Faceblog+Evolutions+%25285%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutVCVMUMaGKUTncXWan3EftGddIV6nGD3eLZ3iqn35lo17CPLwvhmmmDyeG5benU_og6iKI6NrFXhp32pwlRC57pyp5A-952aT4q3-La1sgQszfaKoEOnSNYbmZIDqOx2h9QEsTxnXh-k/w552-h367-no/Faceblog+Evolutions+%25285%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7YJYf46lAIZSiQKUWNsn7pD8VqQRFnkcbtvEq4MztGjngCy7VKq0_88eS_GO2IgFdiLYVC8aBM6iCvnVfaoOJubQE9Ah5-9TK9o0kdcZPwxiTnT0GUSB6kG-Ktsjtj20wPd0lhLUx5NqS/s100-no/Gallery+Faceblog+Evolutions+%25286%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirdo7LtnW0XRtEqNyDThUedopspnNwf7KgUsAOy9ZWWO7sGVZDZUfxLTsttpbf05J3yS9TtYree8xOYvgzQ-2G8iZ0fTuILSXs_iUKwdIxVtpPMUzs82ClryUENGo_lStN_qRgLiY8JquP/w552-h367-no/Faceblog+Evolutions+%25286%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv5sS4eSRcAE2rngveFsIEtLQJ2S724q51ppiD-RAvDnqHe3jLVY7NG4F9F5IuDlzCBfLyYBJj4lQQ3aBAYSjXURZMOr9VJPRzsVIg9Y4CDaCsTvcdBGtColmjJNgMORt9Xwu73Kr4ED01/s100-no/Gallery+Faceblog+Evolutions+%25287%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhES9iUVwIBxerq3j5Un_wgYp3iONJWKL4KDhk0soKCLixNqTE1zrJrbRrlP8aZWz5-33sz6UOs2_SklrQzjTAX4zzJWSRdNse2qZmI83Fv125CShiSqbWOnAOs-1njUWooWoqoxG2i1y7U/w552-h367-no/Faceblog+Evolutions+%25287%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwxy5rws-JtZgPtvdN-W3T0lXKYdaeGbZ9JPDS9GS7Qu26gDB0YsBiU4qh-AS8v9c_ovW0quwmQZcF8a9JDSp9il1ygE6ok2hMTKxZ3MmZLn_8jogTS2owTIFrwtcGqhqtC0WM7OfqyzC3/s100-no/Gallery+Faceblog+Evolutions+%25288%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe_dYLo59LerAJSvbgPTGXS_bEquj0wrfTQXGWdUdBTHBAbe2QV4dD5WQtZWQQhWU18Q186tfZLA2WL0fpjljnLskmJF6Fsk_WyRYur102_Oivpzj2tADjniYbWbGMf4-8TidDGXH3JQdU/w552-h367-no/Faceblog+Evolutions+%25288%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqwGiNZ0yX1PVQnZzDVcDAH7RJfYGO-az7AGk31qofQN_Q9ent2bygeYT-2XmUALCa5St2I_3yc08aSxiehvZLnH3Z8NGbwFA8LZ8Sn7Jbd00R-wB3LubQohi_E8yrI2qGwLHftbHps4WW/s100-no/Gallery+Faceblog+Evolutions+%25289%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHcdh-NgahJB99QMBRHxOU-WEfDMSr5rA-CtUg1gwzczgbLA6O5XTWGCfdDwKLtVQBE8oWNTHwSc2DD6c7AvhGA2KJ72hQPMalqGvHMEi0cmPDD-5AvFQt9lpZecEcvumIG_b3t3NCMiE2/w552-h367-no/Faceblog+Evolutions+%25289%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7e6Ql74GmbaxtncY025ii0doJKtCnXdzjKUjgcZyj5I-XUrLZCABzZ45VMQkzK6hly7oD01aLXMmi4DK6BmXSjJSAWzM1SjDlZ4wwQIpBO6m17umvWRMVZ8wiYsz-X_-cCJFF3iSKrWms/s100-no/Gallery+Faceblog+Evolutions+%252810%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn7CrAYnYgV-V6yB2FBu4pDqvu8_09MRqPp29QgsAOHuFFtlSRCKukZiUiJ8a2z5hq7WgvomaidZU4selqod6BNx38JWd56Nv8MzpV1zbyX0YsgS7A5e47gP2SXlZTJF1a6ski9b272BcN/w552-h367-no/Faceblog+Evolutions+%252810%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm-cExxvfJIeGIyqYdeaNk55efNI85ooFtds6-ZroLLeMGZqwDkyIREYnIT3vL7EWTECRvbaE_POb1fTFJHiPMvoFmeLydpyen-Hkcpwo-sS6QblGxJD2fmEaSSBjC6sTuqhMWnob_18I0/s100-no/Gallery+Faceblog+Evolutions+%252811%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4MJJ4UP2Ta0t8RyThVctnUQyY7lbl1-MYBQC1YDS4JO8zGmaM7akLjNrPDnNMF1pVZE0-l4pyOvUM0Ba9Isb7DhSuAXl0Yh72nwHauvVqOBHr8DmqH8bwfEHLc8z1e22RhgXZ2KfNeAEl/w552-h367-no/Faceblog+Evolutions+%252811%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCNBPSWe4dY2pGbE9xXr0wlgZ2IYZ9jErVAAC_mt54WE9qRePx7zXt7uoHpb3NFcrVcCrqAKEhzM8ag4AnKNFS4hTNqYU1BDwGpwnPsXZQ48xNL_8tcJrCGPL7c6HXO9Uigo1TcpA55vzo/s100-no/Gallery+Faceblog+Evolutions+%252812%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivZQ03OcgLhmKzmh-okv9bQZP4ZeA8iqyGzjDQ7DeN4C6IdL0EG9e9tt4xF1dvjioxcek_YwP4cpk2nznnR0BxXhj6kOXNcrZVmh27dO3i4GY8yMKXYRXNbWDmuCE-zZbrN1t9Kefsfgdt/w552-h367-no/Faceblog+Evolutions+%252812%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN5TG45Qq_-NcN-oa-t-YRYK8NTGRzvXv4Nk4l4rCmJbC1IBdSFw74A0x1y0Z_HFUVf7r2zNb3Xu5jBslzGOppOHTJxBiyrqXyOjhrf7i8f6iTM-wjeCIWyjdpJR1EYyCuiKnHOC0Y3V8p/s100-no/Gallery+Faceblog+Evolutions+%252813%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRZMkAbR0URYmJghDkwSlXyEZUV-59byA157rbdAcvf8IZx7kiQsAJe50CPoXZhNVc1LYG6Xu3I0jdAWE823Kzg4VgIj_s5KqFGPX18ebDhACR56egaqvccEbsC0HFNPxapkyWR_zJQWlz/w552-h367-no/Faceblog+Evolutions+%252813%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhPKwlDKVh8nZzVUDzaqZrn_DGMaljJERT2TwI3AvQ_KnaxfleltHn1U-GBabQ7bycWiaW_hcFSz1e9FIe8QeleIv_b0hPJalYAfNg10lqVfMsLeGPpA57JPERAPVCYm6LeRfZP_AEg3Rr/s100-no/Gallery+Faceblog+Evolutions+%252814%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj5SRcOwqLdXnsESfgvRHb9bd1AKj8z5AUexTtVfFpHpC2g9W2tFc8caU4jPh6aG4eVDhQJ72sW5rYZJApPMCBE0EwtVCLfLUqynFIl9Kdt768mLySUdxjg8T8edUHmGjmZcZBm9_t3Xom/w552-h367-no/Faceblog+Evolutions+%252814%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf2qbYRxn-T7qRwWPYWJsL6Hp5iBrtuzymc90zIkmgOPZhGY_oTty_yK3iqcs2DKK8gwVadpzIAyg91jn6GQ_Zcp3EzBeXgb81i0PqW7fgWpfuULN-T0OA_2ONYHjOW8oAjfClOA4hqTvh/s100-no/Gallery+Faceblog+Evolutions+%252815%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTWBjO41K1iakFi6nuq-iin4c8skMEnCGrMdQiAb1dgcd4dbfsrQjVA_IWJA4jRZ3vxO3plS42MALe6Yl-9Y51M_8_1Tr2ock5gLjz2SAQPIJ0Ddsb1VoBnn_82aEZEJWManoRR8JpxEoa/w552-h367-no/Faceblog+Evolutions+%252815%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzZrDtnn57yLTPVJnjS8JnMnSsVLxQpHwNMRlQ4g7mQaAmU1EJ_vc-Lo7Ascp6atcYHk-OmaRpG53X9v5k6NwQLIn8tSoBd-zMJ_xcbWvzd6hICX7K8RfGpiE2FiqfvKoA4FuwvY3G8yW5/s100-no/Gallery+Faceblog+Evolutions+%252816%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL8uUXMQA93JkuLcxXbHXYJYI5UkIoX-9eI4uE0UVIMdsW1WZLJSVr5iAGvdbTgUbQoQAhk5f463BkI_bWcCQjPjrY3rb_UzWykkLTsVK2MYoIsLhBy98OZG9nFKAVEcDscv9SfHJcfcfa/w552-h367-no/Faceblog+Evolutions+%252816%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2UusSEXQ4FN4Sv9J8LJvM2_ML4zc6JYiJMlmLvmUtMIaMhzqPoaiV6wXPqxT1UlUS46KYdDKs_ySaMjYKmifrTwjLV9piz-kAIORNrhimQnX5gL2uoN4nhjPoL1x3AnIlEy7jULKjNsKu/s100-no/Gallery+Faceblog+Evolutions+%252817%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-CO0BgMDiHVacn0Hshbmc-OkSrt-mtrAusu6TWGUZAYax5NCXsxh52xEAnYIuTHQdFs5jsaz4kkTPvKe3LHdlL8PaoFsKQLOV86FMohgTvA5dWdIG-ow4fy9Xq8-EsM_bBVDD-S9arKBX/w552-h367-no/Faceblog+Evolutions+%252817%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0M14LVJRb4klZ_3XhafY0tywT8hev_xa9poNSZdyIGwOBh3fgRZrO3MB6_nG_hWwcW2lUZOauNthOPeQyP7waPce9vWeP4zr-sfaoiVV7cNYiCwdcqCQctIi5GyFEScEOKTj0xK2uBV6n/s100-no/Gallery+Faceblog+Evolutions+%252818%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAG4bVKSJ3KkKOGaV9K_PVaYLld5kHyoDxon-ID8essdB53I1rCq-vORZX_Tw6eftgdD-iIxLYZC6Ipf8Qu8ArdAp5v865yeQxjNw1k7UPwBbpDFFnhgHBeQHcoLigbS-ezCgyoSfKKnxl/w552-h367-no/Faceblog+Evolutions+%252818%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg04HG7IfiMc76p8Du3lZyM_itVqMZcgIZyGvubOi8V2H9MB7c18CZt43dOy9w2Fkd295CJLHbxZOUQcdn8AeZwmFVxYf7XdcPtmpMWPTxcZSXS_CbGRW-V2FyFtwxKbCbNuEXGlz4-V4Bx/s100-no/Gallery+Faceblog+Evolutions+%252819%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZqGp11sAGEQwiCrJHW9ud74Op_hpVyDQUGFajP75B1eXHJORk2TlNMMd-F_HQ4oYizw0u0eXW-ayZP0y8XFeBKcOx0naQlY58qoOUFPmbqqrVot1sP-ECc1sgTMJxfemaofH0zUzcrqdh/w552-h367-no/Faceblog+Evolutions+%252819%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim-OEO4ILD4ATmhPJT_e2ZhqA2Yuet425a6Yc7gzsSfJ6BS1_IZ4xvEzqG980T43nA1S8L4A_o-h6iYBB2uLxCkf4Nb8ZZdTa0nYtYsvMv-aSA9hiECl5qOcoWrjhFOBKW8FZ9g0pcOTyl/s100-no/Faceblog+Evolutions.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtoFP7Lh3GzAmr6O586TrBDR8Sb2h0SBiITQsDOKwyec7MpinqjZwJu16rZ8oFr6gvbDpg0QADRN2meLn_BSqnIV8vpHjiQyy5W4-ZfQZs_S7F1wHWC3NQfGXJbgT2lD8T04WN4JliQFDV/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.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHcdh-NgahJB99QMBRHxOU-WEfDMSr5rA-CtUg1gwzczgbLA6O5XTWGCfdDwKLtVQBE8oWNTHwSc2DD6c7AvhGA2KJ72hQPMalqGvHMEi0cmPDD-5AvFQt9lpZecEcvumIG_b3t3NCMiE2/w552-h367-no/Faceblog+Evolutions+%25289%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7e6Ql74GmbaxtncY025ii0doJKtCnXdzjKUjgcZyj5I-XUrLZCABzZ45VMQkzK6hly7oD01aLXMmi4DK6BmXSjJSAWzM1SjDlZ4wwQIpBO6m17umvWRMVZ8wiYsz-X_-cCJFF3iSKrWms/s100-no/Gallery+Faceblog+Evolutions+%252810%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn7CrAYnYgV-V6yB2FBu4pDqvu8_09MRqPp29QgsAOHuFFtlSRCKukZiUiJ8a2z5hq7WgvomaidZU4selqod6BNx38JWd56Nv8MzpV1zbyX0YsgS7A5e47gP2SXlZTJF1a6ski9b272BcN/w552-h367-no/Faceblog+Evolutions+%252810%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm-cExxvfJIeGIyqYdeaNk55efNI85ooFtds6-ZroLLeMGZqwDkyIREYnIT3vL7EWTECRvbaE_POb1fTFJHiPMvoFmeLydpyen-Hkcpwo-sS6QblGxJD2fmEaSSBjC6sTuqhMWnob_18I0/s100-no/Gallery+Faceblog+Evolutions+%252811%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4MJJ4UP2Ta0t8RyThVctnUQyY7lbl1-MYBQC1YDS4JO8zGmaM7akLjNrPDnNMF1pVZE0-l4pyOvUM0Ba9Isb7DhSuAXl0Yh72nwHauvVqOBHr8DmqH8bwfEHLc8z1e22RhgXZ2KfNeAEl/w552-h367-no/Faceblog+Evolutions+%252811%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCNBPSWe4dY2pGbE9xXr0wlgZ2IYZ9jErVAAC_mt54WE9qRePx7zXt7uoHpb3NFcrVcCrqAKEhzM8ag4AnKNFS4hTNqYU1BDwGpwnPsXZQ48xNL_8tcJrCGPL7c6HXO9Uigo1TcpA55vzo/s100-no/Gallery+Faceblog+Evolutions+%252812%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivZQ03OcgLhmKzmh-okv9bQZP4ZeA8iqyGzjDQ7DeN4C6IdL0EG9e9tt4xF1dvjioxcek_YwP4cpk2nznnR0BxXhj6kOXNcrZVmh27dO3i4GY8yMKXYRXNbWDmuCE-zZbrN1t9Kefsfgdt/w552-h367-no/Faceblog+Evolutions+%252812%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN5TG45Qq_-NcN-oa-t-YRYK8NTGRzvXv4Nk4l4rCmJbC1IBdSFw74A0x1y0Z_HFUVf7r2zNb3Xu5jBslzGOppOHTJxBiyrqXyOjhrf7i8f6iTM-wjeCIWyjdpJR1EYyCuiKnHOC0Y3V8p/s100-no/Gallery+Faceblog+Evolutions+%252813%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRZMkAbR0URYmJghDkwSlXyEZUV-59byA157rbdAcvf8IZx7kiQsAJe50CPoXZhNVc1LYG6Xu3I0jdAWE823Kzg4VgIj_s5KqFGPX18ebDhACR56egaqvccEbsC0HFNPxapkyWR_zJQWlz/w552-h367-no/Faceblog+Evolutions+%252813%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhPKwlDKVh8nZzVUDzaqZrn_DGMaljJERT2TwI3AvQ_KnaxfleltHn1U-GBabQ7bycWiaW_hcFSz1e9FIe8QeleIv_b0hPJalYAfNg10lqVfMsLeGPpA57JPERAPVCYm6LeRfZP_AEg3Rr/s100-no/Gallery+Faceblog+Evolutions+%252814%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj5SRcOwqLdXnsESfgvRHb9bd1AKj8z5AUexTtVfFpHpC2g9W2tFc8caU4jPh6aG4eVDhQJ72sW5rYZJApPMCBE0EwtVCLfLUqynFIl9Kdt768mLySUdxjg8T8edUHmGjmZcZBm9_t3Xom/w552-h367-no/Faceblog+Evolutions+%252814%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf2qbYRxn-T7qRwWPYWJsL6Hp5iBrtuzymc90zIkmgOPZhGY_oTty_yK3iqcs2DKK8gwVadpzIAyg91jn6GQ_Zcp3EzBeXgb81i0PqW7fgWpfuULN-T0OA_2ONYHjOW8oAjfClOA4hqTvh/s100-no/Gallery+Faceblog+Evolutions+%252815%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTWBjO41K1iakFi6nuq-iin4c8skMEnCGrMdQiAb1dgcd4dbfsrQjVA_IWJA4jRZ3vxO3plS42MALe6Yl-9Y51M_8_1Tr2ock5gLjz2SAQPIJ0Ddsb1VoBnn_82aEZEJWManoRR8JpxEoa/w552-h367-no/Faceblog+Evolutions+%252815%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzZrDtnn57yLTPVJnjS8JnMnSsVLxQpHwNMRlQ4g7mQaAmU1EJ_vc-Lo7Ascp6atcYHk-OmaRpG53X9v5k6NwQLIn8tSoBd-zMJ_xcbWvzd6hICX7K8RfGpiE2FiqfvKoA4FuwvY3G8yW5/s100-no/Gallery+Faceblog+Evolutions+%252816%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL8uUXMQA93JkuLcxXbHXYJYI5UkIoX-9eI4uE0UVIMdsW1WZLJSVr5iAGvdbTgUbQoQAhk5f463BkI_bWcCQjPjrY3rb_UzWykkLTsVK2MYoIsLhBy98OZG9nFKAVEcDscv9SfHJcfcfa/w552-h367-no/Faceblog+Evolutions+%252816%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2UusSEXQ4FN4Sv9J8LJvM2_ML4zc6JYiJMlmLvmUtMIaMhzqPoaiV6wXPqxT1UlUS46KYdDKs_ySaMjYKmifrTwjLV9piz-kAIORNrhimQnX5gL2uoN4nhjPoL1x3AnIlEy7jULKjNsKu/s100-no/Gallery+Faceblog+Evolutions+%252817%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-CO0BgMDiHVacn0Hshbmc-OkSrt-mtrAusu6TWGUZAYax5NCXsxh52xEAnYIuTHQdFs5jsaz4kkTPvKe3LHdlL8PaoFsKQLOV86FMohgTvA5dWdIG-ow4fy9Xq8-EsM_bBVDD-S9arKBX/w552-h367-no/Faceblog+Evolutions+%252817%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0M14LVJRb4klZ_3XhafY0tywT8hev_xa9poNSZdyIGwOBh3fgRZrO3MB6_nG_hWwcW2lUZOauNthOPeQyP7waPce9vWeP4zr-sfaoiVV7cNYiCwdcqCQctIi5GyFEScEOKTj0xK2uBV6n/s100-no/Gallery+Faceblog+Evolutions+%252818%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAG4bVKSJ3KkKOGaV9K_PVaYLld5kHyoDxon-ID8essdB53I1rCq-vORZX_Tw6eftgdD-iIxLYZC6Ipf8Qu8ArdAp5v865yeQxjNw1k7UPwBbpDFFnhgHBeQHcoLigbS-ezCgyoSfKKnxl/w552-h367-no/Faceblog+Evolutions+%252818%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg04HG7IfiMc76p8Du3lZyM_itVqMZcgIZyGvubOi8V2H9MB7c18CZt43dOy9w2Fkd295CJLHbxZOUQcdn8AeZwmFVxYf7XdcPtmpMWPTxcZSXS_CbGRW-V2FyFtwxKbCbNuEXGlz4-V4Bx/s100-no/Gallery+Faceblog+Evolutions+%252819%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZqGp11sAGEQwiCrJHW9ud74Op_hpVyDQUGFajP75B1eXHJORk2TlNMMd-F_HQ4oYizw0u0eXW-ayZP0y8XFeBKcOx0naQlY58qoOUFPmbqqrVot1sP-ECc1sgTMJxfemaofH0zUzcrqdh/w552-h367-no/Faceblog+Evolutions+%252819%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim-OEO4ILD4ATmhPJT_e2ZhqA2Yuet425a6Yc7gzsSfJ6BS1_IZ4xvEzqG980T43nA1S8L4A_o-h6iYBB2uLxCkf4Nb8ZZdTa0nYtYsvMv-aSA9hiECl5qOcoWrjhFOBKW8FZ9g0pcOTyl/s100-no/Faceblog+Evolutions.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtoFP7Lh3GzAmr6O586TrBDR8Sb2h0SBiITQsDOKwyec7MpinqjZwJu16rZ8oFr6gvbDpg0QADRN2meLn_BSqnIV8vpHjiQyy5W4-ZfQZs_S7F1wHWC3NQfGXJbgT2lD8T04WN4JliQFDV/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 :)
EmoticonEmoticon