Cara Membuat Gallery Foto Di Blog

Dalam tutorial kali ini saya ingin share buat sobat blogger cara membuat gallery foto diblog. Pada postingan saya sebelumnya saya juga pernah share tips seperti ini, lihat postingan saya sebelumnya cara membuat gallery foto di blogspot. Gallery foto kali ini menggunakan CSS3 dan tanpa JavaScript.

Pada gallery photo ini sobat bisa mengklik image/photo untuk mendapatkan efek zooming dan sobat bisa menggunakan tombol tab pada keyboard untuk melihat photo selanjutnya. Penasaran? Silahkan lihat live demonya : DEMO

Cara membuatnya :

1. Login ke akun blogger anda
2. Pada dasbor pilih Template >> Edit HTML >> Proceed
3. Cari kode ]]></b:skin dan 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;
    height: 100%;
    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;
    transition: all 1.0s ease;
    /* CSS3 transform rules */
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

4. Simpan template.
Selanjutnya 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>

Ganti IMAGE LINK dengan alamat gambar sobat.

Catatan: Sobat bisa mengedit lagi bagian CSS diatas, menyesuaikan dengan bagian posting blog  dengan mengganti lebar dan tinggi gallery, atau menambah dan mengurangi jumlah photo yang ingin ditampilkan.

Source : www.tipstrikblogging.com

Tweet