Cara Membuat Galeri atau Display Produk Pada Halaman Blog


Bagaimana cara membuat halaman galeri yang rapi di blog ?. Mungkin solusinya adalah membuat galeri dengan style grid. Grid adalah menampilkan foto pada kotak – kotak  yang tersusun rapi. Biasanya foto akan ditampilkan lebih kecil dari aslinya, kemudian jika diklik akan langsung menuju link tertentu atau menampilkan gambar secara penuh.

Contoh style grid ini bisa dilihat pada interface Instagam. Anda akan menjumpai foto pada tiga kotak baris dan kolom memanjang kebawah yang rapi. Contoh lainya terdapat pada interface online shop (bineka) atau marketplace seperti tokopedia, bukalapak, dll. Dengan menerapkan konsep grid maka akan didapat tampilan display yang memberikan banyak kemudahan.

Bagi blogger sistim grid ini bisa digunakan untuk membuat galeri yang lebih prfesional. Bisa untuk memajang rangkaian foto, karya, atau produk yang bisa dijual pada laman / halaman.

Contoh :
Gambar 1 Gambar 2 Gambar 3


Berikut langkah – langkahnya :
  1. Login di blogger.com
  2. Buat Halaman Baru
  3. Pilih mode "HTML"
  4. Masukan (copy paste) script code di bawah ini :


Penjelasan : 
Script kode diatas akan menampilkan 3 gambar sejajar horisontal. Jika ingin menampilkan lebih dari 3 gambar, maka copy paste kode di atas dengan dikasi jarak dengan kode <br/> di bawah kode </table>

Keterangan Script
<td align="center" width="33%"><a href="Link Gambar" target="_blank">
<img src="URL Gambar di Sini"/><br>Nama Gambar</a></td>

33%  =  merupakan pembagian dari 100%
Link Gambar  ganti dengan link yang ingin dituju ketika di-klik
URL Gambar di Sini  ganti dengan link gambar yang sudah di-upload
Nama Gambar  isi keterangan judul atau caption 

 

4 comments:

  1. Hallow Bang, bang kl untuk membuat text nama gallary fotonya center tenah gimana bang, soalnya HTML diatas begitu saya ganti nama text fotonya ko ga center tengah malah rata kiri aja text nya, mohon penjelasannya bang, sebelumnya trimakasih

    ReplyDelete
  2. manual saja gan, digeser pakai spasi

    ReplyDelete
  3. Biar kebawah gimana bang..
    Atas 2
    Tengah bawah 2
    Bawah 2

    ReplyDelete