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.

TEKAN TOMBOL “VIEW DEMO”

View Demo

 

Bagaimana? Tertarik untuk membuat gallery photo keren diblog anda? Silahkan ikuti langkah-langkah

berikut ini:

CARA MENAMBAHKAN WIDGET INI KEBLOG

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.

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

د� ح� ر� حل ح� ٱ �� ر ب8 حل ح�ي ر: ر� عر� حل ٱ

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email,

dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

 

RELATED POST

Ketikkan em Subscribe