Membuat Gallery Photo Di Blog Dengan Mudah - Gasskeun Membuat Gallery Photo Di Blog Dengan Mudah | Gasskeun
» » Membuat Gallery Photo Di Blog Dengan Mudah

Membuat Gallery Photo Di Blog Dengan Mudah


CBSP Akan share nihh.. Cara gampang menciptakan Gallery Photo di Blogspot, dengan memakai CSS3 dan tanpa JavaScrirt,, haahh tanpa Javascrip emnag dapat ya CB? Ya niscaya lah dapat di dunia ini tidak ada yang tidak bisa,, hehehe, Mrni hanya dengan CSS3 menyerupai User Select Box-Sizing, transition box-shadow dan transform.




Pada gallery photo ini Anda dapat mengkliknya untuk mendapat dampak zoom dan dapat memakai tombol tab pada keyword untuk melihat image/photo selanjutnya.

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

Template >> Edit HTML >>
Klik Ctrl+F cari instruksi ]]></b:skin
Tambahkan instruksi 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 dapat menampilkan gallery photo keren ini dalam postingan atau pada halaman berdikari blog anda dengan menambahkan instruksi berikut pada bab 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 menciptakan Gallery photo diblogspot, biar bermanfaat,, Good Lock and Happy Blogging.
Sumber http://contohblogspotnih.blogspot.com/

Related Posts