5 Ocak 2014

Blogger Lightbox Eklentisini Nasıl Özelleştiririz

Blogger'ın kendi içinde bulunan ve bize sunduğu lightbox özelliği ile blog yazılarımıza eklediğimiz resimleri okuyucularımız blogumuzdan ayrılmadan rahatlıkla ve orjinal boyutlarında rahatlıkla görebilmektedirler. Lightbox özelliğinin yararları hakkında ve de kullanmak istemeyen yazarlar için lightbox eklentisini kapatma başlığı altında yazdığım yazıyı okuyabilirsiniz.

Blogger'ın esnek yapısı sayesinde lightbox özelliğini istediğimiz gibi özelleştirebiliriz. Lightbox özelliğini özelleştirdikten sonra nasıl göründüğüne bakalım;

Önce 

Sonra

Blogumuzda lightbox özelliğini özelleştirmek için yapmamız gereken ilk şey olası bir soruna karşılık şablonumuzun yedeğini almalıyız. Daha sonra ise aşağıdaki kodları Blogger Kontrol Paneli > Şablon > HTML'yi Düzenle diyerek karşımıza gelen kod sayfası içerisinde ]]></b:skin> kodunu buluyoruz. Hemen üzerine kodlarımızı yerleştiriyoruz.

/* Arkaplan Rengi */
.CSS_LIGHTBOX_BG_MASK {
background-color: #ffffff !important;
background-image: url(image-url-address) !important;
opacity: 0.8 !important;
filter: alpha(opacity=90) !important;
}

/* Resim Border */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}

/* Close Butonu */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(image-url-address) no-repeat !important;
width: 24px !important;
height: 24px !important;
}

/* küçük resimlerin Bulunduğu Bar */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #eaeaea !important;
border-top:1px solid #d2d2d2!important;
}

/* Yazı Rengi */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {
color: #000 !important;
}

/* Resim Numaraları */
.CSS_LIGHTBOX_INDEX_INFO {
color: #555555 !important;
}

NOT: Arka plan rengi, yazı renkleri gibi özellikleri değiştirebilir ve kendinize özel bir lightbox özelliği oluşturabilirsiniz. Bunun için Kodlar arasında hangi özelliği değiştirmek isterseniz size yardımcı olabilmesi için açıklama satırları bulunmaktadır.

0 yorum:

Yorum Gönder

© 2013 iPRESS. All rights resevered. Designed by Templateism