Efek Zoom Photo Gallery
Setelah sebelumnya memposting tentang CARA MEMBUAT DAN MEMASANG GAMBAR ATAU PHOTO YANG BENAR DI BLOG
Kali ini waones article's akan membahas Cara Membuat Efek Zoom-Zoom Photo Gallery Pada Blog.
Namun sebelum posting gambar yang bis di Zoom pada blog, sekali lagi saya ingatkan bahwa jika isi blog anda didominasi artikel, maka gambar, video, dan lagu lebih baik hanya digunakan sebagai tambahan sekadar untuk bukti sehingga bisa meyakinkan pengunjung blog anda dan tentunya gambar itu memang sangat dibutuhkan.
Efek Zoom Photo Gallery adalah Sebuah metode untuk mengontol pembesaran dari serangkaian gambar, yang dapat menampilkan zoom Gambar dalam ukuran penuh. Dengan gradient zoom ini Anda dapat menggerakan cursor ke kiri/ kanan di antara gambar untuk memperbesar gambar yang berdekatan.
Foto di ambil saat acara Touring menuju Pantai Sawarna, Kec. Bayah, Kab. Lebak - Banten.
Letakan Cursor pada Gambar, Gerakkan Cursor Kekiri/ Kanan...
Untuk Demonya lihat Disini
Posted by: Dahe Ugi
Untuk bisa melampirkan dan memasang seperti pada contoh Demo
- Terlebih dahulu DOWNLOAD Kode CSS berikut ini: CSS3Zoom-Zoom.css.
(Dhttps://sites.google.com/site/archivesiugi/javascr/CSS3Zoom-Zoom.cssetail )
- Letakan kedalam tag template anda
- Kemudian save template.
- Gunakan Kode HTML dibawah ini untuk menampilkan Photo Gallery dengan Efek Zoom-Zoom pada
halaman website anda.
Kode HTML
Efek Zoom-Zoom pada Photo Gallery
<h2>Efek Zoom-Zoom pada Photo Gallery</h2>
<div class="gallery">
<a class="p1" href="http://caprt3a.blogspot.com"></a><a class="p2" href="http://caprt3a.blogspot.com"></a><a class="p3" href="http://caprt3a.blogspot.com"></a><a class="p4" href="http://caprt3a.blogspot.com"></a><a class="p5" href="http://caprt3a.blogspot.com"></a><a class="p6" href="http://caprt3a.blogspot.com"></a><a class="p7" href="http://caprt3a.blogspot.com"></a>
<div class="images">
<img class="n1" src="zoooom/pic1.jpg" alt="" /><img class="n2" src="zoooom/pic2.jpg" alt="" /><img class="n3" src="zoooom/pic3.jpg" alt="" /><img class="n4" src="zoooom/pic4.jpg" alt="" /><img class="n5" src="zoooom/pic5.jpg" alt="" /><img class="n6" src="zoooom/pic6.jpg" alt="" /><img class="n7" src="zoooom/pic7.jpg" alt="" />
</div>
</div>
<div class="gallery">
<a class="p1" href="http://caprt3a.blogspot.com"></a><a class="p2" href="http://caprt3a.blogspot.com"></a><a class="p3" href="http://caprt3a.blogspot.com"></a><a class="p4" href="http://caprt3a.blogspot.com"></a><a class="p5" href="http://caprt3a.blogspot.com"></a><a class="p6" href="http://caprt3a.blogspot.com"></a><a class="p7" href="http://caprt3a.blogspot.com"></a>
<div class="images">
<img class="n1" src="zoooom/pic1.jpg" alt="" /><img class="n2" src="zoooom/pic2.jpg" alt="" /><img class="n3" src="zoooom/pic3.jpg" alt="" /><img class="n4" src="zoooom/pic4.jpg" alt="" /><img class="n5" src="zoooom/pic5.jpg" alt="" /><img class="n6" src="zoooom/pic6.jpg" alt="" /><img class="n7" src="zoooom/pic7.jpg" alt="" />
</div>
</div>
Keterangan;
Kode HTML tersebut dapat anda letakan kedalam tag <body> dan untuk gambar dan link yang akan anda gunakan, silahkan lihat cara penempatannya dalam kode HTML pada text yang sudah diberi warna merah dan kuning.
SELESAI...
Sampai disini postingan Membuat Efek Zoom-Zoom Photo Gallery Pada Blog sebagai salah satu kunci kesuksesan blog yang bisa anda terapkan khususnya yang baru terjun di dunia blogger pemula seperti saya.
Dan setelah anda mengetahui Cara membuat Efek Zoom Gambar pada posting Blog, mungkin anda tertarik untuk belajar atau mengetahui cara menggabungkan gambar dengan CSS3 pada blog anda, silahkan anda baca pada artikel CARA MELIPAT GAMBAR DENGAN MENGGABUNGKAN CSS3 DAN JQUERY
Semoga postingan Membuat Efek Zoom-Zoom Photo Gallery Pada Blog diatas dapat bermanfaat untuk anda, salam sukses selalu ...
Edit; wawansurya
Sumber ;
www.affiliate-waones.com
http://waones-sbm.blogspot.com
http://mitra-sbm.blogspot.com
http://caprt3a.blogspot.com/2012/03/membuat-efek-zoom-zoom-pada-photo.html
merchant
Tidak ada komentar:
Posting Komentar