Ad Code

Responsive Advertisement

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnk_T1BwFgwhhayrdkrzJwMZBekKyv56oUgGlGWfF7DqmGnP0ofqCrSe47iGCloS4P5ODEYABZYOoHip2xBMUjWIg39zDGS5Nk04m47qcqfxWCfUzTSv2286K-pifDq2MnyOcS5JFJ/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZiErFR4VIjA9Fc4TUp9esQNrCRUSsEF3uFI7cAAGOPWdQD8a5WZ5oWfneGc5r884g32ck0AJWHqL_1AAP9pHD2xNt2EEb_jiNRmB1Ej5TeFjza9e7B55cJ5_mATY6JKn-IQjGRJR9/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkoWOqohl-ExpFp79ohpSOJaDNiSwD2HzsYqmyul57V68GG095eja6qeBRqBTL-8V3Vh3gUsGlcVnP_WZxNCG32W6yom44735Z_zp2f-Zub3p4CfmN9RSMzbrK25KWgcZ4mEngnYvv/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 , 


Yorum Gönder

0 Yorumlar