Tuesday, November 24, 2015

Keren, Cara Buat Galeri Foto di Blog

Image, gambar atau foto dan semakna dengannya akan menambah tampilan lebih menarik jika diletakkan di dalam blog. Foto disusun sedemikian rupa sehingga lebih informatif meski bukan blog wallpaper.

cara membuat galeri foto di blog
Penempatan image versi default blogger tampak masih sederhana dengan tampilan satu per satu tiap bidangnya. Lalu perataan paragraf baik kiri, tengah maupun kanan. Penempatan seperti terkadang membuat area postingan jadi banyak terbuang. Terdapat ruang-ruang kosong yang sebenarnya bisa dimaksimalkan untuk informasi lain.
Artikel rekomendasi 7 Cara Optimalisasi Image agar Lebih SEO Friendly.
Maka dari itu, tutorial kali ini akan menjawabnya dengan cara memasang image yang bisa berderet secara sejajar, sehingga tidak memerlukan banyak ruang dalam postingan. Selengkapnya berikut tahap pembuatannya.

Cara membuat galeri foto dalam postingan blog

1. Masuk ke dasboard blogger.
2. Buat postingan baru.
3. Arahkan ke mode HTML. Lalu paste kode berikut.

<div class="snap_preview">
<div>
<span style="color: #0066ff;font-size: medium;">Memasang Galeri Image di Postingan</span></div>
<style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:25%;} .gallery-caption { margin-left: 0; }</style>
<div class="gallery snap_nopreview">

<dl class="gallery-item">
<dt class="gallery-icon"><a href="URL TARGET LINK" target="_blank">
<img border="0" height="150" src="URL IMAGE" width="200" /></a>
</dt>
</dl>
</div>
</div>

Keterangan :
Kalimat Memasang Galeri Image di Postingan silakan dirubah dengan kata-kata sendiri.
Kode width:25% menunjukkan bahwa penempatan gambar berjajar sebanyak 4 gambar. Rumusnya 100%/4=25%.
Ganti URL TARGET LINK dengan URL target link gambar.
Ganti URL IMAGE dengan URL image hasil upload. Saya menggunakan Picasa web album untuk mengupload image. Silakan simak cara Upload Gambar Blog Makin Mudah Melalui Picasa Web.
Kemudian untuk mengetahui URL image, silakan klik kanan gambar yang telah diupload, lalu Copy image address. Atau bisa pula melalui cara Cara Mengetahui dan Membuat URL Gambar.
Lalu ganti kode 150 untuk ketinggian gambar dan 200 untuk lebar gambar. Sesuaikan dengan luasan template blog.

Selesai, lalu akhiri dengan Publish.

Apakah itu hanya digunakan untuk memasang 4 gambar saja? Lalu bagaimana jika ingin meletakkan gambar lebih dari 4?

Caranya adalah menambah kode ini di bawah kode </dl>.

<dl class="gallery-item">
<dt class="gallery-icon"><a href="URL TARGET LINK" target="_blank">
<img border="0" height="150" src="URL IMAGE" width="200" /></a>
</dt>
</dl>

Lakukan sesuai dengan jumlah gambar yang diinginkan. Untuk sampel di atas menggunakan 4 gambar. Sehingga gunakan kode tersebut sebanyak 4 kali.

Demikian tutorial cara memasang galeri foto pada postingan blog. Semoga bermanfaat dan selamat mencoba. Jika ada kode yang kurang tepat, silakan ikut meralatnya. Trims atas responnya.

46 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. maaf sob, silakan berkomentar yang relevan. jika mau sisipkan link, pakai open ID saja. :)

      Delete
  2. mantap banget artikelnya. Ane jadi terbantu nih

    Btw kunjungi juga blog ane:
    http://lantingrusak.blogspot.co.id/

    ReplyDelete
    Replies
    1. alhamdulillah, memang target blog ini adalah agar bermanfaat. btw sebaiknya pakai open ID sob, biar mudah link backnya.

      Delete
  3. Replies
    1. memang keliatannya agak ribet, tapi lumayan juga hasilnya.

      Delete
  4. Langsung praktek aja biar jelas,,makasih bro triknya?

    ReplyDelete
  5. Terima kasih ya caranya, saya langsung mau coba di praktekan :)

    ReplyDelete
    Replies
    1. silakan sob, semoga blog nya makin keren. tetap semangat.

      Delete
  6. Makasih Gan,artikelnya sungguh membantu bagi para Blogger Blogger yang masih awam seperti saya ini.

    ReplyDelete
    Replies
    1. semoga bermanfaat dan membantu kesuksesan blog yang sobat kelola.

      Delete
  7. Bermanfaat sob.. ditunggu kunbalnya

    http://randiapriansyah.blogspot.com

    ReplyDelete
    Replies
    1. coba linknya dibuat anchor text agar mudah diakses dan seo friendly, CARANYA KLIK DISINI

      Delete
  8. Bermanfaat sob.. ditunggu kunbalnya

    http://randiapriansyah.blogspot.com

    ReplyDelete
    Replies
    1. coba linknya dibuat anchor text agar mudah diakses dan seo friendly, CARANYA KLIK DISINI

      Delete
  9. makasih :)
    http://zaskiausaha.blogspot.co.id/

    ReplyDelete
    Replies
    1. coba linknya dibuat anchor text agar mudah diakses dan seo friendly, CARANYA KLIK DISINI

      Delete
  10. 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

    ReplyDelete
    Replies
    1. coba linknya dibuat anchor text agar mudah diakses dan seo friendly, CARANYA KLIK DISINI

      Delete
  11. kalo gambarnya banyak gimana masukin URL setiap gambarnya di TARGET LINKnya ?

    ReplyDelete
  12. kalo gambarnya banyak gimana masukin URL setiap gambarnya di TARGET LINKnya ?
    Trus cara masukin url gambarnya sampe 4 kali itu gimana??dah nyoba 100x gak bisa pula

    ReplyDelete
  13. Gimana masukin setiap URL gambarnya?trus target link itu di isi addres gambarnya/kata" kita sendiri?

    ReplyDelete
  14. Gimana masukin setiap URL gambarnya?trus target link itu di isi addres gambarnya/kata" kita sendiri?

    ReplyDelete
    Replies
    1. sisipkan ke code tersebut, sesuai URL target imagenya

      Delete
  15. Makasih banyak gan atas infonya

    ReplyDelete
  16. nice post....sangat bermanfaat kunbal gan http://qutublog.blogspot.com

    ReplyDelete
    Replies
    1. coba linknya dibuat anchor text agar mudah diakses dan seo friendly, CARANYA KLIK DISINI

      Delete
  17. Ga bisa langsg upload terus kebentuk galeri ya gan.. kl ini harus copy paste URL :( Tapi ini sudah membantu.. tq sharenya

    ReplyDelete
    Replies
    1. dari blogger belum ada format khususnya, sehingga harus memakai code tsb

      Delete
  18. Sayangnya ga ditampilkan gambar contohnya, jadi bisa tahu hasil tutorialnya

    ReplyDelete
    Replies
    1. tidak setiap tutorial selalu memakai contoh, coba sobat buat sesuai cara di atas, moga bisa

      Delete

Setiap komentar yang masuk akan dimoderasi. So, waspadalah.