Bloğunuzda Paylaştığınız Resimlerin Üzerine Gelince Açıklama Eklemek Süleyman Akyıldız rwxr-xr-x 0 Temmuz 19, 2013

Filename	Bloğunuzda Paylaştığınız Resimlerin Üzerine Gelince Açıklama Eklemek
Permission	rw-r--r--
Author	Süleyman Akyıldız
Date and Time	Temmuz 19, 2013
Label
Action

Arkadaşlar Merhaba Sizlere Bloğunuzda Paylaştığınız Resimlerin Üzerlerine Gelindiğinde Açıklama Görünmesini İstiyorsanız Bu Eklenti Tam Sizin İçin Demektir.

Kuruluma Başlayalım.

Öncelikle ;

K.Paneli > Şablon > HTML Düzenle

Ardından Aşağıdaki Kodu Control + F Yardımıyla ; 

]]></b:skin>

 Hemen Üstüne Aşağıdaki Kodu Ekliyoruz.

.imagepluscontainer{ /* main image container */
position: relative;
z-index: 1;
}

.imagepluscontainer img{ /* CSS for image within container */
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc{ /* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */
color: white;
-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a{
color: white;
}

.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */

-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1; /* Reveal desc DIV fully */ 

Ardından Bloğunuzda Resim Paylaşacağınız Zaman HTML Bölümünde Hangi Yere Resim Yerleştirilecekse O Bölüme Bu Kod Dizisini Yapıştırıp Ayarlarını Yapıyoruz.

<div class="imagepluscontainer" >
<img src="Burası Resim Url Si." style="width:263px; height:199px; z-index:2" />
<div class="desc">Açıklama Giriniz.</div></div>

ÖNEMLİ NOT : Pembe Olan Yere "Resim URL" Sini 
Koyu Siyah Olan Yere İse " Resim Açıklamasını" Giriniz.

Ekledikten Sonra Kaydet Tıklayıp Çıkıyoruz.

Ve Artık Eklentimiz Başarıyla Kurulmuştur.

Teşekkürler.