Cara Menciptakan Galerry Gambar Dengan Effek Slide

Cara Membuat Galerry Gambar dengan Effek Slide Dengan menciptakan galerry gambar di Blog sanggup menciptakan tampilan gambar menjadi terlihat rapih, beberapa cara yang sanggup kita lakukan dalam menyusun gambar menyerupai Membuat Kategory Photo Preview atau Cara Menyusun Banyak Gambar di Postingan Blog .

Demo CODE

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

1. Login Keakun Blogger
2. Pilih Template > kemudian klik Edit HTML
3. Kemudian dengan mengunakan CTRL+F Anda cari kode ]]></b:skin>
4. Selanjutnya salin arahan 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 arahan </head> kemudian slin arahan 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 arahan </body> dan copy arahan 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 arahan dibawah ini kemudain Anda menuju Entri gres 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>