Cara membuat galery gambar yang dapat di perbesar (zoom)

Pada tutorial ini saya akan kembali membahas tentang bagaimana cara membuat suatu gambar pada posting blog yang berjumlah banyak namun tidak membutuhkan banyak ruang posting dan sekaligus terdapat efek zoom pada gambar tersebut. Pada gallery ini default layout gambar hanya akan berbentuk thumbnail yang tampil didalam posting blog namun nampak akan membesar jika pada gambar tersebut tersentuh oleh mouse. Tentu sangat efisien dan minimalis namun akan tetap terlihat elegant. Untuk mengetahui hasil dari tutorial ini bisa langsung dilihat pada demo yang saya sertakan dibagian bawah. Apabila ingin menerapkan kedalam blog, berikut adalah tutorial cara membuat  galery gambar yang dapat di perbesar ( zoom )

Caranya sebagai berikut :

1. Login ke akun blogger
2. Lalu copy kode dibawah ini. ( Postingan dalam mode html )

<style type="text/css">
<style>
#thumbgallery { overflow: visible; }
#thumbgallery ul li { list-style:none; display:inline-table; padding:5px; }
#thumbgallery ul li .pic{
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
opacity:0; visibility:hidden; position:absolute; border:1px solid #52e052;
-webkit-box-shadow:#272229 2px 2px 10px;
-moz-box-shadow:#272229 2px 2px 10px;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
box-shadow:#272229 2px 2px 10px;}
#thumbgallery ul li .mini:hover { cursor:pointer; }
#thumbgallery ul li:hover .pic { width:550px; height:350px; opacity:1; visibility:visible; float:right; }
</style>
<br />
<div id="thumbgallery">
<ul>
<li>
<img alt="" class="mini" height="100" src="image jpg 1 small" width="100" />
<img alt="" class="pic" src="image jpg 2 large" />
</li>
<li>
<img alt="" class="mini" height="100" src="image jpg 1 small" width="100" />
<img alt="" class="pic" src="image jpg 2 large" />
</li>
<li>
<img alt="" class="mini" height="100" src="image jpg 1 small" width="100" />
<img alt="" class="pic" src="image jpg 2 large" />
</li>
<li>
<img alt="" class="mini" height="100" src="image jpg 1 small" width="100" />
<img alt="" class="pic" src="image jpg 2 large" />
</li>
<li>
<img alt="" class="mini" height="100" src="image jpg 1 small" width="100" />
<img alt="" class="pic" src="image jpg 2 large" />
</li>
<li>
<img alt="" class="mini" height="100" src="image jpg 1 small" width="100" />
<img alt="" class="pic" src="image jpg 2 large" />
</li>
<li>
<img alt="" class="mini" height="100" src="image jpg 1 small" width="100" />
<img alt="" class="pic" src="image jpg 2 large" />
</li>
<li>
<img alt="" class="mini" height="100" src="image jpg 1 small" width="100" />
<img alt="" class="pic" src="image jpg 2 large" />
</li>
</ul>
</div>

Keterangan:

• Ganti URL gambar 1 & 2 dengan url foto yang anda inginkan

3. Selanjutnya paste kode tersebut kedalam area posting mode HTML, lalu klik Publikasikan.

Selamat mencoba...

Baca Juga

Josie

Cuma seorang blogger yang jarang ngeblog

Share :

Related Posts