Cara membuat foto gallery di posting blog blogspot

Cara membuat foto gallery di posting blog blogspot - Selamat malam kawanku sekalian, sebelum saya akan tidur saya akan sempat-sempatkan untuk menulis sebuah artikel. Ini merupakan tutorial yang bagus bagi anda yang suka pamer foto menjadi sebuah gallery foto hehe....!!!

Caranya tidak begitu ribet, namun untuk pemula mungkin sedikit bingung, namun saya akan mencoba untuk menjelaskan sejelas mungkin agar anda yang termasuk sebagai pemula di blog bisa mendalami tutorial ini. Sebelumnya saya akan kasih sreenshot foto gallery yang sudah saya buat, atau bisa lihat Demonya di sini.

Anda sudah lihatkan Foto gallery di dalam posting, dan sekrang bagaimana cara membuatnya? yuk mudah kog. Langsung di simak yah.

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>

 Penjelasan : 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. Apabila sudah selesai pilih saja, Terbitkan entri.

Bagaimana mudah kan carnaya, maaf apabila kata kata saya berantakan. maklum tidak bakat soal tulis menulis. semoga tutorial ini bermanfaat. Baca juga membuat box follow twitter dan membuat tombol atau button follow twitter. Semoga semua bermanfaat.