Langkah 1. Masuk ke dasbor Blogger Anda , pergi ke Templat> Edit HTML
Langkah 2. Klik di mana saja di dalam area kode dan tekan tombol CTRL + F untuk membuka kotak pencarian Blogger
Langkah 4. Sekarang pilih salah satu gaya di bawah ini dan salin kode di bawahnya:
<style type = 'text / css'> # image-gallery {display: none;} # jquery-gallery {padding: 0; margin: 0; list-style: none; width: 500px;} # jquery-gallery li {width: 84px; tinggi: 80px; ukuran-latar belakang: 100%; - webkit-ukuran-latar: penutup; -moz-ukuran-latar: penutup;-o-background-size: cover; background-size: cover; margin-right: 10px; perbatasan: 3px solid #fff; garis besar: 1px padatan # E3E3E3; margin-bottom: 10px; opacity: .5; filter: alpha (opacity = 50); mengapung: kiri; display: blok; } # jquery-gallery li img {position: absolute; atas: 100px; kiri: 0px; display: none;} # jquery-gallery li.active img {display: block; perbatasan: 3px solid #fff; garis besar: 1px padatan # E3E3E3; lebar: 490px; max-height: 375px;} # jquery-gallery li.active, # jquery-gallery li: hover {outline-color: #DFDFDF;opacity: .99; filter: alpha (opacity = 99);} </style>
Gaya 2
<style type = 'text / css'>
# image-gallery {display: none; }
# jquery-gallery {padding: 0; margin: 0; daftar-gaya: tidak ada; lebar: 200px; }
# jquery-gallery li {ukuran-latar: 100%; - webkit-latar-ukuran: sampul; -moz-latar-ukuran: sampul; -o-background-size: cover; background-size: cover; margin-right: 10px;lebar: 80px; tinggi: 80px; perbatasan: 3px solid #fff;garis besar: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; opacity: .5; filter: alpha (opacity = 50);mengapung: kiri; display: blok; }
# jquery-gallery li img {position: absolute; atas: 0px;kiri: 200px; display: tidak ada; }
# jquery-gallery li.active img {display: block; lebar: 370px; perbatasan: 3px solid #fff; garis besar: 1px padatan # E3E3E3; }
# jquery-gallery li.active, # jquery-gallery li: hover {outline-color: #bbb; opacity: .99; filter: alpha (opacity = 99);}
# gallery-caption {background: rgba (0, 0, 0, 0.3); warna: #fff; ukuran font: 16px; font-weight: bold; transformasi teks: huruf besar; margin: 0 -17px; posisi: absolut; kanan: 0; perataan teks: tengah; atas: 3px; lebar: 370px;}
</style>
Catatan : Layar: tidak ada; ID pertama ( # gambar-galeri ) adalah untuk mencegah gambar muncul dengan ukuran sebenarnya sebelum mereka masuk ke dalam wadah galeri, ini saat memuat kode. Di # jquery-gallery kita memiliki lebar wadah untuk thumbnail (200px), sehingga mereka ditampilkan dalam dua baris dan untuk ini kita perlu menghitung lebar thumbnail (80px) ditambah margin di antaranya. Deklarasi kiri dari # jquery-gallery li img adalah untuk memindahkan thumbnail yang lebih besar yang ditampilkan pada klik mouse sehingga tidak akan tumpang tindih dengan thumbnail yang lebih kecil.
Langkah 5. Rekatkan kode yang Anda salin sebelumnya tepat di bawah tag </head>.
Langkah 6. Tepat di atas tag </head> yang sama, tambahkan skrip ini:
<script type = 'text / javascript'>Pada dasarnya apa yang dilakukan skrip ini adalah untuk melihat apakah ada ID bernama " galeri-gambar " dan mendapatkan item daftar berbeda yang mungkin ada di dalamnya. Elemen-elemen ini akan ditampilkan sebagai thumbnail dan sebuah fungsi akan memutuskan apa yang harus dilakukan ketika mereka diklik. Jadi, setiap kali kita mengklik thumbnail, kelas " aktif " akan ditetapkan dan thumbnail tersebut akan terlihat dalam wadah yang lebih besar.
// //! [CDATA [
var gal = {
init: function () {
if (! document.getElementById ||! document.createElement ||! document.appendChild) menghasilkan false;
if (document.getElementById ('image-gallery')) document.getElementById ('image-gallery'). id = 'jquery-gallery';
var li = document.getElementById ('jquery-gallery'). getElementsByTagName ('li');
li [0] .className = 'aktif';
untuk (i = 0; i <li.length; i ++) {
li [i] .style.backgroundImage = 'url (' + li [i] .getElementsByTagName ('img') [0] .src + ')';
li [i] .title = li [i] .getElementsByTagName ('img') [0] .alt;
gal.addEvent (li [i], 'klik',
untuk (j = 0; j <im.length; j ++) {
im [j] .className = '';
}
this.className = 'aktif';
});
}
},
addEvent: function (obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener (type, fn, false);
}
lain jika (obj.attachEvent) {
obj ["e" + ketik + fn] = fn;
obj [type + fn] = function () {obj ["e" + type + fn] (window.event); }
obj.attachEvent ("on" + type, obj [type + fn]);
}
}
}
gal.addEvent (jendela, 'load', function () {
gal.init ();
});
//]]>
</script>
Langkah 7. Simpan perubahan dengan mengklik tombol Simpan template .
Dan akhirnya, inilah kode HTML. Ini adalah daftar normal dengan ID galeri-gambar , terlampir dalam DIV dengan posisi relatif untuk menghindari efek samping dari posisi yang sudah ada sebelumnya.
Langkah 8.Rekatkan HTML di bawah ini ke tempat Anda ingin menampilkan galeri dengan membuka Layout dan menambahkan gadget baru (klik tautan Tambahkan gadget dan pilih HTML / JavaScript), atau di dalam pos atau halaman di dalam bagian HTML.
<div style = "position: relative;">
<ul id = "galeri-foto">
<li> <img src = " IMAGE-URL1 " /> </li>
<li> <img src = " IMAGE-URL2 "/> </li>
<li> <img src =" IMAGE-URL3 "/> </li>
<li> <img src =" IMAGE-URL4 "/> </li>
<li> <img src = " IMAGE-URL5 " /> </li>
Catatan: jika elemen pada halaman Anda tumpang tindih dengan galeri ini, Anda mungkin perlu menambahkan deklarasi ketinggian setelah posisi: relatif; Nilai ketinggian tergantung pada ukuran galeri Anda.
Contoh:
<div style = "position: relative; height: 500px; ">
Ubah IMAGE-URL1 dengan URL gambar.
<div style = "position: relative;">
<ul id = "image-gallery">
<li> < a href = " page-URL "> <img src =" IMAGE-URL1 " /> </a> < / li>
<li> < a href = " page-URL "> <img src =" IMAGE-url2 "/> </a> </ li>
<li> < a href =" page-URL "> <img src = " IMAGE-URL3 "/> </a> </ li>
<li> < a href =" page-URL "> <
IMAGE-URL5 "/> </a> </li>
</ul>
</div>
Di sini Anda perlu mengganti teks URL-halaman dengan URL halaman / posting Anda.
Beberapa tips:
Untuk menambah ruang untuk lebih banyak baris, tingkatkan nilai 100px dari baris ini:
# jquery-gallery li img {position: absolute; top: 100px ; left: 0px; display: none;}
Simpan widget Anda dan Selamatkan Blogging
Tidak ada komentar: