Posted by : Unknown
Monday, 27 May 2013
Karena kodenya panjang sekali maka langsung saja kita mulai membuat gallery foto pada blogger. Dalam hal ini kita mempergunakan 16 buah foto.
Cara pembuatan :
- upload foto ke hosting (picasa, atau photobucket, atau yang lainnya)
- dapatkan url foto yang telah diupload
- bikin postingan dalam mode HTML (bukan Compose)
- masukkan kode di bawah ini pada postingan
- publish dan lihat hasilnya
<div class="snap_preview">Catatan Penting :
<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/AVvXsEgABNNDZfauFBHR8agPg0pSQZThUEFxCfghbWn-6xA4UMHsdTkyn7MozWySN5j8FABG70426NBV7fHxjZXddMQVlMpyrvhZPQM4iLwGUrjNyNkU_y3SSbl7spgmRSSx4Ap0TV2V_d0XSAE/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/AVvXsEhrlHpFR-qDda9wFBIZ5AolaY2rioeWl_bnFL79jD-pMZlNt0PpWMDKost3pV-lKsk1EJMPSvIty7pYOnVn1L5W-ma7GzP9BfjbTTrqwGYZfK4WyksEDCjDnhtf9Q_AzorFcRl7F0jfTf8/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/AVvXsEjbsf4ijj23xBRjc1LgmghK2YrWZcUmgojLHrXKoVykUct9qmcqxt5POdK9wkpwNamtDt-8fKTPvxQNYKeutnc5fLLaEmnN5sH07ZwOadySR0SVLpFJpYQiX7aHeEWDkg5OcWdSEJHZcF4/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/AVvXsEhJ0yI6BwuZ1egfJ9ceULn9MN2oIihU0AtUpHpgkHWdVwjDgrt5DuCLsH8esPj02hR3Q4wVj8995_MIRoA2PRRqD4txOZXSDLfEHW7b4Qiau0D7qm6P4smR_0v4a-5xWgx-DtMVmiDex8s/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/AVvXsEhM-QBstRu-BFMahnjV0JNAnHcNh9t994CgbH-7NomGOPeKvPdSDed6oC7u-yF1yRO5P0lEsWIQGsi6LW9EyLjyrOD9qDhBLBBfv8bB8sP1XdKD1iaIubMChTAwT8NiWfZw26ys84eEJK4/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/AVvXsEiwO5hCdTAEF4qcvOTniA_6D_wyjmmxuZHYWEt-jErrrkyF8r12wN7TMGfRCMPmONB8CUKxKm0hq_LCe-G_ThhnQdDzoqbS-FvaDiaFZBXDKwDi5f1mvuBuXcdAyH5JsjbqgyHdAyDH4a4/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/AVvXsEijlMl6TVU2HmwINxsNx9CnV9oU8kLAqnpkWJVJSrTNTGsErTlm42xCREFBkhwgvJHRlRUvUSNnsYhpKsAl-I2ESY-N5LzsWGzVbuU7Ss-tIXy7q66C5M9smljI-ymRWxy6x87aSDs54hE/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/AVvXsEjfNQ_9eUHmCvRuoNy9gJwOdVwjJo3__hTAXOUVNx3rUO5Z65O5nl7axHeMWJcF8osr3OnI2sTl-q2YSv6bjerZWmNfTH1J7Dgv7WWDuI9PuXj4oCOwcDrYU9hZuA4xNdmv3hhItjjP4YI/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/AVvXsEhWGlJ6JZT3ydmAGhPyfWsC4kiRMy_J8joKcHZb9DhGoNKoGP8EtBT1YnXM7VEOYtBKL__BudSCAl-_7LMgGPKtYfCqQuXKmW7wJWwYy4whgndgwvE6ReMyAYQYUJGQJCfLaVZ0osl6LYk/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/AVvXsEjY0PhTOqGzmMp2ce4_A65aAAr36scI9cdRE2o9F0JiXYYltAuFqMJGUoVdUgmvWniAOQKXg7r4XFUl4phVSOJyLSMx4spU-5GIw41t_g9lpG1QNO3ifRYuUz6bGDnzQW8ZTC5om83m_ZY/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/AVvXsEj0aylBV-lTVTlfQwHjCAUDGzxj1IkcHcKMzWkC_3V-RSgtuiTXzM9Cn4dclxH11eUQqWZ66gp9aFgfTV7rxdIPMrpZzWtP7skrJrKn2-tH7FePnEv3LviBmjhg5dqgp9Ac3ze00X6T3qk/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/AVvXsEjzwRUtUgFqD68cSkxKSwjn0UdMaKzDrk0JNPB6cCltL5R1oP3YYgwTiSYeY4JppLbn1ZDjQzpshjX0wNxXGbr3LjAsTogXNWVO7HPpzTi3eUz36ABnICARhlJ5zTFNja-qcPBvofI_tm4/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/AVvXsEioXW61kgWTuBT4IlhaUQWCNscdu-U1IjsoSA_4uyOJUg2z1InFZcCG38zTbqPmNQXaG5QU_OGBlulhKcttQGM7ojYm3WuY53J1bMqGQ3LCRCVBAQ6SU4zxa1p1vjwk_msE_DnSe98aZzw/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/AVvXsEgW_sFDtqBNHYpfI0mACf9OgjDgTqiF9wd9zjKe-Ov_6T15egrHdvdbdY6RRXBrfeIuzd1xsmfJwZkBtHZ4vjfUbOBxK3V4_Kvz6vA6QnObaJeA7HSH-luq7k8KjBcXG1M1c8UguDETovE/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/AVvXsEhwkFK4fiwJmmnVDDSwPOFJoCmqD0COmMn9BbkamQcf5f1Ee9ZzxYMTF9BuxzMC_dnDZIYQK2HjN13Xrn7wRCBh_ijQS7aba00qFB_EolUhSNuXxYnPgEx84DcLpmAfYU-S9GD5WiqVFSM/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/AVvXsEhu3oIRw9QmozgNjWNy40NacPS3kvvIKgjYKj33ySonNaG6r-JADDIibj6Q7UqULTunbOnV25Y6Sx8frjRYWJ5VR0VbXi3O4Ka1xW1Zno5i0SDzB4kJZaNN8dGsD6oHfDm6Z7fHZ_ILm5o/s320/kacamata.jpg" width="200" /></a>
</dt>
</dl>
</div>
</div>
- 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.
- Kalau semuanya sudah dilakukan dengan benar, hasilnya bisa dilihat disini.
Wassalam...
