Sabtu, 14 September 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

»»  READ MORE ...

CARA MUDAH MEMBUAT GALERI FOTO PADA BLOGSPOT



Galery Foto pada Blogspot

Dibanyak postingan 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.

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 MEMBUAT GALERI FOTO PADA BLOGSPOT




Disini ada sedikit tutorial bagaimana cara membuat album menarik di blog sobat tanpa harus menggunakan template album tersebut.

Test Image






Untuk membuat gambar gallery seperti diatas, 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 :

Kodenya

<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>
<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="http://waones-sbm.blogspot.com/2013/08/sarah-baderna-miss-world-2013-kontestan.html" target="_blank">
<img border="0" height="150" src=" http://2.bp.blogspot.com/-sbymkSh25kI/Uh2oRoPPI-I/AAAAAAAAN3M/le6fdvzCx_0/s1600/Gina+Hargitay5.jpg " width="200" /></a>
</dt>
</dl>


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

------------------------------------------------------
Sampai disini postingan Cara Mudah membuat Galeri Foto pada Blogspot sebagai salah satu kunci kesuksesan blog yang bisa anda terapkan khususnya yang baru terjun di dunia blogger pemula seperti saya,

Setelah anda mengerti Cara membuat Galeri Foto pada Blogspot 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 MEMBUAT GALERI FOTO PADA BLOGSPOT 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

»»  READ MORE ...

CARA MEMBUAT GALLERY FOTO DENGAN EFEK ZOOM



Menyusun Foto dengan Efek Zoom pada Posting Blog


Membuat gallery foto dengan CSS kedengarannya sangat menarik sekali, karena dengan menggunakan CSS tentunya akan banyak menghasilkan triks-triks yang bagus misalnya yang sedang saya bahas sekarang ini mengenai cara membuat image/foto gallery menggunakan CSS3.

Tutorial menggunakan CSS yang disajikan sekarang ini sangat menarik sekali apalagi ditempatkan di blog, misalnya dengan koleksi foto-foto yang menjadi idola anda, tentunya sangat tepat untuk ditempatkan di blog anda sebagai koleksi album atau photo galeri.





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 MEMBUAT GALLERY FOTO DENGAN EFEK ZOOM



Bagaimana cara membuat image/photo gallery menggunakan CSS3? Caranya mudah, anda hanya membuat sebuah postingan dan tempatkan kode-kode yang akan saya berikan pada postingan anda dalam posisi HTML, cukup paham bukan? Ok sekarang anda coba arahkan kursor mouse anda ke gambar dibawah ini untuk melihat hasilnya.

Yang lebih menarik lagi dari image gallery dengan css3 yaitu adanya efek hover yang apabila mouse didekatkan atau diarahkan ke gambar atau foto gallery maka foto/gambar tersebut akan membesar. Cukup menarik bukan? Belum terlihat menarik kalau belum anda yang mencobanya.


TEST IMAAGE
Silahkan lihat dan arahkan kursor anda pada Gambar dibawah



















========================

dibawah Ini kode CSS3 efek hover untuk galllery photo yang harus anda masukkan di dalam postingan anda, ingat harus posisi HTML ya?


<style type="text/css">
ul.gambar{padding:230px; border:3px solid #000;     position:relative;     list-style:none;-webkit-box-shadow:7px 4px 10px rgba(0,0,0,.4); -moz-box-shadow:7px 4px 10px rgba(0,0,0,.4);   &nbsp: -moz-border-radius:20px;     -webkit-border-radius:20px;     background:-webkit-gradient(radial,45 45,50,50 10,640,from(#444),to(#333)) !important;    background:url(http://3.bp.blogspot.com/_e-apL_-d5-c/TFXdvN8jo4I/AAAAAAAAAso/IMwe2d4a9zc/s200/batuakik.jpg)}
ul.gambar li{    position:absolute;     top:50%;     left:50%;     padding:6px 6px 40px 6px;      background:url(http://1.bp.blogspot.com/_e-apL_-d5-c/TDSznl_8u-I/AAAAAAAAAlQ/kDb2FTiQchY/s320/granitetilemed.png); width:150px;  height:120px;  -moz-border-radius:15px;  -webkit-border-radius:15px;  -moz-box-shadow:1px 1px 6px #222;  -webkit-box-shadow:1px 1px 6px #222;  box-shadow:1px 1px 6px #222;  -webkit-transition:all 3s ease-in-out;  z-index:0}
ul.gambar li img{ width:100%;  height:100%}
ul.gambar li:nth-child(1){ margin-top:-130px;  margin-left:-130px;  -moz-transform:rotate(30deg);  -webkit-transform:rotate(30deg);  transform:rotate(30deg)}
ul.gambar li:nth-child(2){ margin-top:-120px;  margin-left:-10px;  -moz-transform:rotate(19deg);  -webkit-transform:rotate(19deg);  transform:rotate(19deg)}
ul.gambar li:nth-child(3){ margin-top:-10px;  margin-left:-180px;  -moz-transform:rotate(-10deg);  -webkit-transform:rotate(-10deg);  transform:rotate(-10deg)}
ul.gambar li:nth-child(4){ margin-top:-50px;  margin-left:-80px;  -moz-transform:rotate(12deg);  -webkit-transform:rotate(12deg);  transform:rotate(12deg)}
ul.gambar li:nth-child(5){ margin-top:20px;  margin-left:30px;  -moz-transform:rotate(-20deg);  -webkit-transform:rotate(-20deg);  transform:rotate(-20deg)}
ul.gambar li:nth-child(6){ margin-top:-210px;  margin-left:-280px;  -webkit-transform:rotate(-20deg);  -moz-transform:rotate(-20deg)}
ul.gambar li:nth-child(7){ margin-top:20px;  margin-left:150px;  -moz-transform:rotate(60deg);  -webkit-transform:rotate(60deg);  transform:rotate(-20deg)}
ul.gambar li:nth-child(8){ margin-top:-190px;  margin-left:90px;  -moz-transform:rotate(19deg);  -webkit-transform:rotate(19deg);  transform:rotate(19deg)}
ul.gambar li:hover{ z-index:10;  width:480px;  height:322px;  margin-top:-170px;  margin-left:-240px;  -webkit-transition:opacity;  -moz-box-shadow:8px 8px 24px #111;  -webkit-box-shadow:8px 8px 24px #111;  box-shadow:8px 8px 24px #111;  -moz-transform:rotate(0deg);  -webkit-transform:rotate(0deg);  transform:rotate(0deg)}
</style>

<ul class="gambar">
<li> <img height="322" src=" http://1.bp.blogspot.com/-2L2bGuzSk6c/Uh2kNr13_TI/AAAAAAAANv0/eVGmH4EgRVE/s1600/Annamaria+Rakosi16.jpg " title=" Annamaria Rakosi " width="480" /> </li>
<li> <img height="322" src=" http://4.bp.blogspot.com/-tK6TO8QrIIc/Uh2mgP5zySI/AAAAAAAAN0U/yNi1oZG_eEg/s1600/Sarah+Baderna9.jpg " title=" Sarah Baderna " width="480" /> </li>
<li><img height="322" src=" http://2.bp.blogspot.com/-sbymkSh25kI/Uh2oRoPPI-I/AAAAAAAAN3M/le6fdvzCx_0/s1600/Gina+Hargitay5.jpg" title=" Gina Hargitay " width="480" /></li>
<li><img height="322" src=" http://4.bp.blogspot.com/-C_pb-uCFJ28/Uh2o5hoKG_I/AAAAAAAAN4Q/HSGVXVlk6f0/s1600/Michiko+Tanaka2.jpg " title=" Michiko Tanaka " width="480" /></li>
<li><img height="322" src=" http://3.bp.blogspot.com/-Cjqo2VNYEcs/Uh2psXOp42I/AAAAAAAAN44/uN81XG8pbBI/s1600/Sarah-Lorraine+Riek2.jpg " title=" Sarah Lorraine Riek " width="480" /></li>
<li><img camille="" height="322" munro="" src=" http://4.bp.blogspot.com/-HqIRoRxjkg0/Uh2qizzFazI/AAAAAAAAN68/3PgPhTzOr-M/s1600/Camille+MUNRO6.jpg " title="”" width="480" /></li>
<li><img height="322" src=" http://1.bp.blogspot.com/-RnjedUzzTuA/Uh2rOne3IwI/AAAAAAAAN8w/TdshcDAnqJk/s1600/Daniella+OCOR%C3%935.jpg " title=" Daniella OCORÓ " width="480" /></li>
<li><img height="322" src=" http://3.bp.blogspot.com/-b4yP_harvsU/Uh2ujFcDKNI/AAAAAAAAOA0/4JxLinhz3aE/s1600/Eva+DOMBROVSKA7.jpg " title=" Eva DOMBROVSKA " width="480" /> </li>
<li><img height="322" src=" http://1.bp.blogspot.com/-GYZxN4Dcorg/Uh2wP4thmkI/AAAAAAAAOFo/dJocu-tISX8/s1600/Melinder+Bhullar6.jpg " title=" Melinder Bhullar " width="480" /> </li>
<li><img height="322" src=" http://3.bp.blogspot.com/-a-HVOMYlrOk/Uh2y--4EQTI/AAAAAAAAOKo/bc7_B6GI3AQ/s1600/Ivana+MILOJKO15.jpg " title=" Ivana MILOJKO" width="480" /> </li>
<li><img height="322" src=" http://4.bp.blogspot.com/-ndS7WtcxMO8/Uh20GnixQAI/AAAAAAAAOO4/RLRVqVq7uPk/s1600/Luz+Mery+DECENA+RIVERA6.jpg " title=" Luz Mery Decena RIVERA " width="480" /> </li>
<li><img height="322" src=" http://3.bp.blogspot.com/-kEKLU34s9_8/Uh21kDZ8s0I/AAAAAAAAOSs/w2wMjY1HB18/s1600/Coral+RUIZ+REYES2.jpg " title=" Coral RUIZ REYES " width="480" /> </li>
</ul>



Keterangan :
Teks warna merah silahkan anda ganti dengan url gambar atau image anda sendiri dan Teks Title ganti dengan title gambar anda.

------------------------------------------------------
Sampai disini postingan Cara Membuat Gallery Foto dengan efek Zoom sebagai salah satu kunci kesuksesan blog yang bisa anda terapkan khususnya yang baru terjun di dunia blogger pemula seperti saya,

Setelah anda mengerti Cara Membuat Gallery Foto dengan Efek Zoom pada posting 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 MEMBUAT GALLERY FOTO DENGAN EFEK ZOOM 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

»»  READ MORE ...

CARA MEMBUAT FOTO GALLERY DENGAN TITTLE DAN DESCRIPSION



Membuat dan Menyusun Foto Gallery dengan Tittle dan Descripsion


Foto gallery biasanya digunakan untuk mereka yang sedang membuat toko online, guna memperkenalkan produk mereka pada pengguna internet. Ini juga tidak menutup kemungkinan digunakan bagi mereka yang suka menampilkan gambar foto guna menambah semarak tampilan sebuah blog.

Khususnya bagi Anda yang sedang membuat toko online di blogspot, mungkin foto gallery ini bisa menjadi salah satu solusi untuk menampilkan dagangan atau produk Anda secara online.

Anda bisa memasukkan kode foto gallery ini dimana saja terserah Anda. Bisa di halaman posting, bisa di sedebar maupun di header.
Jika ingin tampil di sedebar atau header Anda tinggal menambahkan gatget html/javascript, kemudian memasukkan kode ini di dalamnya beserta alamat gambar foto anda.


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 MEMBUAT FOTO GALLERY DENGAN TITTLE DAN DESCRIPSION



Langkah-langkah atau cara membuat foto gallery untuk toko online bisa Anda lihat caranya di bawah ini.
Sebelumnya hasil dari foto gallery yang akan kita buat nanti akan seperti ini:

TEST IMAGE
Contoh gambar berikut link yang dituju





=================

Untuk contoh cara membuat dan menyusun gambar diatas kode Sciftnya adalah ;

....<style type="text/css">
/*--------------------------------*/
div.img { margin:2px; border:1px solid #bc3f74; height:250px; width:auto;
float:left; text-align: left; background-color:#829598;}
div.img img { display:inline; margin:3px; border:5px solid #829598;}
div.img a:hover img { margin:3px; border:5px; solid #bc3f74;}
div.descriptions { text-align:left; font-weight:normal; width:112px; margin:5px;}
</style>
<div align="left" class="img" style="height: auto; padding: 10px; width: auto;">
<div class="img">

<a href="http://waones-sbm.blogspot.com/2013/08/annamaria-rakosi-miss-world-2013_9854.html" target="_blank"><img alt="gallery" height="110" src=" http://1.bp.blogspot.com/-2L2bGuzSk6c/Uh2kNr13_TI/AAAAAAAANv0/eVGmH4EgRVE/s1600/Annamaria+Rakosi16.jpg " width="112" /></a>
<div class="descriptions">
<a href="http://waones-sbm.blogspot.com/" target="_blank"><span style="font-size: large;"><b><span style="color: red;"> HONGARIA </span>&nbsp;</b></span></a>
<a href="http://waones-sbm.blogspot.com/2013/08/annamaria-rakosi-miss-world-2013_9854.html" target="_blank"><b><span style="color: blue;"> Annamaria Rakosi </span></b></a></div>
</div>
<div class="img">

<a href="http://waones-sbm.blogspot.com/2013/08/sarah-baderna-miss-world-2013-kontestan.html" target="_blank"><img alt="gallery" height="110" src=" http://4.bp.blogspot.com/-tK6TO8QrIIc/Uh2mgP5zySI/AAAAAAAAN0U/yNi1oZG_eEg/s1600/Sarah+Baderna9.jpg " width="112" /></a>
<div class="descriptions">
<a href="http://waones-sbm.blogspot.com/" target="_blank"><span style="font-size: large;"><b><span style="color: red;"> ITALIA </span>&nbsp;</b></span></a>
<a href="http://waones-sbm.blogspot.com/2013/08/sarah-baderna-miss-world-2013-kontestan.html" target="_blank"><b><span style="color: blue;"> Sarah Baderna </span></b></a></div>
</div>
<div class="img">

<a href="http://waones-sbm.blogspot.com/2013/08/gina-hargitay-miss-world-2013-kontestan.html" target="_blank"><img alt="gallery" height="110" src=" http://2.bp.blogspot.com/-sbymkSh25kI/Uh2oRoPPI-I/AAAAAAAAN3M/le6fdvzCx_0/s1600/Gina+Hargitay5.jpg " width="112" /></a>
<div class="descriptions">
<a href="http://waones-sbm.blogspot.com/" target="_blank"><span style="font-size: large;"><b><span style="color: red;"> JAMAIKA </span>&nbsp;</b></span></a>
<a href="http://waones-sbm.blogspot.com/2013/08/gina-hargitay-miss-world-2013-kontestan.html" target="_blank"><b><span style="color: blue;"> Gina Hargitay </span></b></a></div>
</div>
<div class="img">

<a href="http://waones-sbm.blogspot.com/2013/08/michiko-tanaka-miss-world-2013.html" target="_blank"><img alt="gallery" height="110" src=" http://4.bp.blogspot.com/-C_pb-uCFJ28/Uh2o5hoKG_I/AAAAAAAAN4Q/HSGVXVlk6f0/s1600/Michiko+Tanaka2.jpg " width="112" /></a>
<div class="descriptions">
<a href="http://waones-sbm.blogspot.com/" target="_blank"><span style="font-size: large;"><b><span style="color: red;"> JEPANG </span>&nbsp;</b></span></a>
<a href="http://waones-sbm.blogspot.com/2013/08/michiko-tanaka-miss-world-2013.html" target="_blank"><b><span style="color: blue;"> Michiko Tanaka</span></b></a></div>
</div>
<div class="img">

<a href="http://waones-sbm.blogspot.com/2013/08/sarah-lorraine-riek-miss-world-2013.html" target="_blank"><img alt="gallery" height="110" src=" http://3.bp.blogspot.com/-Cjqo2VNYEcs/Uh2psXOp42I/AAAAAAAAN44/uN81XG8pbBI/s1600/Sarah-Lorraine+Riek2.jpg " width="112" /></a>
<div class="descriptions">
<a href="http://waones-sbm.blogspot.com/" target="_blank"><span style="font-size: large;"><b><span style="color: red;"> JERMAN </span>&nbsp;</b></span></a>
<a href="http://waones-sbm.blogspot.com/2013/08/sarah-lorraine-riek-miss-world-2013.html" target="_blank"><b><span style="color: blue;"> Sarah Lorraine Riek </span></b></a></div>
</div>
<div class="img">

<a href="http://waones-sbm.blogspot.com/2013/08/camille-munro-miss-world-2013-kontestan.html" target="_blank"><img alt="gallery" height="110" src=" http://4.bp.blogspot.com/-HqIRoRxjkg0/Uh2qizzFazI/AAAAAAAAN68/3PgPhTzOr-M/s1600/Camille+MUNRO6.jpg " width="112" /></a>
<div class="descriptions">
<a href="http://waones-sbm.blogspot.com/" target="_blank"><span style="font-size: large;"><b><span style="color: red;"> KANADA</span>&nbsp;</b></span></a>
<a href="http://waones-sbm.blogspot.com/2013/08/camille-munro-miss-world-2013-kontestan.html" target="_blank"><b><span style="color: blue;"> Camille MUNRO
</span></b></a></div>
</div>
<div class="img">

<a href="http://waones-sbm.blogspot.com/2013/08/daniella-ocoro-miss-world-2013.html" target="_blank"><img alt="gallery" height="110" src=" http://1.bp.blogspot.com/-RnjedUzzTuA/Uh2rOne3IwI/AAAAAAAAN8w/TdshcDAnqJk/s1600/Daniella+OCOR%C3%935.jpg " width="112" /></a>
<div class="descriptions">
<a href="http://waones-sbm.blogspot.com/" target="_blank"><span style="font-size: large;"><b><span style="color: red;"> KOLUMBIA </span>&nbsp;</b></span></a>
<a href="http://waones-sbm.blogspot.com/2013/08/daniella-ocoro-miss-world-2013.html" target="_blank"><b><span style="color: blue;"> Daniella OCORÓ</span></b></a></div>
</div>
<div class="img">

<a href="http://waones-sbm.blogspot.com/2013/08/eva-dombrovska-miss-world-2013.html" target="_blank"><img alt="gallery" height="110" src=" http://3.bp.blogspot.com/-b4yP_harvsU/Uh2ujFcDKNI/AAAAAAAAOA0/4JxLinhz3aE/s1600/Eva+DOMBROVSKA7.jpg " width="112" /></a>
<div class="descriptions">
<a href="http://waones-sbm.blogspot.com/" target="_blank"><span style="font-size: large;"><b><span style="color: red;"> LATVIA </span>&nbsp;</b></span></a>
<a href="http://waones-sbm.blogspot.com/2013/08/eva-dombrovska-miss-world-2013.html" target="_blank"><b><span style="color: blue;"> Eva DOMBROVSKA </span></b></a></div>
</div>
<div class="img">

<a href="http://waones-sbm.blogspot.com/2013/08/melinder-bhullar-miss-world-2013.html" target="_blank"><img alt="gallery" height="110" src=" http://1.bp.blogspot.com/-GYZxN4Dcorg/Uh2wP4thmkI/AAAAAAAAOFo/dJocu-tISX8/s1600/Melinder+Bhullar6.jpg " width="112" /></a>
<div class="descriptions">
<a href="http://waones-sbm.blogspot.com/" target="_blank"><span style="font-size: large;"><b><span style="color: red;"> MALAYSIA </span>&nbsp;</b></span></a>
<a href="http://waones-sbm.blogspot.com/2013/08/melinder-bhullar-miss-world-2013.html" target="_blank"><b><span style="color: blue;"> Melinder Bhullar </span></b></a></div>
</div>
<div class="img">

<a href="http://waones-sbm.blogspot.com/2013/08/ivana-milojko-miss-world-2013-kontestan.html" target="_blank"><img alt="gallery" height="110" src=" http://3.bp.blogspot.com/-a-HVOMYlrOk/Uh2y--4EQTI/AAAAAAAAOKo/bc7_B6GI3AQ/s1600/Ivana+MILOJKO15.jpg " width="112" /></a>
<div class="descriptions">
<a href="http://waones-sbm.blogspot.com/" target="_blank"><span style="font-size: large;"><b><span style="color: red;"> MONTENEGRO </span>&nbsp;</b></span></a>
<a href="http://waones-sbm.blogspot.com/2013/08/ivana-milojko-miss-world-2013-kontestan.html" target="_blank"><b><span style="color: blue;">Ivana MILOJKO </span></b></a></div>
</div>
<div class="img">

<a href="http://waones-sbm.blogspot.com/2013/08/luz-mery-decena-rivera-miss-world-2013.html" target="_blank"><img alt="gallery" height="110" src=" http://4.bp.blogspot.com/-ndS7WtcxMO8/Uh20GnixQAI/AAAAAAAAOO4/RLRVqVq7uPk/s1600/Luz+Mery+DECENA+RIVERA6.jpg " width="112" /></a>
<div class="descriptions">
<a href="http://waones-sbm.blogspot.com/" target="_blank"><span style="font-size: large;"><b><span style="color: red;"> NIKARAGUA </span>&nbsp;</b></span></a>
<a href="http://waones-sbm.blogspot.com/2013/08/luz-mery-decena-rivera-miss-world-2013.html" target="_blank"><b><span style="color: blue;"> Luz Mery Decena RIVERA </span></b></a></div>
</div>
<div class="img">

<a href="http://waones-sbm.blogspot.com/2013/09/coral-ruiz-reyes-miss-world-2013.html" target="_blank"><img alt="gallery" height="110" src=" http://3.bp.blogspot.com/-kEKLU34s9_8/Uh21kDZ8s0I/AAAAAAAAOSs/w2wMjY1HB18/s1600/Coral+RUIZ+REYES2.jpg " width="112" /></a>
<div class="descriptions">
<a href="http://waones-sbm.blogspot.com/" target="_blank"><span style="font-size: large;"><b><span style="color: red;"> PARAGUAI </span>&nbsp;</b></span></a>
<a href="http://waones-sbm.blogspot.com/2013/09/coral-ruiz-reyes-miss-world-2013.html" target="_blank"><b><span style="color: blue;"> Coral RUIZ REYES </span></b></a></div>
</div>
<div class="img">

<a href="http://waones-sbm.blogspot.com/2013/09/elba-fahsbender-merino-miss-world-2013.html" target="_blank"><img alt="gallery" height="110" src=" http://2.bp.blogspot.com/-MXzd-rYvdQY/Uh22e_NaTqI/AAAAAAAAOXg/TQDF-6iD2QQ/s1600/Elba+FAHSBENDER+Merino9.jpg " width="112" /></a>
<div class="descriptions">
<a href="http://waones-sbm.blogspot.com/" target="_blank"><span style="font-size: large;"><b><span style="color: red;"> PERU </span>&nbsp;</b></span></a>
<a elba-fahsbender-merino-miss-world-2013.html="" href="https://www.blogger.com/blogger.g?blogID=1523039433234140620" http:="" target="_blank" waones-sbm.blogspot.com=""><b><span style="color: blue;"> Elba FAHSBENDER Merino </span></b></a></div>
</div>
<div class="img">

<a href="http://waones-sbm.blogspot.com/2013/09/megan-young-miss-world-2013-kontestan.html" target="_blank"><img alt="gallery" height="110" src=" http://4.bp.blogspot.com/-RJ-ZO7mFh3g/Uh23KDUcuNI/AAAAAAAAOZ4/syVNOZxoXBQ/s1600/Megan+Young24.jpg " width="112" /></a>
<div class="descriptions">
<a href="http://waones-sbm.blogspot.com/" target="_blank"><span style="font-size: large;"><b><span style="color: red;"> PHILIPINA </span>&nbsp;</b></span></a>
<a href="http://waones-sbm.blogspot.com/2013/09/megan-young-miss-world-2013-kontestan.html" target="_blank"><b><span style="color: blue;"> Megan YOUNG </span></b></a></div>
</div>
<div class="img">

<a href="http://waones-sbm.blogspot.com/2013/09/joely-bernat-miss-world-2013-kontestan.html" target="_blank"><img alt="gallery" height="110" src=" http://1.bp.blogspot.com/-Lj6zcde9FVg/Uh231JITLFI/AAAAAAAAOcA/yS1endQMQgw/s1600/Joely+Bernat16.jpg " width="112" /></a>
<div class="descriptions">
<a href="http://waones-sbm.blogspot.com/" target="_blank"><span style="font-size: large;"><b><span style="color: red;"> REPUBLIK DOMINIKA </span>&nbsp;</b></span></a>
<a href="http://waones-sbm.blogspot.com/2013/09/joely-bernat-miss-world-2013-kontestan.html" target="_blank"><b><span style="color: blue;"> Joely Bernat </span></b></a></div>
</div>
<div class="img">

<a href="http://waones-sbm.blogspot.com/2013/09/ella-langsford-miss-world-2013.html" target="_blank"><img alt="gallery" height="110" src=" http://4.bp.blogspot.com/-Iy7FQSESmU0/Uh25qG0ArkI/AAAAAAAAOgU/FcuotxSBLDU/s1600/Ella+LANGSFORD7.jpg " width="112" /></a>
<div class="descriptions">
<a href="http://waones-sbm.blogspot.com/" target="_blank"><span style="font-size: large;"><b><span style="color: red;"> SELANDIA BARU </span>&nbsp;</b></span></a>
<a href="http://waones-sbm.blogspot.com/2013/09/ella-langsford-miss-world-2013.html" target="_blank"><b><span style="color: blue;"> Ella LANGSFORD </span></b></a></div>
</div>
<div class="img">

<a href="http://waones-sbm.blogspot.com/2013/09/kristy-marie-agapioy-miss-world-2013.html" target="_blank"><img alt="gallery" height="110" src=" http://2.bp.blogspot.com/-ufiWVhSjmoA/Uh26GEhbMrI/AAAAAAAAOg8/MSCNS6qfNKY/s1600/Kristy+Marie+AGAPIOY.jpg " width="112" /></a>
<div class="descriptions">
<a href="http://waones-sbm.blogspot.com/" target="_blank"><span style="font-size: large;"><b><span style="color: red;"> SIPRUS</span>&nbsp;</b></span></a>
<a href="http://waones-sbm.blogspot.com/2013/09/kristy-marie-agapioy-miss-world-2013.html" target="_blank"><b><span style="color: blue;"> Kristy Marie AGAPIOY </span></b></a></div>
</div>
<div class="img">

<a href="http://waones-sbm.blogspot.com/2013/09/jamey-bowers-miss-world-2013-kontestan.html" target="_blank"><img alt="gallery" height="110" src=" http://4.bp.blogspot.com/-B3SqPwJvQOM/Uh26oBQKsxI/AAAAAAAAOkw/MDSZHNo_-Ok/s1600/Jamey+BOWERS8.jpg " width="112" /></a>
<div class="descriptions">
<a href="http://waones-sbm.blogspot.com/" target="_blank"><span style="font-size: large;"><b><span style="color: red;"> KAMERUN </span>&nbsp;</b></span></a>
<a href="http://waones-sbm.blogspot.com/2013/09/jamey-bowers-miss-world-2013-kontestan.html" target="_blank"><b><span style="color: blue;"> Jamey BOWERS </span></b></a></div>
</div>
</div>


Anda bisa otak-atik sendiri kode di atas agar tampilannya bisa LEBIH BAGUS menurut selera Anda.
Ganti alamat link halaman dan alamat gambar atau YANG BERWARNA MERAH dengan link dan deskripsi milik Anda.

---------------
Sampai disini postingan Cara Membuat Foto Gallery dengan Title dan Deskripsinya sebagai salah satu kunci kesuksesan blog yang bisa anda terapkan khususnya yang baru terjun di dunia blogger pemula seperti saya,

Setelah anda mengerti Cara Membuat Foto Gallery dengan Title dan deskripsinya, 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 MEMBUAT FOTO GALLERY DENGAN  TITTLE DAN DESCRIPSION 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

»»  READ MORE ...