Blogger Resime Yazı Ekleme Manset Eklentisi

ads

ads

1. Adım HTML Kodlarını Blogger'a ekleyin

 

Blogunuzun kumanda panelinden Tasarım > HTML’yi Düzenle yolunu takip edin ve Widget Şablonlarını Genişlet kutucuğunu işaretleyerek Ctrl+F tuş kombinasyonu yardımıyla ]]></b:skin> kodunu bulun ve bu kodun ü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;
}

2. Adım HTML Kodlarını Blogger'a ekleyin

Yeleşim ➜ Gittikten sonra  Gadget  ekle diyoruz ve HTML/JavaScript aşağıdaki Kodlarımızı ekliyoruz ve Resime Yazı Yazma eklentimizi kurmuş oluyoruz. 

<div id="arka">
    <li><a href="#"><img src="Resimin URL Adresi" width="185" height="120" /></a>
    <div class="text">Yazı Başlığımız</div></li>

 
    <li><a href="#"><img src="Resimin URL Adresi" width="185" height="120" /></a>
    <div class="text">Yazı Başlığımız..</div></li>

 
    <li><a href="#"><img src="Resimin URL Adresi" width="185" height="120" /></a>
    <div class="text">Blogger Eklentileri</div></li>

 
    
 
   
</div>

Renklendirmiş olduğumuz kısımları kendinize göre düzenleyiniz. ...

Kaynak   http://bloggereklentileri.blogspot.com/2012/05/blogger-resime-yaz-ekleme-eklentisi.html?showComment=1344058898521#c3178252672662083702

ads