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/AVvXsEjXL9HTGNuBKE25hxETGMYTLoVWvHp6GPlmTyNkDWibTuw01M9aA7jz6EVMt63IKUN7dQYzE_QbV-jTfKDdR5BDaJN_iz68QQtQzjCvOEvoU44hDXo0euhVSLe245fnT6Y5MSrkM6KB/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/AVvXsEjh3UzsTUzcx7QkYcg5mm4eHNkXl663Z5D4VVbhoUCNapMYoIJ0OHOLbeUP_KqqcNhnKldiUR4IF29MRonoasAXzvi4tz6ljdKBsL_S9Lfn6VelER62-u-GEw2x7EgeT1cVyF-l8j5m/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/AVvXsEgieIBgR_RCqQomW2YXziJbdxVoyUfCtA-GmpqbuVIRafFzcyjZRRd2gxTxPSAC0tL8YswLYCoaQpy-aS7B6ZdTsrcEN37NJ5aaG9_uynU91UH9CMLKdE03wIzQ1yauIUdRHXneAtGS/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 , 

Eklentileri.blogspot.com Hakkında.

Blogumuz ilk yayınından bu güne , blogger eklentilerini , tüm blogger kullanıcılarına ulaştırmak için yayın yapmış , bu süre içinde hiç bir şekilde kar/gelir elde etmemiş , etmiyecektir..Lütfen desteklerinizi bizden esirgemeyin..

Bizi Facebook ve Twitter üzerinden de takip edebilirsiniz..