Posted by Aak
Aak-share.com Updated at: 8:49:00 PM

Cara Membuat Galerry Gambar dengan Effek Slide

No comments:
Cara Membuat Galerry Gambar dengan Effek Slide ~ Dengan membuat galerry gambar di Blog dapat membuat tampilan gambar menjadi terlihat rapih, beberapa cara yang dapat kita lakukan dalam menyusun gambar seperti Membuat Kategory Photo Preview atau Cara Menyusun Banyak Gambar di Postingan Blog .



Cara lain bisa kita lakukan dengan membuat  Galerry Gambar dengan Effek Slide, cara ini sangat menarik karena dilengkapi dengan effect slide. Menciptakannya dengan menggunakan javascript. Pada  Galerry Gambar dengan Effek Slide ini tidak memberatkan loading pada Blog Anda karena pemasanganya dibawah body . Anda tertarik berikut ini caranya :

1. Login Keakun Blogger
2. Pilih Template > lalu klik Edit HTML
3. Kemudian dengan mengunakan CTRL+F Anda cari kode ]]></b:skin>
4. Selanjutnya salin kode dibawah ini dan pasangkan diatasnya.

.square {
  background-color: #557EA5;
  float: left;
  margin: 0 10px 10px 0;
  width: 150px;
  height: 150px;
}
button {
  background-color: #fff;
  border: solid 1px black;
  bottom: 100px;
  left: 15px;
  cursor: pointer;
  padding: 1em;
  position: fixed;
}

5. Selanjutnya Anda  cari kode </head> lalu slin kode dibawah ini dan pasangkan diatasnya atau sebelumnya.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"/>

6. Kemudian Anda cari kode </body> dan copy kode dibawah ini pastekan diatasnya.

<script type="text/javascript">
squares = document.querySelectorAll('.square');
var slideIn = TweenMax.staggerFrom(squares, 0.5, {
    opacity: 0,
    x: -550,
    rotation: -50
}, 0.1);
$('button').on('click', function () {
    $(slideIn).each(function () {
        this.restart(true);
    });
});
</script>

7. Sekarang kita mulai pemasangan HTML, salin kode dibawah ini kemudain Anda menuju Entri baru dan pasangkan pada MOde HTML .

<div class="container">
<div class="square" style="-webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1;"><img src="URL Gambar" />
</div>
<div class="square" style="-webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1;"><img src="URL Gambar" />
</div>
<div class="square" style="-webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1;"><img src="URL Gambar" />
</div>
<div class="square" style="-webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1;"><img src="URL Gambar" />
</div>
<div class="square" style="-webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1;"><img src="URL Gambar" />
</div>
<div class="square" style="-webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1;"><img src="URL Gambar" />
</div>
<div class="square" style="-webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1;"><img src="URL Gambar" />
</div>
<div class="square" style="-webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1;"><img src="URL Gambar" />
</div>
<div class="square" style="-webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1;"><img src="URL Gambar" />
</div>
<div class="square" style="-webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1;"><img src="URL Gambar" />
</div>
<div class="square" style="-webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1;"><img src="URL Gambar" />
</div>
<div class="square" style="-webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1;"><img src="URL Gambar" />
</div>
<div class="square" style="-webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1;"><img src="URL Gambar" />
</div>
<div class="square" style="-webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1;"><img src="URL Gambar" />
</div>
<div class="square" style="-webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1;"><img src="URL Gambar" />
</div>
<div class="square" style="-webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1;"><img src="URL Gambar" />
</div>
<div class="square" style="-webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1;"><img src="URL Gambar" />
</div>
<div class="square" style="-webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1;"><img src="URL Gambar" />
</div>
</div>
<button>Restart</button>

Catatan : Pada kode yang bertuliskan URL Gambar, isikan dengan URL Gambar Anda.

Semoga bermanfaat!



Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments