Membuat Galery Foto

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…

DEMO

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….