Header Ads Widget

Ebook GRATIS Bisnis Online dari Nol - Banner Post Ads Uka Fahrurosid

Latest

6/recent/ticker-posts

Cara Membuat Tampilan Gallery Foto Unik di Blogspot

Tutorial mudah membuat tampilan galeri foto unik dan rapi di Blogspot menggunakan HTML dan CSS.

Contoh tampilan gallery foto unik di Blogspot

Cara Membuat Tampilan Gallery Foto Unik di Blogspot

Pernah lihat tampilan galeri foto di blog yang rapi dan estetik? Nah, artikel ini bakal kasih tahu cara membuat gallery foto unik di Blogspot dengan ukuran kecil dan penataan yang cantik. Cocok banget buat Anda yang ingin menampilkan dokumentasi, karya, atau portfolio dalam bentuk gambar yang tertata rapi.

 

Langkah-langkah Membuat Galeri Foto di Blogspot

Langkah pertama, buka dashboard Blogspot Anda, pilih halaman atau postingan yang ingin diedit, lalu masuk ke mode HTML. Setelah itu, copy paste kode HTML dan CSS di bawah ini:

<div class='snap_preview'>
  <div><center><font color="#0066FF" size="4">Cara Membuat Tampilan Gallery Foto Unik di Blogspot</font></center></div>
  <style type='text/css'>
    .gallery {
      margin: auto;
    }
    .gallery-item {
      float: left;
      margin-top: 10px;
      text-align: center;
      width: 33%;
    }
    .gallery img {
      border: 2px solid #cfcfcf;
    }
    .gallery-caption {
      margin-left: 0;
    }
  </style>
  <div class='gallery snap_nopreview'>
    <dl class='gallery-item'>
      <dt class='gallery-icon'>
        <img src="URL_GAMBAR_1.jpg" width="128" height="96" class="attachment-thumbnail" >
      </dt>
    </dl>
    <dl class='gallery-item'>
      <dt class='gallery-icon'>
        <img src="URL_GAMBAR_2.jpg" width="128" height="96" class="attachment-thumbnail">
      </dt>
    </dl>
    <!-- Tambahkan gambar lain dengan format yang sama -->
    <br style="clear: both" />
  </div>
</div>

Ganti bagian URL_GAMBAR_1.jpg, URL_GAMBAR_2.jpg, dan seterusnya dengan alamat gambar Anda sendiri. Anda bisa upload ke layanan seperti Imgur, Google Drive (yang dibagikan secara publik), atau Photobucket.

 

Tips Tambahan untuk Gallery Blogspot Anda

  • Gunakan gambar berukuran kecil dan seragam agar tampilan rapi.
  • Tambahkan caption jika perlu dengan menambahkan div .gallery-caption.
  • Sesuaikan ukuran width sesuai kebutuhan agar pas di tampilan blog Anda.

 

Penutup

Dengan mengikuti langkah-langkah di atas, Anda bisa membuat tampilan galeri foto Blogspot yang lebih menarik dan profesional tanpa harus pusing belajar coding rumit. Cukup utak-atik sedikit HTML dan CSS, hasilnya bisa bikin pengunjung betah berlama-lama di blog Anda.

 

Ayo Coba Sekarang!

Kalau Anda merasa tutorial ini bermanfaat, yuk bagikan ke teman-teman blogger lainnya! Atau kalau punya pertanyaan dan ide pengembangan, langsung aja komentar di bawah. Selamat mencoba dan semoga blog Anda makin keren!

Semoga Bermanfaat!

Miliki ebook GRATIS yang akan bantu kamu cuan dari dunia digital.

Dapatkan di Sini!

Follow @ukafahrurosid

Posting Komentar

20 Komentar

  1. Anonim6:19 AM

    udah sy baca ka..
    makasih ya..
    maaf jg nagih2 trus.. hehehe...

    BalasHapus
  2. Thnkz Gan ,,,
    Visit back please ,,
    www.deevro.co.cc ,,
    thnkZ ,,

    BalasHapus
  3. wah terima kasih, pak. atas tutorialnya :)

    BalasHapus
  4. wah ini dia gan yang aku cari...tapi gmana buat zoom nya...?

    BalasHapus
  5. punya saya kox gax rapi ya...apa ada ksalahan di kodenya...?

    BalasHapus
  6. makasih pak de, walaupun awalnya susah tuk menyesuaikan ukuran gambar tapi sekarang udah bisa. trus saya + title ma gambar aku jadikan link.

    BalasHapus
  7. WAH AKU MSH BLUM NGERTI

    BalasHapus
  8. Muanteeeeeeeeeeptepteptep..Mas Uka!!
    http://www.alandiny.tk/2011/10/gallery-album-foto-alandiny.html

    BalasHapus
  9. dicoba,tanks gan

    BalasHapus
  10. siip, pateen.......

    BalasHapus
  11. nitip tukar link http://www.jubersradio.com/

    BalasHapus
  12. KEREN
    NGE BANTU BANGET
    THANKS YA
    SEKALIAN KUNJUNGI BLOG SAYA
    http://fashiondar.blogspot.com/

    BalasHapus
  13. simple sob, ane coba dulu deh.. ntar kalo makin belepotan ngadu dimari lagi.. hehehe.. salam kenal..

    BalasHapus
  14. Anonim12:49 PM

    makasi mas informasinya, saya lihat demo nya kok ga bisa di klik ya?
    gimana cara agar photo kalau di klik jadi pop up windows?
    Thanks

    BalasHapus
  15. thx mas
    http://duniagame7.blogspot.com/

    BalasHapus
  16. Anonim9:45 PM

    kalo judul nya membuat gallery foto simpel di blogspot lebih tepat mas daripada unik, tapi sekedar saran aja kok mas

    BalasHapus
  17. Trima kasih atas sarannya..

    BalasHapus

Banner Ads 728x90