Secara keseluruhan bila tetap tidak berjalan juga, kemungkinan ada ID unique and script snippet (yang tertanam pada blog) yang bentrok dengan script bawaan blogger. Seperti blog ini, tidak jalan loh :(( Kinerja lightbox blogger akan meng-genarated semua gambar yg ada. Tepatnya Koben juga tidak tauk, apa pada bagian postingan saja bahkan malah bisa keseluruhan :-?? Proyek baru dan masih berjalan kelihatannya dari embah google bagi para pengguna :D
Kali ini Beben Koben si bloglang anu ganteng kalem tea akan mencoba meng-snippet seperti waktu melakukan Snippet CSS Code Widget Plipeo. Tidak bukan agar terlihat lebih full stylish ;)) b-) Gue :p hanya memberikan sentuhan tebal border, garis lengkung (border-radius) dan juga warna to' :))
Snippet CSS Lightbox Image Blogspot
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #000; /* warna latar belakang pada thumbnail yg ada dibawah */
border-top: 1px solid red; /* garis border pada image */
opacity: .3; /* efek transparansi */
-moz-opacity: .3; /* efek transparansi mozilla browse */
}
.CSS_LIGHTBOX_INDEX_INFO {
color: yellow; /* warna tulisan pada jumlah gambar */
font-weight: bold; /* tulisan menjadi tebal */
}
.CSS_LIGHTBOX_BTN_CLOSE_POS {
top: 10px; /* batas tanda tutup dari sisi atas */
right: 10px; /* batas tanda tutup dari sisi kanan */
}
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline:3px solid #fff; /* tebal, gaya dan warna garis pada gambar */
outline-offset: 5px; /* lebar outline dengan gambar */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border:1px solid red;
-webkit-outline-radius: 10px;
-moz-outline-radius: 10px;
outline-radius: 10px;
}
.CSS_LIGHTBOX_FILMSTRIP:hover {
opacity: 1;
-moz-opacity: 1;
}
Untuk melihat variasi gaya outline sobat bisa lihat dimari outline style property by w3school. Kode CSS warna biru, kode coba2 Koben, yang tidak ditemukan di web developer manapun mengenai itu. Tapi berfungsi bos :D dan merupakan kode yg meberikan efek garis lengkung pada outline attribute. Jika tidak dipakai, maka outline:3px solid #fff; akan jadi kotak (no border-radius)
CSS_LIGHTBOX_BTN_CLOSE_POSHanya bisa dipindahkan ke kiri atau ke kanan saja.
CSS_LIGHTBOX_FILMSTRIP:hover
Efek agar tranparansi menjadi kembali jelas ketika disorot.
Scroll pada mouse berfungsi sama dengan arah tanda panah pada keyboard yaitu next or previous image.
http://www.blogger.com/static/v1/widgets/3353720152-widget_css_lightbox_bundle.css
Jika ada blogger yang mengsnippetnya lebih dalam dan banyak lagi!!! boleh sharing² disini juga :-" \:d/
Resource from the blogger buzz Your images never looked so good.
Cara mendisablekan feature lighbox image blogger bisa dibaca di Menonaktifkan Image Lightbox for Blogspot.
Semoga bermanfaat :)
Loading... |
1 comments:
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...