2 Komentar

Membuat Galery Di Halaman Blog


  • Tahap Pertama yang Harus Dilakukan adalah Mengupload terlebih dahulu Foto yang ingin anda tampilkan didalam Gallery tersebut, Foto ini bisa di Upload ke Image Hosting ( Picasa, Photobuket, Flicker dll.) atau juga di Upload di Akun Blogger sobat. Saya Anggap anda sudah mengerti tentang hal ini.
  • Buat Sebuah Postingan, Beri Judul misal My Design Project.Kemudian Pada Halaman Postingan tersebut Pilih Metode HTML bukan COMPOSE
  • Copy Kode Berikut ini :

<div>
<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>

<dl>
<dt><a href=” http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html ” target=”_blank”>
<img border=”0″ height=”150″ src=”http://3.bp.blogspot.com/_ebUnF7PUwY0/TTmq03TbcsI/AAAAAAAABWg/ZTsc00AH-6I/s320/atronout.jpg&#8221; width=”200″ /></a>
</dt>
</dl>
<dl>
<dt><a href=” http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html ” target=”_blank”>
<img border=”0″ height=”150″ src=”http://4.bp.blogspot.com/_ebUnF7PUwY0/TTmq1sZABLI/AAAAAAAABWk/KK9O5p8NVzo/s320/bieeen.jpg&#8221; width=”200″ /></a>
</dt>
</dl>
<dl>
<dt><a href=” http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html ” target=”_blank”>
<img border=”0″ height=”150″ src=”http://3.bp.blogspot.com/_ebUnF7PUwY0/TTmq2xB53VI/AAAAAAAABWo/ceTnYkgkKcY/s320/blankon.jpg&#8221; width=”200″ /></a>
</dt>
</dl>
<dl>
<dt><a href=” http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html ” target=”_blank”>
<img border=”0″ height=”150″ src=”http://2.bp.blogspot.com/_ebUnF7PUwY0/TTmq328XwJI/AAAAAAAABWs/Z2MSG35Sf9c/s320/boxing.jpg&#8221; width=”200″ /></a>
</dt>
</dl>
<dl>
<dt><a href=” http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html ” target=”_blank”>
<img border=”0″ height=”150″ src=”http://2.bp.blogspot.com/_ebUnF7PUwY0/TTmq5tXNkdI/AAAAAAAABWw/4_0qitLH-ns/s320/duits.jpg&#8221; width=”200″ /></a>
</dt>
</dl>
<dl>
<dt><a href=” http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html ” target=”_blank”>
<img border=”0″ height=”150″ src=”http://4.bp.blogspot.com/_ebUnF7PUwY0/TTmq786_ExI/AAAAAAAABW0/8KDLQSY2ytk/s320/goyang.jpg&#8221; width=”200″ /></a>
</dt>
</dl>
<dl>
<dt><a href=” http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html ” target=”_blank”>
<img border=”0″ height=”150″ src=”http://3.bp.blogspot.com/_ebUnF7PUwY0/TTmq83zwVMI/AAAAAAAABW4/ZjgI-nCQeqs/s320/hormat.jpg&#8221; width=”200″ /></a>
</dt>
</dl>
<dl>
<dt><a href=” http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html ” target=”_blank”>
<img border=”0″ height=”150″ src=”http://1.bp.blogspot.com/_ebUnF7PUwY0/TTmq9vesD8I/AAAAAAAABW8/IcWcKhsg9DU/s320/jendr.jpg&#8221; width=”200″ /></a>
</dt>
</dl>
<dl>
<dt><a href=” http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html ” target=”_blank”>
<img border=”0″ height=”150″ src=”http://4.bp.blogspot.com/_ebUnF7PUwY0/TTmq_72wtDI/AAAAAAAABXE/NcxhFzEB2a8/s320/koran.jpg&#8221; width=”200″ /></a>
</dt>
</dl>
<dl>
<dt><a href=” http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html ” target=”_blank”>
<img border=”0″ height=”150″ src=”http://4.bp.blogspot.com/_ebUnF7PUwY0/TTmrA50W4ZI/AAAAAAAABXI/SX1YhthILJY/s320/samar.jpg&#8221; width=”200″ /></a>
</dt>
</dl>
<dl>
<dt><a href=” http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html ” target=”_blank”>
<img border=”0″ height=”150″ src=”http://3.bp.blogspot.com/_ebUnF7PUwY0/TTmrCzoefoI/AAAAAAAABXM/Xmj-HhEVMLw/s320/seribu.jpg&#8221; width=”200″ /></a>
</dt>
</dl>
<dl>
<dt><a href=” http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html ” target=”_blank”>
<img border=”0″ height=”150″ src=”http://3.bp.blogspot.com/_ebUnF7PUwY0/TTmrEGGpVbI/AAAAAAAABXQ/VEBkyJfvZyA/s320/silat.jpg&#8221; width=”200″ /></a>
</dt>
</dl>
<dl>
<dt><a href=” http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html ” target=”_blank”>
<img border=”0″ height=”150″ src=”http://3.bp.blogspot.com/_ebUnF7PUwY0/TTmrFHQqMfI/AAAAAAAABXU/KKwUfuu1ND4/s320/wig1.jpg&#8221; width=”200″ /></a>
</dt>
</dl>
<dl>
<dt><a href=” http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html ” target=”_blank”>
<img border=”0″ height=”150″ src=”http://2.bp.blogspot.com/_ebUnF7PUwY0/TTm2ybg2rgI/AAAAAAAABXY/YHAWLwQ1xB0/s320/tenis.jpg&#8221; width=”200″ /></a>
</dt>
</dl>
<dl>
<dt><a href=” http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html ” target=”_blank”>
<img border=”0″ height=”150″ src=”http://3.bp.blogspot.com/_ebUnF7PUwY0/TTm20KFUhBI/AAAAAAAABXc/wF7TssNxmTs/s320/santai.jpg&#8221; width=”200″ /></a>
</dt>
</dl>
<dl>
<dt><a href=” http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html ” target=”_blank”>
<img border=”0″ height=”150″ src=”http://1.bp.blogspot.com/_ebUnF7PUwY0/TTmq-jrNZJI/AAAAAAAABXA/ZX5jgiSFSA4/s320/kacamata.jpg&#8221; width=”200″ /></a>
</dt>
</dl>
</div>
</div>

Catatan Penting :

  1. Kode yang berwarna merah adalah url foto yang didapatkan dari hosting setelah foto diupload.
  2. Ukuran foto bisa diganti dengan merubah angka 150 dan 200.
  3. Angka 25% adalah prosentase untuk membuat foto berjajar menyamping 4 kolom (rumusnya: 100% dibagi 4 = 25%)
  4. Bila ingin menambah jumlah foto tinggal copy saja mulai kode <dl> sampai dengan kode </dl> demikian pula jika ingin menguranginya.
  5. Dalam menuliskan kode harus benar-benar rapat, jangan menggunakan enter, bila masih terdapat ruang kosong maka fungsikanlah backspace untuk menghapusnya sehingga kode menjadi rapat.

2 comments on “Membuat Galery Di Halaman Blog

  1. sangat bermanfaat silahkan kunjungi Vrand Computer Bekasi – Solution Your IT Jasa Service Komputer di bekasi – Jasa Service Printer dibekasi – Instalasi Jaringan – LAN – WAN – MAN – Troubleshooting – Maintenance

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: