CARA MEMBUAT GALERRY FOTO DI BLOG

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Tips blog kali ini adalah cara membuat gallery foto di blog. Gallery foto ini berguna buat unyuk menampilkan foto-foto dalam postingan dengan bentuk sejajar. Bagaimanakah bentuk visualnya ? Lihatlah contoh gambar di bawah ini, atau buka langsung Top Menu Fotografi yang ada di blog ini. Misalnya, Menu Fotografi > Eksperiment.

Tampilan Galerry Foto

 Cara membuat gallery foto :

1. Upload foto ke hosting (picasaweb.google.com, atau photobucket, atau yang lainnya), kemudian dapatkan url foto yang telah diupload.
2. Bikin postingan dalam mode HTML (bukan Compose).
3. Masukkan kode di bawah ini pada postingan.
4. Klik pratinjau untuk melihat hasilnya, jika sudah sesuai klik publikasikan.

<div class="snap_preview">
<div>
<span style="color: #0066ff;font-size: medium;">Fotografi Eksperiment</span></div>
<style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:33%;} .gallery-caption { margin-left: 0; }</style>
<div class="gallery snap_nopreview">
<dl class="gallery-item">
<dt class="gallery-icon"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSXQPeL4MLkS04bB5FrMpKyh_Su3Xlx73yf34G8wcLJl6Yqr6x8SQWHJNhEGjUPfTZwAtpSfMfBn0gd76UGRBkRrzNNeMhCx6eerAUhtl_FRjn_x3CdU88DSo0A62N1tMKZpFKZfRjufU/s640/IMG_1230aa%2520%2528FILEminimizer%2529.jpg" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSXQPeL4MLkS04bB5FrMpKyh_Su3Xlx73yf34G8wcLJl6Yqr6x8SQWHJNhEGjUPfTZwAtpSfMfBn0gd76UGRBkRrzNNeMhCx6eerAUhtl_FRjn_x3CdU88DSo0A62N1tMKZpFKZfRjufU/s640/IMG_1230aa%2520%2528FILEminimizer%2529.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie-Flv7j79rkOYpTxMpm3pTjrLjrhZw4dhrLPc0VQvPSDHRtEd85r0FYZ0tiCVDDa2dGDDxxu4mbpXWIXU9VPOygVwP5BOkbhhKRUJgjpHlSZ6eQUDNbztM0fH3Z9QU4RAPvafWgaKmQ4/s640/IMG_1357a%2520%2528FILEminimizer%2529.jpg" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie-Flv7j79rkOYpTxMpm3pTjrLjrhZw4dhrLPc0VQvPSDHRtEd85r0FYZ0tiCVDDa2dGDDxxu4mbpXWIXU9VPOygVwP5BOkbhhKRUJgjpHlSZ6eQUDNbztM0fH3Z9QU4RAPvafWgaKmQ4/s640/IMG_1357a%2520%2528FILEminimizer%2529.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpO-Ku0S6FFFTm_Xv0mXhodYnwtaukWerVi08HAsAtYoTkHn__JSUQhMiPhgpzbNihtg97yaKX_vYVVxTmy46f9QkYJn3XmqyZ-hXRvMp34zHaQnmc_7fWLY1VcwECQ7925RWOVPcm2Dc/s640/IMG_1373%2520%2528FILEminimizer%2529.jpg " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpO-Ku0S6FFFTm_Xv0mXhodYnwtaukWerVi08HAsAtYoTkHn__JSUQhMiPhgpzbNihtg97yaKX_vYVVxTmy46f9QkYJn3XmqyZ-hXRvMp34zHaQnmc_7fWLY1VcwECQ7925RWOVPcm2Dc/s640/IMG_1373%2520%2528FILEminimizer%2529.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtJud__1AnpRTqO_NzjsJLBMPGewjqhBnuK6QtNkXSGD1dd0J-BD7MH_HsUH31lqiJlARfr_JffsSI8iZXiyhMS6i7bByz-HABcAeEaPjuA5B3YnxIEBa0MJ4V9MM65MNf8IrRb0xOu_M/s640/IMG_1410%2520%2528FILEminimizer%2529.jpg " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtJud__1AnpRTqO_NzjsJLBMPGewjqhBnuK6QtNkXSGD1dd0J-BD7MH_HsUH31lqiJlARfr_JffsSI8iZXiyhMS6i7bByz-HABcAeEaPjuA5B3YnxIEBa0MJ4V9MM65MNf8IrRb0xOu_M/s640/IMG_1410%2520%2528FILEminimizer%2529.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWVmTdats80fB0H8tXeWhj4qJ_eXSzZeJFCcTGvFfObocwV9T5PQbG_VcQ-JODL2rCetDjN-DrEZRrSH9I6v8Q8jxTNvW57Fqk2uQPSSI20tXRg2AXB0SKiZhbgJ8KSOsosGf3SrJj_Q4/s640/IMG_1415%2520%2528FILEminimizer%2529.jpg " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWVmTdats80fB0H8tXeWhj4qJ_eXSzZeJFCcTGvFfObocwV9T5PQbG_VcQ-JODL2rCetDjN-DrEZRrSH9I6v8Q8jxTNvW57Fqk2uQPSSI20tXRg2AXB0SKiZhbgJ8KSOsosGf3SrJj_Q4/s640/IMG_1415%2520%2528FILEminimizer%2529.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJxZZ8VS781oqAkXvg_-T3gcUUpvVAK0KXELeRB8UKx6sud5F45pdhQeqNvlvcZKMEUUY4AzzCzNvpgsSBXCPmG2PZsm63UKmwd87KJ65Q6hHyffcjV19qrTyoDy5b44zv-HN6IFPJ63E/s640/IMG_1420%2520%2528FILEminimizer%2529.jpg" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJxZZ8VS781oqAkXvg_-T3gcUUpvVAK0KXELeRB8UKx6sud5F45pdhQeqNvlvcZKMEUUY4AzzCzNvpgsSBXCPmG2PZsm63UKmwd87KJ65Q6hHyffcjV19qrTyoDy5b44zv-HN6IFPJ63E/s640/IMG_1420%2520%2528FILEminimizer%2529.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfoHYVSxJlf19Z6aGvXGXJNzqHUNttTbg-ys3OF1LrXqbLoKP4Y7xiJnx6YzTcP0XTqqlb2PRPWuC8STzxWFJxJJ4971brR7JJ-CM-IxxrA3vvSVTTNZsspnLoNhdfw5qd_ik8b99g-b4/s640/IMG_1422%2520%2528FILEminimizer%2529.jpg " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfoHYVSxJlf19Z6aGvXGXJNzqHUNttTbg-ys3OF1LrXqbLoKP4Y7xiJnx6YzTcP0XTqqlb2PRPWuC8STzxWFJxJJ4971brR7JJ-CM-IxxrA3vvSVTTNZsspnLoNhdfw5qd_ik8b99g-b4/s640/IMG_1422%2520%2528FILEminimizer%2529.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPK787Nw_4TZ0I-epfZqfAkYY_0CE8Ku4H5YMsCGkXpiVfoACWDDX_92A2eb1mZ6rqM1K89jJ2eIc4pOUIN4EM_WDn3SLHofapxGFzHvw9UgfbRNxP68OkPuhRWLUyG_uiwDcCCpH3v9M/s640/IMG_1430%2520%2528FILEminimizer%2529.jpg" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPK787Nw_4TZ0I-epfZqfAkYY_0CE8Ku4H5YMsCGkXpiVfoACWDDX_92A2eb1mZ6rqM1K89jJ2eIc4pOUIN4EM_WDn3SLHofapxGFzHvw9UgfbRNxP68OkPuhRWLUyG_uiwDcCCpH3v9M/s640/IMG_1430%2520%2528FILEminimizer%2529.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLU4boEdtcHnE_AgyO_VhPSt68a1h5Vkgkb9SX6_i6OGsXTTPb4YOuBf2KjPnPd3bmw8VshmH-BS2La3N8OzVmTgmQuE7EonxpOYnMVYy-GcFGT0EU78Wg9ZvhJNb8Oy_IJ7yHNAUPqyE/s640/IMG_1438%2520%2528FILEminimizer%2529.jpg " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLU4boEdtcHnE_AgyO_VhPSt68a1h5Vkgkb9SX6_i6OGsXTTPb4YOuBf2KjPnPd3bmw8VshmH-BS2La3N8OzVmTgmQuE7EonxpOYnMVYy-GcFGT0EU78Wg9ZvhJNb8Oy_IJ7yHNAUPqyE/s640/IMG_1438%2520%2528FILEminimizer%2529.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivNRz4Vsx6zWlTl8ys7DrAzc6MBCcn8zGQSAvwMLMINCrdMW-JAd80HvXV2K6oZVucYfjLvFlOf4NGGWHqX_jlXtS2m-Ra8vSh_-YCfMJOgzJ0Fintd1DHSLgDNXFCYiQ0oChkQI8LqQY/s640/IMG_1444%2520%2528FILEminimizer%2529.jpg " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivNRz4Vsx6zWlTl8ys7DrAzc6MBCcn8zGQSAvwMLMINCrdMW-JAd80HvXV2K6oZVucYfjLvFlOf4NGGWHqX_jlXtS2m-Ra8vSh_-YCfMJOgzJ0Fintd1DHSLgDNXFCYiQ0oChkQI8LqQY/s640/IMG_1444%2520%2528FILEminimizer%2529.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6usUWJsR8Lj15E6Agj9P0ZMYzfw4VoTscEDg-XI_OVTbWRiKREbokHsrr2skureEMkicDrginiix7Vo5Ya-EpbkAuvyTz6xxf2EF3SRvyY-Zwe0Gx3BNpeVeqkfr-k6ezQHjELZbC8bU/s640/IMG_3966%2520%2528FILEminimizer%2529.JPG" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6usUWJsR8Lj15E6Agj9P0ZMYzfw4VoTscEDg-XI_OVTbWRiKREbokHsrr2skureEMkicDrginiix7Vo5Ya-EpbkAuvyTz6xxf2EF3SRvyY-Zwe0Gx3BNpeVeqkfr-k6ezQHjELZbC8bU/s640/IMG_3966%2520%2528FILEminimizer%2529.JPG" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFq5eaY270wK3siWfE_1xOz1K6iC_PPaUV96QEgcYksA5m2EBcVr1rdo9yK-l1qSlTPSnVyIccPb5QCjgvCG53iHontQ-Vn_weabvGl4u-RcCP2peccpaQcy6IqQcGe4_5nW3rn3tWk_A/s640/IMG_5245%2520%2528FILEminimizer%2529.JPG" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFq5eaY270wK3siWfE_1xOz1K6iC_PPaUV96QEgcYksA5m2EBcVr1rdo9yK-l1qSlTPSnVyIccPb5QCjgvCG53iHontQ-Vn_weabvGl4u-RcCP2peccpaQcy6IqQcGe4_5nW3rn3tWk_A/s640/IMG_5245%2520%2528FILEminimizer%2529.JPG" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD_e_E7HneocycIE62o6SSrZ4SHq1hKN4MSSsTjguHexAebn69YF9g8svNsHMe2Y9R_hKSrp1nbNMzSJul0Zyf8bOQ4kEE75I-GCXIMpuiqw7AYsQxoLc2mEEyoYrbkrnCvHxz5zs4YGk/s640/IMG_4004%2520%2528FILEminimizer%2529.JPG" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD_e_E7HneocycIE62o6SSrZ4SHq1hKN4MSSsTjguHexAebn69YF9g8svNsHMe2Y9R_hKSrp1nbNMzSJul0Zyf8bOQ4kEE75I-GCXIMpuiqw7AYsQxoLc2mEEyoYrbkrnCvHxz5zs4YGk/s640/IMG_4004%2520%2528FILEminimizer%2529.JPG" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3aBL80RqVc_POF-PsuRu66cPwA-33HN8zTIhRq3ttJjSKTNvkGRpiSlWzcGizh0wsytL8zyiYSu_U-AjgKseZe48-FG-RVxG3dUnG3s_Qnu_qS9tnDCxoZFal2ZWp-BgNr5Uh2mIHoLw/s640/IMG_4009%2520%2528FILEminimizer%2529.JPG" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3aBL80RqVc_POF-PsuRu66cPwA-33HN8zTIhRq3ttJjSKTNvkGRpiSlWzcGizh0wsytL8zyiYSu_U-AjgKseZe48-FG-RVxG3dUnG3s_Qnu_qS9tnDCxoZFal2ZWp-BgNr5Uh2mIHoLw/s640/IMG_4009%2520%2528FILEminimizer%2529.JPG" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzuTDm5zuJlPftBvYRv52QSbrZBH9pSALdrtyy9u8Hcfrcy0d8tG29oGcY0bUTG-dZswj0_ChrwwopfReaPUin-06SQoUOQUG_0BjMZiC01yAkyrSg3Jj3-GAnIbJmy3X_cL3kBKSssYQ/s640/IMG_4010%2520%2528FILEminimizer%2529.JPG" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzuTDm5zuJlPftBvYRv52QSbrZBH9pSALdrtyy9u8Hcfrcy0d8tG29oGcY0bUTG-dZswj0_ChrwwopfReaPUin-06SQoUOQUG_0BjMZiC01yAkyrSg3Jj3-GAnIbJmy3X_cL3kBKSssYQ/s640/IMG_4010%2520%2528FILEminimizer%2529.JPG" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSNPG0Ggd5Ksc5Yf9kqSjq59zIjqMJnp4snA523H0nI1Ydf8oxvfxzU5c4UDeI7H_01SvOwzIR9dw1Ps9l7hakL_w8kHzC3umiKaPNGjQXleJ8hEcRaY8AnSNz8lcIu_OYTwWiBy_vruQ/s640/IMG_5244%2520%2528FILEminimizer%2529.JPG" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSNPG0Ggd5Ksc5Yf9kqSjq59zIjqMJnp4snA523H0nI1Ydf8oxvfxzU5c4UDeI7H_01SvOwzIR9dw1Ps9l7hakL_w8kHzC3umiKaPNGjQXleJ8hEcRaY8AnSNz8lcIu_OYTwWiBy_vruQ/s640/IMG_5244%2520%2528FILEminimizer%2529.JPG" width="200" /></a>
</dt>
</dl>

</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaIDGA3RIGZ3zprgo4PHYgN8e_fmPPnkidjXMzepDRf3W5aGqJFzI3Kc3aTdUoGGjwlCSb0fVAXqcpj0p04y_hvG5MK4TYqLcvXxEYZdZGuvcIorEcCs4Si-4wWJlIai7qx298bwpV3mE/s640/IMG_1447%2520%2528FILEminimizer%2529.jpg" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaIDGA3RIGZ3zprgo4PHYgN8e_fmPPnkidjXMzepDRf3W5aGqJFzI3Kc3aTdUoGGjwlCSb0fVAXqcpj0p04y_hvG5MK4TYqLcvXxEYZdZGuvcIorEcCs4Si-4wWJlIai7qx298bwpV3mE/s640/IMG_1447%2520%2528FILEminimizer%2529.jpg" width="200" /></a>
</dt>
</dl>

</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii57wgh76ueBKS8f1S6TTKkUV3zwPH4DKGhcjpAbBwHABfaHvtGYR6Jg8hMLBtUtuJs_JvMvrhBKDe3nI7rRXJWUuivQrTz2ZrbZmxCjPNKxW-ni5uiCKwVYqMeLQj88MSM21kSJaO57g/s640/IMG_4057%2520%2528FILEminimizer%2529.JPG" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii57wgh76ueBKS8f1S6TTKkUV3zwPH4DKGhcjpAbBwHABfaHvtGYR6Jg8hMLBtUtuJs_JvMvrhBKDe3nI7rRXJWUuivQrTz2ZrbZmxCjPNKxW-ni5uiCKwVYqMeLQj88MSM21kSJaO57g/s640/IMG_4057%2520%2528FILEminimizer%2529.JPG" width="200" /></a>
</dt>
</dl>
</div>
</div>

Catatan Penting :

1. Kode yang berwarna merah adalah url foto yang didapatkan dari hosting setelah foto diupload.
2. Ukuran foto bisa diganti dengan merubah angka 150 dan 200.
3. Angka 33% adalah prosentase untuk membuat foto berjajar menyamping 3 kolom (rumusnya: 100% dibagi 3 = 33%) Jika ingin 4 kolom, gunakan 25%.
4. Bila ingin menambah jumlah foto tinggal copy saja mulai kode <dl class="gallery-item"> sampai dengan kode </dl> demikian pula jika ingin menguranginya.
5. Dalam menuliskan kode harus benar-benar rapat, jangan menggunakan enter, bila masih terdapat ruang kosong maka fungsikanlah backspace untuk menghapusnya sehingga kode menjadi rapat.

Demikian tutorial cara membuat galerry foto di blog. Semoga bermanfaat.

Anda baru saja membaca artikel yang berkategori Tips Blog dengan judul "CARA MEMBUAT GALERRY FOTO DI BLOG". Anda bisa bookmark halaman ini dengan URL http://sen1budaya.blogspot.com/2012/04/cara-membuat-galerry-foto-di-blog.html