Cara Membuat Gallery Photo Keren Di Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Dalam tutorial kali ini saya ingin mengetengahkan cara membuat gallery photo keren diblog dengan menggunakan CSS3 dan tanpa JavaScript. Ya, anda tidak salah membaca, benar tanpa javaScript. Kalau pada tutorial sebelumnya membuat image slidermenggunakan javascript maka kali ini tidak ada penggunaan script sama sekali, murni hanya dengan properti CSS3 seperti, user-select, box-sizing, transition, box-shadow dan transform.

Pada gallery photo ini anda bisa mengklik image/photo untuk mendapatkan efek zooming dan anda bisa menggunakan tombol tab pada keyboard untuk melihat photo selanjutnya. Penasaran? Silahkan ke blog tempat eksperiment saya, untuk mendapatkan ide yang jelas dari gallery photo yang mengagumkan 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);
}

• 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!

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

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.

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

Get free daily email updates!

Follow us!

[khiansantang.blogspot.com]

* BACA JUGA YANG INI YA MASBROW *

Tutorial Blog

• Widget Related Post With Thumbnails
• Cara Mengatasi Gadget Yang Tidak Dapat Diremove Pada Blog
• Cara Membuat Breaking News Di Blog
• Cara Membuat Widget Artikel Terbaru Di Blogspot
• Cara Membuat Email Subscribe di Bawah Postingan Blog
• Cara Merubah Ukuran Huruf Font Judul Posting
• Cara Membuat Burung Twitter Terbang Di Blogspot
• Mengenal Struktur Dasar Template

Artikel ini ditulis oleh : Khiansantang Toejoehpoeloehdoea ^_^ TipsTrikBlogger

Terimakasih sahabat telah membaca : Cara Membuat Gallery Photo Keren Di Blog Tulisan Saya. Anda bisa menyebarluaskan artikel ini, Asalkan meletakkan link dibawah ini sebagai sumbernya <a href="https://khiansantang.blogspot.com/2013/11/cara-membuat-gallery-photo-keren-di-blog.html" target="_blank">Cara Membuat Gallery Photo Keren Di Blog</a> :: Get this widget ! ::

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Dipublikasikan Khiansantang Toejoehpoeloehdoea, | Kamis, 14 November 2013 | 0 komentar