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ı.
