Cara Membuat Gallery Foto di Postingan Blog

Kali ini kami akan membahas , bagaimana tentang membuat foto gallery di dalam postingan . untuk lebih jelasnya   tidak usah berlama - lama kita langsung praktekkan saja ;

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?

Tweet