Halo sobat semua,,,, beberapa hari artikel dalam blog ini
belum update, karena admin mempunyai banyak kesibukan….kali ini saya akan
membagikan cara membuat galeri foto pada blog,,,,dalam gallery foto ini akan
ada sedikit efek yang akan ditambahkan….
Langsung aja daripada bingung,,,lihat cara pembuatannya
seperti dibawah ini…
Langkah pembuatannya :
- Login ke akun blogger sobat
- Pilih Edit HTML
- Cari kode ]]></b:skin
- Letakkan script dibawah ini tepat diatas ]]></b:skin>
/* 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);
}
- Jika penempatan script sudah dilakukan, langsung save
pekerjaan sobat.
CARA MENAMPILKAN GALERY
- Buka entri baru/postingan baru.
- Pilih mode HTML (bukan compose)
- Tambahkan script dibawah ini di dalam mode HTML.
<div class="gallery">
<a tabindex="1"><img src="URL GAMBAR"></a>
<a tabindex="2"><img src=" URL
GAMBAR "></a>
<a tabindex="3"><img src=" URL
GAMBAR "></a>
<a tabindex="4"><img src=" URL
GAMBAR "></a>
<a tabindex="5"><img src=" URL
GAMBAR "></a>
<a tabindex="6"><img src=" URL
GAMBAR "></a>
<a tabindex="7"><img src=" URL
GAMBAR "></a>
<a tabindex="8"><img src=" URL
GAMBAR "></a>
<a tabindex="9"><img src=" URL
GAMBAR "></a>
<a tabindex="10"><img src=" URL
GAMBAR "></a>
</div>
- Terakhir save pekerjaan sobat semua…
Catatan :
- Ganti kode berwarna merah dengan URL GAMBAR sobat….
- Jumlah gallery bisa di tambah sesuai dengan keinginan
masing-masing..
- Atur posisi gambar dengan yang diingin, sesuaikan dengan
laman postingan..
Semoga artikel kali ini bisa membantu sobat semua…..seamat
berkarya….salam blogger….
