masukkan script iklan disini
| Menggunakan Image Lightbox Dengan CSS Dan Javascript |
Tanpa perlu basa basi dan memikirkan SEO dalam postingan lagi, hehehe...
Yuk simak tips berikut..
Menggunakan Image Lightbox Dengan CSS Dan Javascript
1. Login pada akun blogger.com milikmu.
2. Kemudian masuk ke menu TEMA ➔ lalu klik tombol Edit HTML.
3. Setelah itu letakkan kode dibawah ini pada Style blog kamu.
.zoomclick.active{position:fixed;top:0;left:0;bottom:0;right:0;z-index:9999999;background:#000;}
.zoomclick.active img{height:100%;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);}
.flow{overflow:hidden;position:relative;}
.zoomclick.active:after{content:"";cursor:pointer;width:40px;height:40px;background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='34' height='34' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23cccccc' d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-position:top right;-webkit-background-size:40px 40px;background-size:40px 40px;position:absolute;top:10px;right:10px;z-index:2;opacity:0;transition:all .4s ease-in-out}
.zoomclick.active:hover:after{opacity:.8}
@media screen and (max-width:800px){.zoomclick.active img{width:100%;height:auto;}}4. Lalu copy dan pastekan juga kode dibawah ini dan letakkan diatas kode </body>.
function wrap(t, e, r) {
for (var i = document.querySelectorAll(e), o = 0; o < i.length; o++) {
var a = t + i[o].outerHTML + r;
i[o].outerHTML = a
}
}
wrap("<div class='zoomclick'>", ".post-body img", "</div>");
var container = document.getElementsByClassName("zoomclick");
for (var i = 0; i < container.length; i++) {
//For each element in the container array, add an onclick event.
container[i].onclick = function(event) {
this.classList.toggle('active');
var element = document.body;
element.classList.toggle('flow');
}
}5. Terakhir klik tombol Simpan dan Selesai.
Bagaimana? sangat mudah bukan?
Beginilah tutor sederhana untuk tips "Menggunakan Image Lightbox Dengan CSS Dan Javascript". Semoga tutorial ini bermanfaat. Silahkan tinggalkan komentar jika ada bagian yang tidak dimengerti. Terima kasih sudah hadir dan membaca artikel ini. Jangan lupa pula untuk share dan subcribe pada kolom Newsletter untuk tetap mendapatkan update-an postingan terbaru kami.
