Cara Membuat Galery Foto Di Blog

Diluarsana sebenarnya sudah banyak yang menyediakan template Galery Photo untuk pengguna blog, namun sayangnya, jika sobat menggunakan template tersebut, yah cocoknya blog sobat hanya untuk postingan photo dan tidak cocok untuk digunakan ke hal yang lain.

Tapi jangan khawatir sob, disini ada sedikit tutorial bagaimana cara membuat album menarik di blog sobat tanpa harus menggunakan template album tersebut.

Cara penggunaannya juga sangat mudah, ikuti langkah-langkah dibawah ini :

  1. Pertama Uploadlah terlebih dahulu File Gambar yang ingin anda tampilkan di blog, Upload ini bisa di Blogger atau image hosting kesayangan anda.
  2. Jika sudah terupload gambarnya, sekarang kita memulai membuat sebuah postingan gambar, Login Ke Blog » Posting » New Post » Kasi Judul Album Sobat, sekarang klik HTML, Jangan yang Compose pada pilihan Pengeditan Dokument.
  3. Copykan Kode Berikut ini :
<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="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="Url Image anda" target="_blank">
<img border="0" height="150" src="Url Image anda" width="200" /></a>
</dt>
</dl>
</div>
</div>

Ganti tulisan tebal "Url Image anda" dengan Url Gambar yang telah sobat Upload tadi, sebagai contoh seperti berikut ini :

<dl class="gallery-item">
<dt class="gallery-icon"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEharpGNiGHEPMnuiCt1ijm1Clp4oRTWpqOJ6MPF0CHh7Z_Pv6yK2yZcOcJ473aQJeAmVKNhEeYEjnnlq6vSuA0W5NBss5CQdQA33J-eCtRIDCshGpcPzLVFgADBckyAXbnnu1Hir8euISVg/s1600/1.jpg" target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5cXfS99CmaDIOWD1qfy-DvAJ-qG0sRTCncDy1s1lyVDbz-tf3r53Em2AdXKcBeBieb_a7LqmgD8yCOrOet4NaRC2oQPdrpgzKhHBckejTB25RH2-xUiQNze31KG2x9EbLqSUIwtd9dlww/s1600/2.jpg" width="200" /></a>
</dt>
</dl>

Jika sudah, silahkan Publish Postingannya, Sangat Mudah Bukan?..
Selamat Mencoba.

19 komentar:

  1. Brow masukinn jg posing ke blog gw donk. ww.mimipirasta.blogspot.com

    BalasHapus
  2. wah, mksih bro...sgt membantu...
    http://beritaedukasitommy.blogspot.com/

    BalasHapus
  3. ijin copas broo..
    silahkan mampir disini mau nyari aksesoris hp http://tholleshop.blogspot.com/

    BalasHapus
  4. Bisa di terangin maksud kode-kodenya , yg penting-penting saja?
    Apa kode untuk buat kotak pembagi tiap gambar ?

    BalasHapus
  5. Itu Ko Pas Di masukin Layar Item ?

    BalasHapus
  6. Kang,... itu kan kalau gambar di klik jadi penuh ya bang... nah, cara ngebuat gambar biar jadi kaya gitu gimana kang?

    BalasHapus
  7. Cara membuat email dengan nama domain sendiri.

    BalasHapus
  8. makasih gan.. ijin copas kode htmlnya....

    BalasHapus
  9. nice infoh! thx ya.
    patut dicoba nih.

    BalasHapus
  10. Terima kasih...
    Sangat bermanfaat...

    BalasHapus
  11. Saya belajar ntar..., semoga berhasil

    BalasHapus
  12. trims sekali, sekali nyoba langsung sukses, walau pemula

    BalasHapus
  13. Thks gan ijin kopas mampir ke blog ane butuh masukan https://rumanosmanagement.blogspot.com

    BalasHapus
  14. Bagaimana kalau gambar2nya berbeda ukuran satu sama lain, supaya tampilannya tidak berantakan?

    BalasHapus