Cara membuat Gallery foto di Blogspot - kerap kali anda ingin mengupload foto atau gambar secara berdampingan dalam suatu postingan artikel atau berbentuk menyerupai galeri foto pada umumnya namun tidak bisa dikarenakan mengupload foto secara langsung melalui plat form blogger hanya akan menyisipkan satu foto per paragraf dengan tata letak kanan, kiri dan tengah saja.
 |
| Illustrasi tampilan gallery foto di blog |
Membuat gallery foto di website atau blog juga banyak digunakan oleh personal blog atau penjualan produk secara online terutama dibidang clothing.
Berikut cara membuat gallery foto dalam postingan ataupun dilaman blog:
1. Masuk keblog dan pilih entri baru dilaman postingan
2. Berikan judul terlebih dahulu
3. Copy dan Pastekan code berikut dengan mode HTML
<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="http:www.buginese.id/" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVSBqjXYVO3sI_AUzlqhIUJZwOPgGyXlGebI22WtTETSzpdolRaVnIGLAv1LS1Snzn0q0kwjEdPTZwgXyfhclU8Hi4ZhN-sJbE5ryABNHXFrIhGoyp9AT5wIIsBGs810am4SqebIRRBblE/s1600/logoakbarnomba.png" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http:www.buginese.id/" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVSBqjXYVO3sI_AUzlqhIUJZwOPgGyXlGebI22WtTETSzpdolRaVnIGLAv1LS1Snzn0q0kwjEdPTZwgXyfhclU8Hi4ZhN-sJbE5ryABNHXFrIhGoyp9AT5wIIsBGs810am4SqebIRRBblE/s1600/logoakbarnomba.png" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http:www.buginese.id/" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVSBqjXYVO3sI_AUzlqhIUJZwOPgGyXlGebI22WtTETSzpdolRaVnIGLAv1LS1Snzn0q0kwjEdPTZwgXyfhclU8Hi4ZhN-sJbE5ryABNHXFrIhGoyp9AT5wIIsBGs810am4SqebIRRBblE/s1600/logoakbarnomba.png" width="200" /></a>
</dt>
</dl><dl class="gallery-item">
<dt class="gallery-icon"><a href="http:www.buginese.id/" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVSBqjXYVO3sI_AUzlqhIUJZwOPgGyXlGebI22WtTETSzpdolRaVnIGLAv1LS1Snzn0q0kwjEdPTZwgXyfhclU8Hi4ZhN-sJbE5ryABNHXFrIhGoyp9AT5wIIsBGs810am4SqebIRRBblE/s1600/logoakbarnomba.png" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http:www.buginese.id/" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVSBqjXYVO3sI_AUzlqhIUJZwOPgGyXlGebI22WtTETSzpdolRaVnIGLAv1LS1Snzn0q0kwjEdPTZwgXyfhclU8Hi4ZhN-sJbE5ryABNHXFrIhGoyp9AT5wIIsBGs810am4SqebIRRBblE/s1600/logoakbarnomba.png" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http:www.buginese.id/" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVSBqjXYVO3sI_AUzlqhIUJZwOPgGyXlGebI22WtTETSzpdolRaVnIGLAv1LS1Snzn0q0kwjEdPTZwgXyfhclU8Hi4ZhN-sJbE5ryABNHXFrIhGoyp9AT5wIIsBGs810am4SqebIRRBblE/s1600/logoakbarnomba.png" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http:www.buginese.id/" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVSBqjXYVO3sI_AUzlqhIUJZwOPgGyXlGebI22WtTETSzpdolRaVnIGLAv1LS1Snzn0q0kwjEdPTZwgXyfhclU8Hi4ZhN-sJbE5ryABNHXFrIhGoyp9AT5wIIsBGs810am4SqebIRRBblE/s1600/logoakbarnomba.png" width="200" /></a>
</dt>
</dl>
</div>
</div>
<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="http:www.buginese.id/" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVSBqjXYVO3sI_AUzlqhIUJZwOPgGyXlGebI22WtTETSzpdolRaVnIGLAv1LS1Snzn0q0kwjEdPTZwgXyfhclU8Hi4ZhN-sJbE5ryABNHXFrIhGoyp9AT5wIIsBGs810am4SqebIRRBblE/s1600/logoakbarnomba.png" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http:www.buginese.id/" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVSBqjXYVO3sI_AUzlqhIUJZwOPgGyXlGebI22WtTETSzpdolRaVnIGLAv1LS1Snzn0q0kwjEdPTZwgXyfhclU8Hi4ZhN-sJbE5ryABNHXFrIhGoyp9AT5wIIsBGs810am4SqebIRRBblE/s1600/logoakbarnomba.png" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http:www.buginese.id/" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVSBqjXYVO3sI_AUzlqhIUJZwOPgGyXlGebI22WtTETSzpdolRaVnIGLAv1LS1Snzn0q0kwjEdPTZwgXyfhclU8Hi4ZhN-sJbE5ryABNHXFrIhGoyp9AT5wIIsBGs810am4SqebIRRBblE/s1600/logoakbarnomba.png" width="200" /></a>
</dt>
</dl><dl class="gallery-item">
<dt class="gallery-icon"><a href="http:www.buginese.id/" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVSBqjXYVO3sI_AUzlqhIUJZwOPgGyXlGebI22WtTETSzpdolRaVnIGLAv1LS1Snzn0q0kwjEdPTZwgXyfhclU8Hi4ZhN-sJbE5ryABNHXFrIhGoyp9AT5wIIsBGs810am4SqebIRRBblE/s1600/logoakbarnomba.png" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http:www.buginese.id/" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVSBqjXYVO3sI_AUzlqhIUJZwOPgGyXlGebI22WtTETSzpdolRaVnIGLAv1LS1Snzn0q0kwjEdPTZwgXyfhclU8Hi4ZhN-sJbE5ryABNHXFrIhGoyp9AT5wIIsBGs810am4SqebIRRBblE/s1600/logoakbarnomba.png" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http:www.buginese.id/" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVSBqjXYVO3sI_AUzlqhIUJZwOPgGyXlGebI22WtTETSzpdolRaVnIGLAv1LS1Snzn0q0kwjEdPTZwgXyfhclU8Hi4ZhN-sJbE5ryABNHXFrIhGoyp9AT5wIIsBGs810am4SqebIRRBblE/s1600/logoakbarnomba.png" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http:www.buginese.id/" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVSBqjXYVO3sI_AUzlqhIUJZwOPgGyXlGebI22WtTETSzpdolRaVnIGLAv1LS1Snzn0q0kwjEdPTZwgXyfhclU8Hi4ZhN-sJbE5ryABNHXFrIhGoyp9AT5wIIsBGs810am4SqebIRRBblE/s1600/logoakbarnomba.png" width="200" /></a>
</dt>
</dl>
</div>
</div>
Keterangan script code:
Warna Merah : Ganti dengan link tujuan[jika tidak ada cukup masukkan url gambar]
Warna Orange : Ganti dengan URL gambar yang akan di pasang di galeri
Tulisan Miring[italic] :Silahkan sesuaikan sendiri dengan lebar dan tinggi gambar yang diinginkan
4. Jika sudah selesai silahkan dipublish dan lihat hasilnya.
Atau anda dapat melihat dilaman galeri blog saya ini di http://muhammadakbarnomba.blogspot.co.id/p/my-galery.html
EmoticonEmoticon