Membuat Gallery Foto di Postingan Blog

Cara upload photo yang biasa kita pakai untuk postingan blogger memang tidak begitu memuaskan karena gambar yang kita upload hanya bisa diatur center, left dan right saja. Tidak bisa diatur berjejer seperti foto pada album facebook. cara upload foto cara blogger itu tentu saja memakan tempat di blog dan tidak maksimal.

Barusan saya belajar dari website ini http://www.wartabeta.com, dan caranya cukup gampang. Kawan-kawan tinggal menyediakan link url untuk gambar yang akan dipuload, misalnya dari photobucket, picassa atau yang lainnya yang penting itu url valid buat gambar yang akan di upload dan inilah hasilnya.. klik untuk melihat Bagaimana caranya? Langsung deh dipelajari.

1. Login ke blogger.


2. Pilih posting ----> Entri baru

3. Untuk pembuatan foto gallery klik Edit HTML, bukan yang Compose.

4. Copy dan paste code di bawah ini pada posting anda.

<div class="snap_preview">
<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="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
</div>
</div>

Note :

Untuk yang berwarna merah silahkan anda masukkan Url gambar anda, untuk merubah ukuran gambar anda bisa rubah untuk tinggi cari height="150" itu ubahlah angka sesau keinginanmu dan untuk lebar width="200". Dan untuk menentukan berapa gambar yang berderetan bisa anda lihat yang saya warnai hijau, Ubahlah angka yang anda inginkan. 33% terdiri dari 3 deret. Rumusnya 100% : 3 = 33,3333% aku genapkan menjadi 33%. untuk menjadi 4 deret maka rumusnya. 100% : 4 = 25%.

5. Apabila anda ingin menambahkan gambar lagi di deretannya, anda tinggal masukkan di bawah ini, sebelum kode </div> </div> terakhir.

<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>

6. Sekarang silahkan klik terbitkan entri :) Bagaimana hasilnya?