Cara Membuat Gallery Photo Keren Di Blog
Dalam tutorial ini, saya ingin menunjukkan cara membuat galeri foto yang indah di blog tanpa CSS3 dan JavaScript . Ya, Anda membacanya dengan benar, tidak ada JavaScript. Berbeda dengan tutorial sebelumnya, kali ini tidak ada skrip yang digunakan untuk membuat slider gambar dengan JavaScript, hanya fitur CSS3 seperti pemilihan pengguna, ukuran kotak, transisi, bayangan kotak, dan transformasi.
Di galeri foto ini, Anda dapat mengklik gambar / gambar untuk mendapatkan efek zoom dan menggunakan tombol ikon pada keyboard untuk melihat gambar berikutnya. Menarik? Untuk mendapatkan gambaran yang jelas tentang galeri foto yang menakjubkan ini, buka blog yang saya coba.- Masuk ke akun Blogger Anda
- Di panel kontrol, pilih Template >> Edit HTML >> Next
- Ctrl + F Cari Kode ]]> Klik
- Tambahkan kode CSS berikut ke kode ]]>
/ * gaya galeri foto * /
Galeri.
perbatasan: 100px otomatis 0;
Lebar: 800 piksel;
SEBUAH
galeri satu.
Layar: kunci online;
Tinggi: 135 piksel;
posisi relatif
Lebar: 180 piksel;
/ * Hindari opsi CSS3 * /
-moz opsi pengguna: tidak ada;
Opsi pengguna -Webkit: tidak ada;
-khtml opsi pengguna: tidak ada;
Opsi pengguna: Tidak ada;
SEBUAH
Gambar dari galeri.
perbatasan: 8px keras #fff;
Batas bawah: 20px solid #fff;
indikator: indikator;
Terjemahan ke dalam bahasa Assam:
Kontak: 0px;
Lokasi: Benar-benar;
bo: 0px;
Eni: 100%;
indeks Z: 1;
/ * Fungsi ukuran kotak CSS3 * /
-Ukuran kotak Moz: kotak perbatasan;
-Ukuran kotak Webkit: kotak perbatasan;
-O ukuran kotak: kotak tepi;
Ukuran kotak: kotak tepi;
/ * Aturan konversi CSS3 * /
-Transisi webkit: semua kenyamanan 1.0s;
-moz konversi: semua 1.0s mudah;
-O-Transisi: Setiap 1.0s saja;
Konversi: Semua 1.0 sederhana;
/ * CSS3BoxShadows * /
-moz-box-shadow: 2px 2px 4px # 444;
naungan kotak -webkit: 2px 2px 4px # 444;
-O kotak naungan: 2px 2px 4px # 444;
naungan kotak: 2px 2px 4px # 444;
SEBUAH
/ * Konversi rotasi CSS3 khusus * /
Galeri a: anak ke-n (1) img.
-Putar kaus kaki: putar (-25 derajat);
-Konversi webkit: putar (-25 derajat);
Konversi: putar (-25 derajat);
SEBUAH
Galeri a: anak ke-n (2) img.
-Putar kaus kaki: putar (-20 derajat);
-Konversi webkit: Putar (-20 derajat);
Konversi: Putar (-20 derajat);
SEBUAH
Galeri a: anak ke-n (3) img.
-Putar kaus kaki: putar (-15 derajat);
-Konversi webkit: Putar (-15 derajat);
Konversi: putar (-15 derajat);
SEBUAH
Galeri a: anak ke-n (4) img.
-Putar kaus kaki: putar (-10 derajat);
-Konversi webkit: Putar (-10 derajat);
Konversi: putar (-10 derajat);
SEBUAH
Galeri a: anak ke-n (5) img.
- Putar kaus kaki: putar (-5 derajat);
-Konversi webkit: putaran (-5 derajat);
Konversi: putar (-5 derajat);
SEBUAH
Galeri a: anak ke-n (6) img.
-Moz transformasi: rotasi (0 derajat);
-Transformasi Webkit: Putar (0 derajat);
Konversi: Putar (0 derajat);
SEBUAH
Galeri a: anak ke-n (7) img.
- Putar kaus kaki: putar (5 derajat);
-Konversi webkit: Putar (5 derajat);
Konversi: berputar (5 derajat);
SEBUAH
Galeri a: anak ke-n (8) img.
Transformasi -Moz: rotasi (10 derajat);
-Konversi webkit: Putar (10 derajat);
Konversi: putar (10 derajat);
SEBUAH
Galeri a: anak ke-n (9) img.
-Moze Transform: Putar (15 derajat);
-Konversi webkit: Putar (15 derajat);
Konversi: putar (15 derajat);
SEBUAH
Galeri a: anak ke-n (10) img.
-Moze Transform: Putar (20 derajat);
-Konversi webkit: Putar (20 derajat);
Konversi: putar (20 derajat);
SEBUAH
Galeri a: anak ke-n (11) img.
-Moze Transform: Putar (25 derajat);
-Konversi webkit: Putar (25 derajat);
Konversi: putar (25 derajat);
SEBUAH
Galeri a: anak ke-n (12) img.
-Moze Transform: Putar (30 derajat);
-Konversi webkit: Putar (30 derajat);
Konversi: putar (30 derajat);
SEBUAH
Dari galeri: Fokus img.
indikator: standar;
Tinggi: 250%;
Kontak: -150px;
bo: -100px;
Lokasi: Benar-benar;
Eni: 250%;
indeks Z: 25;
/ * Aturan konversi CSS3 * /
-Transisi webkit: semua kenyamanan 1.0s;
-moz konversi: semua 1.0s mudah;
-O-Transisi: Setiap 1.0s saja;
/ * Aturan konversi CSS3 * /
-Moz transformasi: rotasi (0 derajat);
-Transformasi Webkit: Putar (0 derajat);
-O konversi: putar (0 derajat);
Konversi: Putar (0 derajat);
SEBUAH
- Ingat templatenya.
Bagaimana cara mempublikasikan widget ini?
Anda dapat menampilkan galeri foto yang indah ini di sebuah posting atau di halaman terpisah dari blog Anda dengan menambahkan kode berikut ke bagian HTML. Perhatikan bahwa bagian HTML bukan bagian esai!
individualisasi
Ganti IMAGE LINK dengan alamat foto Anda.Jika Anda setuju bahwa Anda ingin menempatkan galeri foto Anda, klik pratinjau.
Anda dapat mengedit bagian CSS di atas, mempersonalisasi bagian posting blog Anda dengan mengubah lebar dan tinggi galeri, atau menambah atau mengurangi jumlah foto yang akan ditampilkan. Anda juga dapat menampilkan galeri foto dengan menambahkan kode tampilan, menghapus sidebar blog, footer blog: tidak ada.
Kembangkan kreativitas Anda.
