Tinggalkan komentar

Membuat Galery foto keren di blogspot


DEMO

  • Login ke akun blogger anda
  • Pada dasbor pilih Template >> Edit HTML >> Proceed
  • Klik Ctrl+F cari kode ]]></b:skin
  • Tambahkan kode CSS berikut diatas kode ]]></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);
}
  • Simpan template.

CARA MENAMPILKAN WIDGET INI DALAM POSTINGAN

Anda bisa menampilkan gallery photo keren ini dalam postingan atau pada halaman mandiri blog anda dengan menambahkan kode berikut pada bagian HTML.

Ingat pada bagian HTML bukan bagian Compose!


Kustomisasi

Ganti IMAGE LINK dengan alamat gambar anda.
Silahkan klik pratinjau, jika sudah sesuai dengan yang anda inginkan, silahkan publikasikan gallery photo anda.

Anda bisa mengedit lagi bagian CSS diatas, menyesuaikan dengan bagian posting blog anda dengan mengganti lebar dan tinggi gallery, atau menambah dan mengurangi jumlah photo yang ingin ditampilkan. Anda juga dapat menampilkan gallery photo dengan menghilangkan bagian sidebar blog, footer blog dengan menambahkan kode display: none.


Silahkan mengembangkan kreasi anda.

Demikian tutorial cara membuat gallery photo keren diblog, semoga bermanfaat. Jika ada pertanyaan seputar tutorial ini silahkan kemukakan pada kolom komentar.
Original Source: Script Tutorial

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: