Dilediğiniz Zaman Arayın Canlı SOHBET Edelim: 
(İlk 5 Dakika Bedava)

Cansu: 008818200818

Esra: 0034951250447

6 Mayıs 2012 Pazar

Resim üstüne yazı eklentisi

Blogger resim üstüne yazı eklentisi 

Bu eklentimiz Serhat Yıldıko tarafından istenmiştir , blogger blogunda kullanmak isteyenler kullanabilirler..

Lafı uzatmadan eklentinin DEMO'suna bakabilir ve aşağıdaki yolları takip ederek blogunuza ekleyebilirsiniz..

Hemen anlatıma geçelim..

Aşağıdaki kodu bulun..
]]></b:skin>
Bir satır üstüne alttaki kodları ekleyelim..
#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 işlemi yaptıysanız kaydedin ve yerleşim kısmına girerek , gadget ekle > HTML/JavaScript seçeneği ile açılan panele aşağıdaki kodlarımızı ekleyelim..
<div id="arka">
<li><a href="#"><img src="http://2.bp.blogspot.com/-wSZqkh26_ho/T6WelzMhQwI/AAAAAAAAB54/Xbh7uLM5HIM/s1600/alt-bar.png" width="185" height="120" /></a>
<div class="text">Deneme Yazı 1 , Bu Bir Denemedir....</div></li>


<li><a href="#"><img src="http://3.bp.blogspot.com/--kCDjZJKKKc/T6WenhQE-NI/AAAAAAAAB6A/Zx8FpFyYOH4/s1600/gadget+ortalama.png" width="185" height="120" /></a>
<div class="text">Deneme Yazı 2 , Bu Bir Denemedir....</div></li>


<li><a href="#"><img src="http://2.bp.blogspot.com/-ebkCfM1dIv4/T6Weos7hl4I/AAAAAAAAB6I/1GUkdSvRXW0/s1600/mause-blogger.png" width="185" height="120" /></a>
<div class="text">Deneme Yazı 3 , Bu Bir Denemedir....DENEME</div></li>





</div>

Kırmızı yazılar resim linkleriniz, mavi yazılar resim açıklamaları , yeşil # tıklandığında gitmek istediğiniz adres...Bu işlemide yaptıysak eklentimiz hazırdır , son olarak yapmamız gereken , eklediğiniz eklentiyi , konu üstüne taşımak..




<<< Bu Yazı için Arama Sonuçları  >>>

Resim üstüne yazı eklentisi , Blogger Resim üstüne yazı eklentisi , Resim üstüne yazı yazma , Resim üstüne nasıl yazı yazılır , blogger resimm eklentileri , blogger image widgets , 


Hiç yorum yok:

Yorum Gönder