Blogger İçin Resim Üstüne Yazı Eklentisi

Blogger bloğunuzda bu eklenti çok şık duracaktır. Eklediğiniz resimlerin alt kısmında kısa yazılar görünecektir. O yazıları elbette siz belirleyeceksiniz. Peki, bu eklentiyi nasıl edinirsiniz? 

Bu eklentiyi Blogger bloğunuza yüklemek için aşağıda söylenenleri yapın. 

İlk olarak aşağıdaki kodu bulacaksınız. 

]]></b:skin> 

Ardından da yukarıdaki kodun tam üstüne aşağıdaki kodları ekleyin. 

#arka{
background-color:#FFFFFF;
}
#arka li{
display:inline-block;
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
}
.text{
padding:3px 5px;
font-size:12px;
width:175px;
color:#FFFFFF;
background: #000000;
background: rgba(0,0,0,0.5);
position:relative;
z-index:1;
text-align:center;
margin-top:-36px;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
.text:hover{
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
background: #000000;
background: #000000;
} 

Yukarıdaki kodu eklediyseniz yerleşimden bir gatget ekleyerek aşağıdaki kodları yapıştırın. 

<div id="arka">
<li><a href="#"><img src="resim" width="185" height="120" /></a>
<div class="text">Resim açıklamaları</div></li>

<li><a href="#"><img src=" resim" width="185" height="120" /></a>
<div class="text"> Resim açıklamaları </div></li>

<li><a href="#"><img src=" resim" width="185" height="120" /></a>
<div class="text"> Resim açıklamaları </div></li>

</div> 

Yapmanız gerekenler bu kadar. Artık resimlerinizin üstünde eklediğiniz açıklamalar görünecektir.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.