Tutorial Cara Membuat Gallery Foto yang Unik di Blog

Assalamu 'alaikum Wr Wb

Selamat pagi para blogger, cuaca pagi ini sangat dingin sekali ya??

tapi meskipun cuacanya dingin begini, saya masih mau berbagi tentang Tips dan trik dalam dunia blogger.

yang saya akan posting kali ini ialah tentang judul yang sesuai diatas.

langsung saja, simak tutorial berikut!

Langkah pertama :

- Anda harus masuk ke akun blog (Dashboard)

- Klik opsi lainnya

- Klik Template

 Screenshoot

Setelah anda sudah masuk ke Template

- Klik Edit Html

- Cari kode (Tekan Ctrl + F ) : ]]></b:skin

- Kemudian Copy (Salin) Kode Script CSS berikut :

/* Photo Gallery styles */ .gallery { margin: 100px auto 0; width: 800px; } .gallery a { display: inline-block; height: 135px; position: relative; width: 180px; /* CSS3 Prevent selections */ -moz-user-select: none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; } .gallery a img { border: 8px solid #fff; border-bottom: 20px solid #fff; cursor: pointer; display: block; left: 0px; position: absolute; top: 0px; width: 100%; z-index: 1; /* CSS3 Box sizing property */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; /* CSS3 transition rules */ -webkit-transition: all 1.0s ease; -moz-transition: all 1.0s ease; -o-transition: all 1.0s ease; transition: all 1.0s ease; /* CSS3 Box Shadow */ -moz-box-shadow: 2px 2px 4px #444; -webkit-box-shadow: 2px 2px 4px #444; -o-box-shadow: 2px 2px 4px #444; box-shadow: 2px 2px 4px #444; } /* Custom CSS3 rotate transformation */ .gallery a:nth-child(1) img { -moz-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } .gallery a:nth-child(2) img { -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); transform: rotate(-20deg); } .gallery a:nth-child(3) img { -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } .gallery a:nth-child(4) img { -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } .gallery a:nth-child(5) img { -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } .gallery a:nth-child(6) img { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } .gallery a:nth-child(7) img { -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg); } .gallery a:nth-child(8) img { -moz-transform: rotate(10deg); -webkit-transform: rotate(10deg); transform: rotate(10deg); } .gallery a:nth-child(9) img { -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg); } .gallery a:nth-child(10) img { -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); transform: rotate(20deg); } .gallery a:nth-child(11) img { -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); transform: rotate(25deg); } .gallery a:nth-child(12) img { -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); } .gallery a:focus img { cursor: default; height: 250%; left: -150px; top: -100px; position: absolute; width: 250%; z-index: 25; /* CSS3 transition rules */ -webkit-transition: all 1.0s ease; -moz-transition: all 1.0s ease; -o-transition: all 1.0s ease; /* CSS3 transform rules */ -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }

- Setelah itu, paste (tempel) diatas kode script ]]></b:skin

- Simpan (Save) template


Langkah Kedua :

- Klik Laman (Page)


- kemudian Klik HTML


- Copy dan paste (salin dan tempel ) kode script di bawah ini pada Area

<div class="gallery">

<a tabindex="1"><img src="IMAGE LINK"></a>

<a tabindex="2"><img src="IMAGE LINK"></a>

<a tabindex="3"><img src="IMAGE LINK"></a>

<a tabindex="4"><img src="IMAGE LINK"></a>

<a tabindex="5"><img src="IMAGE LINK"></a>

<a tabindex="6"><img src="IMAGE LINK"></a>

<a tabindex="7"><img src="IMAGE LINK"></a>

<a tabindex="8"><img src="IMAGE LINK"></a>

<a tabindex="9"><img src="IMAGE LINK"></a>

<a tabindex="10"><img src="IMAGE LINK"></a>     

</div>

- Simpan (Save)

keterangan :

- Warna kuning pada kata IMAGE LINK, anda ganti dengan Link Foto Anda.

bisa dari link foto di facebook, atau situs lainnya.

Semoga postingan kali ini, bisa sangat membantu anda, karena pada dasarnya orang yang bisa menyenangkan orang lain termasuk perkara Amal.

Terima Kasih.