Keren, Cara Buat Galeri Foto Di Blog

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

Penempatan image versi default blogger tampak masih sederhana dengan tampilan satu per satu tiap bidangnya. Lalu perataan paragraf baik kiri, tengah maupun kanan. Penempatan menyerupai terkadang menciptakan area postingan jadi banyak terbuang. Terdapat ruang-ruang kosong yang bahwasanya sanggup dimaksimalkan untuk informasi lain.

Artikel rekomendasi 7 Cara Optimalisasi Image biar Lebih SEO Friendly.

Maka dari itu, tutorial kali ini akan menjawabnya dengan cara memasang image yang sanggup berderet secara sejajar, sehingga tidak memerlukan banyak ruang dalam postingan. Selengkapnya berikut tahap pembuatannya.

Cara menciptakan galeri foto dalam postingan blog

1. Masuk ke dasboard blogger.

2. Buat postingan baru.

3. Arahkan ke mode HTML. Lalu paste instruksi 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 sasaran link gambar.

Ganti URL IMAGE dengan URL image hasil upload. Saya memakai Picasa web album untuk mengupload image. Silakan simak cara Upload Gambar Blog Makin Praktis Melalui Picasa Web.

Kemudian untuk mengetahui URL image, silakan klik kanan gambar yang telah diupload, kemudian Copy image address. Atau sanggup pula melalui cara Cara Mengetahui dan Membuat URL Gambar.

Lalu ganti instruksi 150 untuk ketinggian gambar dan 200 untuk lebar gambar. Sesuaikan dengan luasan template blog.

Selesai, kemudian akhiri dengan Publish.

Apakah itu hanya dipakai untuk memasang 4 gambar saja? Lalu bagaimana kalau ingin meletakkan gambar lebih dari 4?

Caranya ialah menambah instruksi 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 memakai 4 gambar. Sehingga gunakan instruksi tersebut sebanyak 4 kali.

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

Tweet