6 Mayıs 2012 Pazar
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/AVvXsEiRsszmh_QnTAPnG5D42Zq-yBWXKINfJQCppMx66wkhtK9mleNNFjjxHWOHB9YmDBJkLuRADumwnIvq42oTzg80_DGTyTXlLyJcTJcmDMh3autV0QOFWZkbQsplzAM5TD4l7BOnTr7I/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/AVvXsEgz-_WXpV_kEWpCNSUd_84vd53x2rksIIh2LUWvEJrmsk7hNL08wl00MiFwQyNF-DErcbHfLemOPHSEOaYK27telUf56HaY-Aqn8dxxOVfB9A6hLbxFs4bTLNtotD1z4h5QNCQCLUNp/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/AVvXsEgBGL3eLYhvTjeNuxFC23gfJ3p258Myiwfr_-jv_8rQMi8c2E45TgTNwmacyeBNMJh3Z7BZQ7aG5tfh-badsmZGPfD9fGmnwHoGIWzOSDvLP4IeE5_co30ZtxgmeJurhL6rDDhZ21H1/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 ,
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 ,
