Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Simple Gallery Photo di Blog

Gallery Photo di Blog
Simple Gallery Photo di Blog - banyak dari blogger apabila membuat efek pada blog mereka takut kalau blognya berpengaruh pada loading blog yang berubah menjadi lambat. Pertanyaan tersebut seringkali muncul atau bisa di jumpai pada konten posting yang khususnya mengupas tutorial blog entah itu pada jenis CSS maupun jQuery dan lain sebagainya.
Namun apa jadinya saat akan memposting konten namun pada konten tersebut membutuhkan photo dan berjumlah banyak, apabila hanya photo tersusun secara vertikal pasti tentunya akan memakan banyak ruang konten dan terlalu panjang kebawah untuk memasukkan photo-photo tersebut. Maka dari itu untuk meminimalisirkan ruang posting dan untuk membuat konten walaupun banyak photo namun hasilnya agar tetap terlihat sejajar dan rapi maka perlu untuk mengatur photo tersebut supaya tidak terlihat berantakan saat terposting di blog. Berikut adalah tutorial membuat Simple Gallery Photo di Blog secara mudah dan singkat:

1. Login ke akun blogger.
2. Lalu klik Entri Baru, kemudian copy kode berikut ini lalu paste di kolom posting mode HTML.
<style type="text/css">
.gallery {
margin: auto;
}
.gallery-item {
float: left;
margin-top: 0px;
text-align: center;
width: 50%; }
.gallery img {
border: 2px solid #cfcfcf;
}
.gallery-caption {
margin-left: 0;
}
</style>
<br />
<div class="gallery snap_nopreview">

<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>

<br style="clear: both;" />
<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>
</div>
Keterangan:
  • Ganti tulisan warna merah dengan URL Gambar yang di inginkan.
  • Height dan Width silahkan sesuaikan dengan yang di inginkan.
  • Jika ingin menambah gambar lebih banyak lagi, copy kode berikut ini kemudian taruh sebelum kode </div>
<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>

<br style="clear: both;" />
<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>

Berlangganan artikel via email

14 Response to "Simple Gallery Photo di Blog"

Manteb mas, langsung dicomot

Balas

blogwalking sobatku dari www.cheathelps31.com/police-destruction-street-game/

Balas

Perlu nih buat saya yang suka bikin postingan dengan banyak gambar! Jadi ntar kalau pakai kode di atas, gambar2 yang kita input ke postingan jadi berbentuk galeri gitu ya mas. :)

Balas

kunjungan pagi sob,,,nice info

Balas

makin mantab saja sobat

Balas

gk pake demo ya sob..? thx ya sdh berbagi.. *smile

Balas

mulaaaii di coba yaah mas , terimakasih informasi nyaa

Balas

Udah lama pengen posting nyisipin pake foto lebih dari satu...pke cara ini..cuma ga tau caranya... :)

Nah sekrng jd gampang dah urusannya...
Thx mas Bro....u always the best deh pokoke ;)
#ting...

Balas

wah ya saya tidak bisa buat poto yang di gabungin kayak gitu, makasi sobat, ijin pake,

Balas

Mau Bilang, kerennn hehee

Balas

kunjungan perdana gan, salam kenal
visit n koment back y dblogq :)

Balas

kunjungan perdana sobat, sambil baca2
mampir n koment back y dblogku
skalian follow ya nanti saya folback

Balas

wah mantap mas, dalam artikel saya banyak masang gambar, hasilnya terlalu panjang vertikal, tapi klo ada galery gambar yang friendly loading keren nie, izin copas kodenya ya mas..

Balas

pengen yg lebih soft gan.. dengan ekstra css or jquery :D

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Simple Gallery Photo di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode