Thursday, September 5, 2013

Cara Mudah Menyusun Gallery Photo di Blog



Menyusun Gallery Photo di Blog


Apakah Anda memiliki begitu banyak foto dan ingin mengorganisirnya dengan baik? Atau anda sekedar ingin menshare foto yang ingin anda tampilkan pada postingan agar terlihat lebih rapi dan menarik?

Cara Mudah Membuat Gallery Photo di Blog ,,, Dengan MenDesaign gambar atau gallery photo yang rapi dan menarik untuk di pandang, tetapi tidak membutuhkan tempat yang banyak? Mungkin inilah Solusi yang anda cari.





Dengan MenDesaign gambar atau gallery photo yang rapi dan menarik untuk di pandang, tetapi tidak membutuhkan tempat yang banyak? Mungkin inilah Solusi yang anda cari.

Cara Mudah Membuat Gallery Photo di Blog, jika anda tertarik anda bisa Mengikuti 7 cara yang saya posting pada blog atau pada halaman lainnya dalam artikel terkait berikut dibawah ini :

Silahkan anda lihat dan coba satu persatu Tips mana yang cocok dengan selera anda ...

- Cara Mudah Menyusun Gallery Photo di Blogspot
- CARA MEMBUAT FOTO GALLERY DENGAN TITTLE DAN DESCRIPSION
- CARA MEMBUAT GALLERY FOTO DENGAN EFEK ZOOM
- CARA MENYUSUN GAMBAR BANYAK DIDALAM POSTINGAN AGAR RAPI
- Trik Cara Mudah Membuat dan Pasang Gambar-Image Berderet Horizontal
- CARA MEMBUAT GALLERY IMAGE DENGAN CSS3
CARA MUDAH MEMBUAT GALERI FOTO PADA BLOGSPOT
- 7 Cara Mudah Membuat dan Menyusun Gallery Photo pada Posting Blog


Anda sekarang berada dihalaman
Cara Mudah Menyusun Gallery Photo di Blog


Galeri foto di halaman blog bisa terdiri dari foto tunggal dalam ukuran besar. Gaya seperti ini tentu membuat halaman jadi panjang. Lebih cantik dan menarik jika galeri berbentuk thumbnail berukuran kecil berderet-deret sehingga menghemat tempat.

Test Image





Cara membuat dan menyusun galeri foto di halaman blog sebagai berikut.

1. Siapkan Foto, upload ke (Postingan blog, picasa, atau photobucket, atau yang lainnya)
2. Copy Url Foto kamu
3. Buatlah postingan dalam mode HTML (bukan Compose)
4. Gantilah Url yang berwarna merah di bawah ini dengan kode Url foto kamu.

Kodenya

<div class="snap_preview">
<div>
<a href="http://waones-sbm.blogspot.com/2013/08/miss-world-2013-para-kontestan-dalam.html" target="_blank"><b><span style="color: #0066ff; font-size: large;"> Gallery of Contestants Miss World 2013 - In Hot and Sexy Bikini /span&gt;</span></b></a></div>
<style type="text/css">
.gallery{margin:auto;}.gallery-item{float:left; width:33%;} .gallery-caption { margin-left: 0; }
</style>
<div class="gallery snap_nopreview">


Gallery of Contestants Miss World 2013 - In Hot and Sexy Bikini :
Click Picture to Full
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://waones-sbm.blogspot.com/2013/08/annamaria-rakosi-miss-world-2013_9854.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="133" src=" http://1.bp.blogspot.com/-2L2bGuzSk6c/Uh2kNr13_TI/AAAAAAAANv0/eVGmH4EgRVE/s1600/Annamaria+Rakosi16.jpg" title="Miss World 2013 - Annamaria Rakosi – Beatiful in sexy Bikini" width="200" /> </a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://waones-sbm.blogspot.com/2013/08/sarah-baderna-miss-world-2013-kontestan.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="133" src=" http://4.bp.blogspot.com/-tK6TO8QrIIc/Uh2mgP5zySI/AAAAAAAAN0U/yNi1oZG_eEg/s1600/Sarah+Baderna9.jpg " title="Miss World 2013 - Sarah Baderna – Beatiful in sexy Bikini" width="200" /> </a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://waones-sbm.blogspot.com/2013/08/gina-hargitay-miss-world-2013-kontestan.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="133" src=" http://2.bp.blogspot.com/-sbymkSh25kI/Uh2oRoPPI-I/AAAAAAAAN3M/le6fdvzCx_0/s1600/Gina+Hargitay5.jpg" title="Miss World 2013 - Gina Hargitay – Beatiful in sexy Bikini" width="200" /> </a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://waones-sbm.blogspot.com/2013/08/michiko-tanaka-miss-world-2013.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="133" src=" http://4.bp.blogspot.com/-C_pb-uCFJ28/Uh2o5hoKG_I/AAAAAAAAN4Q/HSGVXVlk6f0/s1600/Michiko+Tanaka2.jpg " title="Miss World 2013 - Michiko Tanaka – Beatiful in sexy Bikini" width="200" /> </a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://waones-sbm.blogspot.com/2013/08/sarah-lorraine-riek-miss-world-2013.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="133" src=" http://3.bp.blogspot.com/-Cjqo2VNYEcs/Uh2psXOp42I/AAAAAAAAN44/uN81XG8pbBI/s1600/Sarah-Lorraine+Riek2.jpg " title="Miss World 2013 - Sarah Lorraine Riek – Beatiful in sexy Bikini" width="200" /> </a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://waones-sbm.blogspot.com/2013/08/camille-munro-miss-world-2013-kontestan.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="133" src=" http://4.bp.blogspot.com/-HqIRoRxjkg0/Uh2qizzFazI/AAAAAAAAN68/3PgPhTzOr-M/s1600/Camille+MUNRO6.jpg " title="Miss World 2013 - Camille MUNRO – Beatiful in sexy Bikini" width="200" /> </a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://waones-sbm.blogspot.com/2013/08/daniella-ocoro-miss-world-2013.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="133" src=" http://1.bp.blogspot.com/-RnjedUzzTuA/Uh2rOne3IwI/AAAAAAAAN8w/TdshcDAnqJk/s1600/Daniella+OCOR%C3%935.jpg " title="Miss World 2013 - Daniella OCORÓ – Beatiful in sexy Bikini" width="200" /> </a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://waones-sbm.blogspot.com/2013/08/eva-dombrovska-miss-world-2013.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="133" src=" http://3.bp.blogspot.com/-b4yP_harvsU/Uh2ujFcDKNI/AAAAAAAAOA0/4JxLinhz3aE/s1600/Eva+DOMBROVSKA7.jpg " title="Miss World 2013 - Eva DOMBROVSKA – Beatiful in sexy Bikini" width="200" /> </a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://waones-sbm.blogspot.com/2013/08/melinder-bhullar-miss-world-2013.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="133" src=" http://1.bp.blogspot.com/-GYZxN4Dcorg/Uh2wP4thmkI/AAAAAAAAOFo/dJocu-tISX8/s1600/Melinder+Bhullar6.jpg " title="Miss World 2013 - Melinder Bhullar – Beatiful in sexy Bikini" width="200" /> </a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://waones-sbm.blogspot.com/2013/08/ivana-milojko-miss-world-2013-kontestan.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="133" src=" http://3.bp.blogspot.com/-a-HVOMYlrOk/Uh2y--4EQTI/AAAAAAAAOKo/bc7_B6GI3AQ/s1600/Ivana+MILOJKO15.jpg " title="Miss World 2013 - Ivana MILOJKO – Beatiful in sexy Bikini" width="200" /> </a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://waones-sbm.blogspot.com/2013/08/luz-mery-decena-rivera-miss-world-2013.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="133" src=" http://4.bp.blogspot.com/-ndS7WtcxMO8/Uh20GnixQAI/AAAAAAAAOO4/RLRVqVq7uPk/s1600/Luz+Mery+DECENA+RIVERA6.jpg " title="Miss World 2013 - Luz Mery Decena RIVERA – Beatiful in sexy Bikini" width="200" /> </a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://waones-sbm.blogspot.com/2013/09/coral-ruiz-reyes-miss-world-2013.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="133" src=" http://3.bp.blogspot.com/-kEKLU34s9_8/Uh21kDZ8s0I/AAAAAAAAOSs/w2wMjY1HB18/s1600/Coral+RUIZ+REYES2.jpg " title="Miss World 2013 - Coral RUIZ REYES – Beatiful in sexy Bikini" width="200" /> </a>
</dt>
</dl>
</div>
</div>


Kode Script di atas adalah Code>> Cara Menyusun Gallery Photo di Blogspot

Perhatian :

• Kode yang berwarna merah adalah url foto yang didapatkan dari hosting setelah foto diupload.
• Ukuran foto bisa diganti dengan merubah angka 150 dan 200.
• Angka 25% adalah prosentase untuk membuat foto berjajar menyamping 4 kolom (rumusnya: 100% dibagi 4 = 25%)
• Bila ingin menambah jumlah foto tinggal copy saja mulai kode

<dl class="gallery-item">

sampai dengan kode

</dt>
</dl>

demikian pula jika ingin menguranginya.
• Saat menuliskan kode harus benar-benar rapat, jangan menggunakan enter, bila masih terdapat ruang kosong maka fungsikanlah backspace untuk menghapusnya sehingga kode menjadi rapat.
Jika Sudah Selesai Save dan lihat Hasilnya.

-----------------------------------------
Sampai disini postingan Cara Menyusun Gallery Photo di Blog sebagai salah satu kunci kesuksesan blog yang bisa anda terapkan khususnya yang baru terjun di dunia blogger pemula seperti saya,

Setelah anda mengerti Cara Menyusun Gallery Photo di Blog, mungkin anda tertarik untuk bisa memasang Gambar dengan menggunakan CSS pada blog anda, silahkan anda baca pada artikel CARA MELIPAT GAMBAR DENGAN MENGGABUNGKAN CSS3 DAN JQUERY

Semoga postingan Cara Mudah Menyusun Gallery Photo di Blog diatas dapat bermanfaat untuk anda, salam sukses selalu ...

Edit; wawansurya
Sumber Mitra terkait;
http://wwbisnis.blogspot.com
www.affiliate-waones.com
http://waones-sbm.blogspot.com
http://mitra-sbm.blogspot.com
Terima kasih sudah Mau Berkunjung Keblog Ini – jika ada yang kurang puas ... Comment aja .. yah!!!

merchant 
Search Engine

Artikel Menarik Lainnya :



2 comments:

  1. keren... makasih banyak infonya... langsung tekapeh buat praktek, blog saya masih berantakan imagenya. :-).

    ReplyDelete