Cara Membuat Gallery Foto di Blogspot
Friday, November 23, 2012
Edit
Tips blog kali ini yang ingin saya share adalah cara membuat gallery foto di blog blogspot. Cara membuat gallery foto di blogspot tentu sangat berbeda dengan membuat galllery foto di wordpress, kalau di wordpress sobat tinggal upload lewat plugin yang telah disediakan, tapi di blogspot sobat harus menggunakan script yang di edit lewat halaman postingan.Gallery foto ini berguna buat sobat yang ingin menampilkan foto-foto dalam postingan dengan bentuk sejajar. Seperti apa ilustrasi bentuknya ? Lihat contoh hasilnya dibawah ini :
Cara membuat gallery foto :
1. Upload foto ke hosting (picasa, atau photobucket, atau yang lainnya)
dapatkan url foto yang telah diupload
2. Bikin postingan dalam mode HTML (bukan Compose)
3. Masukkan kode di bawah ini pada postingan
4. Publish dan lihat hasilnya
Catatan Penting :
Semoga Bermanfaat.
Cara membuat gallery foto :
1. Upload foto ke hosting (picasa, atau photobucket, atau yang lainnya)
dapatkan url foto yang telah diupload
2. Bikin postingan dalam mode HTML (bukan Compose)
3. Masukkan kode di bawah ini pada postingan
4. Publish dan lihat hasilnya
<div class="snap_preview">
<div>
<span style="color: #0066ff;font-size: medium;">Seribu Wajah Gayus</span></div>
<style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:25%;} .gallery-caption { margin-left: 0; }</style>
<div class="gallery snap_nopreview">
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9sOJKihSq7EFGkAOHBfXZ7PmQQn1D0pLUHy8WBXMhm8fALhCLxMAvFbazMwflSloFw5vQ_zSHluhNy-embxS0WVDCpW-S7aINV23NWKeVDINfCeqaK5a_HtVlW8Uk02Z232oMxOMq8O4/s320/atronout.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX-OCsTthMoJeqKlLF-nUhRVBQcF5_Z-Gg2NkvAwi2VdGeMKkb5wQ8qF0xvir9T5W5R6LDp0kHccWX3kpDAE6peTHa10F7cLJB-ndZkKVR9tJTnczLt0JnIzfAjfY3Af3-G3zFyNuAkh4/s320/bieeen.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0xV50dPv7ZQakOQ4Z33MMXgSvQyX601zjl8aSW6HqX5SJbLrII5ezu8H8obfkHgrsrMjslIcFP_Gl2jpUH0o9_emBVej3dcX_rK926taIcslehKr9YtX6d20qW58vdBlVMr88EyjPrs4/s320/blankon.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-yzKmrrSIuc4-w_9Jc3JkyFqTV5UMgFpF64-V1tQOoEUDfRz_wwpL6TiD_Rkh_Xf9c1LRYMOHBUTEJz7mNoQVKuoDoSv2tVX3GCIpYPtidi-I4lq6xGfdniC8heOOPcRrWaQgHNtrADc/s320/boxing.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAOHC-F-XtqKoEzz6NSyIrkI84ui0FQ3_EONOirPU4EuZA0hWGNXpbNlJJOvr-AHKRgaH23SO1YHSWXWPzeA9oRIsKNcn76gs-3TKdQqEuPqCL1fhyJvA5xMqvWqxpMu6gB4RFTg2V8fQ/s320/duits.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIUyuBh9FaSZX5JYdERs1VtnhE882xZ48DuBtXc5w0Pvm0s7xyXfos7pZ6JEFBK756QSlO_hQkW8epqstRbxNG4AwrqYc8kV6ufZN24IlkIe-pOrO9SI3TAQrcrHYLAs1mqksrZxCohEg/s320/goyang.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWdjXSU6GWzx-aWkYZzxd0j5G7G04GjKS_LfdJfvLOYMwRs1clJ9RJ1mFEbwtQ343ud3OyMehzNUeRqaDh3cXjZ7h37CmtuGx-ZtG7IgmfQCUfz0He5tUKKjutK4dDGx6tc9G_SYD8a8w/s320/hormat.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTP9uLhm34fPIJvIPjpGHnuMBeka1LH-SOJ9nD58159ZuUx1dSFO2wvERTKprVNn_AfCXScFInGoLNmPb4bXeOjDgyL5y0_E76KVcsyvwUu5EpX-Np2jyGc8gy-jx5pWwxzRE3wH7SMbU/s320/jendr.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyKFZzKyEFzOiu-PM88lod8ajwV9d7KM-qA_YUAWRakYRchY0hb2IjBitbjQ14BH-Bjnc2eHudrAXcb7bNC791-aEF7z5HUJIRyzO66ZVcUNmN5oR9_rsWIy9HkuAPOG_hFhtsRqfe81Q/s320/koran.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibRw4OL5-xgU43zpvn4rjdxlK55Y61RgKpnoUvGBzRM_R7EHUuoBjScTAFlU80Wv70oNYInp4r8DoJ5i6gMp6UlekVmLzn-wq196oagSOjk36SsHiHPkinn_Q4dfO2GDsKN5l4UAToFrI/s320/samar.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjnmLtJFfl3cvg3qx_tkMXYi2QepB_nogPJ1ub18ltr3JUybXhZwk3zRSHsLUcpYCvSKx3xzsuUa7_sG4aDiSFcnJyQJLHVrbjT7qSalxO-DqEsEGNuE7QeVLxSBZURgDNZTCelXrr_h4/s320/seribu.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiomy-e-Io9SHKUYGHk6eiK_UxO_X7GxwWiUHCwIUXUkhU5fec7P9SMoWCuD5c91xnsTYW-xcrb6uc71GKYzdyG__mr5wNQouuNHN73pRN8AzNbtNt886BUpXcyoQv2s8U8pAx2Zwnbark/s320/silat.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjykJkVDr_WngqnOgiONHVH3ZX6dVf6NY22LEyINk8jixJEXWPwXt5Y30DLEvXY_8pWcWmj9S8xSbik8hpBMiRwKRk9Yt15jqPOVxXXccGW20idcxwEqfIWAJsOGotiIq4CfDIaAG4iDJQ/s320/wig1.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhnooEIht84y9t7cbi5QhHVP4IRP4pCk34JVMnDtvmozBdMQzNz1loVocdTX3tUFraqpfl5uewK3mcHMmw7r83aopsFsns-QZbltS0yXhFlW0l6_z8EMsSvLDPlhnbfSACciCNRHcsaXo/s320/tenis.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVrowyZCxmojwAJs3gWrLH63kOxaMAl-icMK9R7sjBjGsFS8usbEKMDc73NvHgm9J4PNpAjiBuaU7icd4_4mY6MsSE2Aidc9d7caYKlOvUaEei-Tt7G9U7LA_Aq00L1qu6DUU2t4fuTqc/s320/santai.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP5XJdVdTGeyF-6MArhNu_5lFU2V76HbkxsnbNLu_M-G_DKPaoKVxo4DVj60kpdTe42FTOPQO6V3K9cbLdMTHpTefAPO5GY4-3h0bX2Ur2M9eSbWt21_YCzxYrQuwiKBwg94zxhtSTVkI/s320/kacamata.jpg" width="200" /></a>
</dt>
</dl>
</div>
</div>
Catatan Penting :
- Kode yang berwarna merah adalah url foto yang didapatkan dari hosting setelah foto diupload.
- Ukuran foto bisa diganti dengan merubah angka 150 dan 200.
- Angka 25% adalah prosentase untuk membuat foto berjajar menyamping 4 kolom (rumusnya: 100% dibagi 4 = 25%)
- Bila ingin menambah jumlah foto tinggal copy saja mulai kode <dl class="gallery-item"> sampai dengan kode </dl> demikian pula jika ingin menguranginya.
- Dalam menuliskan kode harus benar-benar rapat, jangan menggunakan enter, bila masih terdapat ruang kosong maka fungsikanlah backspace untuk menghapusnya sehingga kode menjadi rapat.
Semoga Bermanfaat.