Cara Mudah Membuat Gallery Photo Di Blog

Pada tutorial ini saya ingin sharekan cara mudah membuat gallery photo diblog Sobat dengan menggunakan CSS3 dan tanpa JavaScript. Okey, Sobat tidak salah membaca, benar tanpa javaScript. Kalau pada tutorial sebelumnya membuat image slider menggunakan javascript maka kali ini tidak ada penggunaan script sama sekali, murni menggunakan 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. Tertarik untuk membuat gallery photo super keren diblog Sobat? Silahkan ikuti langkah-langkah berikut ini:

Cara Menambahkan Widget Ini KeBlog

Cara Mudah Membuat Gallery Photo Di Blog

>>> Login ke akun Blogger

>>> Pada Dasbor pilih Template >> Edit HTML

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

}

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!

Kustomisasi

Ganti IMAGE LINK dengan alamat gambar Sobat.

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.

Unknown

My name is Chandra Iwan, I want to share crack software for all visitors to my blog, and everything you can get for free. please contact me if there is a broken link or you need a password. Thanks guest

Cara Non Aktifkan AdBlockers Pengunjung Blog Anda dengan JavaScript
Salam Blogging. Saya akan memberikan Tips "Cara Nonaktifkan AdBlockers pengunjung Blog Anda dengan Javascript ". Ya ! Namun saya akan menjelaska...Read More
Pengertian SEO Onpage dan Offpage SEO dan cara Penerapannya di BLOG
Salam Bogging, Di sini Blogger Newbie ( Pemula : seperti saya ) akan mendapatkan cara paling efektif dalam penerapan SEO Onpage dan Off-page. ...Read More
Hal Yang Harus di Perhatikan Sebelum Mengajukan Permohonan ke GOOGLE ADSENSE
Salam Blogging, kali ini saya akan share mengenai 12 Hal yang Harus Dilakukan Sebelum Mengajukan Permohonan ke Google Adsense. Google Adsense...Read More
Pengertian CANONICAL URL dan Fungsinya
Salam Blogging, Kali ini saya akan sedikit menjelaskan tentang Apa itu CANONICAL URL ?. URL Canonical didefinisikan sebagai URL pilihan untuk ...Read More
Cara Membuat Widget RECENT POST Keren dengan Thumbnail
Salam Blogging, Kali ini saya akan memberikan tips atau “Cara Membuat WIDGET RECENT POST dengan Thumbnail di Blogspot/Blogger “ Widget ini fungs...Read More