Snippet CSS Feature Image for Blogger

Tunda dulu hasil jalan-jalan ke France Blogger, guna melihat feature teranyar dari blog blogspot platform tercinta :x Sekarang pihak blogspot sudah menanamkan fasilitas lightbox for image. Jadi secara otomatis semua platform blogspot sudah tersedia trik tersebut tanpa harus membuatnya! Bila ada yang tidak berjalan dengan fungsi tersebut, kemungkinan besar sudah menanamkan lightbox with jQuery didalam templatenya?
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;
}

Simpan semua diatas kode ]]></b:skin> SAVE. Beres sudah terpasang effect snippet for image :)

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_POS
Hanya 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.

Jangan pernah menambahkan atribute CSS snippet diatas dengan variabel width, height, padding, margin jika sobat tidak melihat kedalam sourcenya

http://www.blogger.com/static/v1/widgets/3353720152-widget_css_lightbox_bundle.css

. Rubahlah apa yang sudah tertulis disana!!! Waspadalah waspdalah Be carefully ;)

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