Membuat Gallery Photo Di Blog

Cara mudah membuat Gallery Photo di Blogspot, dengan menggunakan CSS3 dan tanpa JavaScrirt, memang bisa ya kalau tidak menggunakan Javascript? Ya pasti lah bisa di dunia ini tidak ada yang tidak bisa,, hehehe, Mrni hanya dengan CSS3 seperti User Select Box-Sizing, transition box-shadow dan transform.

Pada gallery photo ini Anda bisa mengkliknya untuk mendapatkan efek zoom dan bisa menggunakan tombol tab pada keyword untuk melihat image/photo selanjutnya.

Bagaimana cara membuat Gallery photo di Blog,? Silahkan ikuti tutorialnya dibawah ini.

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);.

Save Template.

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

<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>    
<a tabindex="11"><img src="IMAGE LINK"></a>    
<a tabindex="12"><img src="IMAGE LINK"></a>    
</div>

Ganti IMAGE LINK dengan alamat Gambar/Photo Anda.

Demikian cara membuat Gallery photo diblogspot, semoga bermanfaat,, Good Lock and Happy Blogging. Sumber

Posted by Irwantea Sosial

Irwantea Sosial Updated at: Minggu, September 27, 2015