Yeni baslayanlar icin HAREKETLI MANSET eklentisi

Eeen basiti aramanin zorlugu var..unutmadan soylemek istedim..genelde bloglarda gorunen hareketli mansetleri eklemenin yolu kodlardir kod bolumundendir ya da..
Su var ki bu guzel bir olaydir..bir cok kisinin cani ceker..ozeniyor iste insan..
Istedim ki kolay eklenen ama ayni sonucu veren bir sey olsun..
Aradim taradim ve nihayetinde bulmus oldum elhamdulillah..

Hic bilgisi olmayan dahi ekleyebilir,ebatlarini degistirebilir..tek sart!:Resimlerin ebatlari ayni olmali..hem mansetin hem resimlerin..sonucun tam,guzel olmasi icin..

Canlisini gormek icin BURAYA bakiniz.

Blogumuza eklemek icin...

Kumanda panelimizden Yerlesim diyoruz..

Yerlesim kismindan Gadget ekle diyoruz..

Eklentiler listesinden HTML/Javascript eklentisini seciyoruz..

Asagidaki kodun tumunu kopyaliyoruz..

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
   $('#MBT-slider').s3Slider({ 
      timeOut: 3000 
   }); 
}); 
</script>
<style>
#MBT-slider { 
   width: 590px; /* Keep it 20px-40PX greater than ACTUAL Image size */ 
   height: 335px; 
   position: relative; 
   overflow: hidden; 
   margin-left: 0; 
}
#MBT-sliderContent { 
   width: 590px; 
   position: absolute; 
   top: 0; 
   margin-left: 0; 
}
.MBT-sliderImage { 
   float: left; 
   position: relative; 
   display: none;  top: 0; 
   border:1px solid #ddd;
}
.MBT-sliderImage span { 
position: absolute; 
    font: 10px/15px sans-serif,Arial, Helvetica; 
    padding: 10px 10px; 
    background-color: #000; 
    color: #fff; 
    filter:'alpha(opacity=70)'; 
    -moz-opacity: .5; 
    -khtml-opacity: .5; 
    opacity: .5; 
    text-align:justify; 
}
.MBT-sliderImage span a {
text-decoration:underline; 
color:#FE6602; 
}
.clear { 
   clear: both; 
}
.top { 
    top: 0; 
    left: 0; 
    width: 570px !important; 
    height: 70px; 
} 
.bottom { 
    bottom: 0; 
    left: 0; 
    width: 570px !important; 
    height:90px; 
} 
.left { 
    left: 0; 
    top: 0; 
    width: 110px !important; 
    height: 335px; 
} 
.right { 
    right: 0; 
    bottom: 0; 
    width: 80px !important; 
    height: 319px; 
}
</style> 

<div id="MBT-slider"> 
<ul id="MBT-sliderContent">
<li class="MBT-sliderImage"> 
<img src="RESIM ADRESI" /> 
<span class="right"><h3>RESIM BASLIGI</h3>RESIM ACIKLAMASI [...] </span> 
</li>
<li class="MBT-sliderImage"> 
<img src="RESIM ADRESI 2" /> 
<span class="left"><h3>RESIM BASLIGI 2</h3>RESIM ACIKLAMASI [...] </span> 
</li>

<li class="MBT-sliderImage"> 
<img src="RESIM ADRESI 3" /> 
<span class="top"><h3>RESIM BASLIGI-3</h3>RESIM ACIKLAMASI[...] </span>
</li> 
<li class="MBT-sliderImage"> 
<img src="RESIM ADRESI 4" /> 
<span class="bottom"><h3>RESIM BASLIGI 4</h3>RESIM ACIKLAMASI [...] </span> 
</li>

<li class="MBT-sliderImage"> 
<img src="RESIM ADRESI 5" /> 
<span class="bottom"><h3>RESIM BASLIGI5</h3>RESIM ACIKLAMASI [...] </span>
</li> 
<div class="clear MBT-sliderImage"></div> 
</ul> 
</div>
<br/>

Kodu kopyaladiktan sonra..




 Kopyalanan kodu KOD YERI yazan kisma yapistiriyoruz..

Kodda yapilabilir degisiklikler...

widht genislik height uzunlugu ifade eder..bunlari degistirmek istemediginiz takdirde resimlerinizi varolan ebatlara gore boyutlandirin,kesin kirpin bicin :)

En risksiz olani da bu zaten..

Yapilmasi sart degisiklikler..

Mor daire icine alinan yerleri ilgili adres ve aciklamalarini yerlestiriyoruz..
Mansetimiz 5 adet resimden olusmaktadir..her resmin aciklamasi mevcut-eklenebilir..

NOT:Bu mansetin resimlerde baglanti linki yoktur.. sadece gorsel olarak kullanilabilmektedir,ki o da guzel bir durumdur :)

Butun bu degisiklikleri yaptiktan sonra yerini belirlemeliyiz..bunun en uygun yeri resimde belirtilen yerdir..

Islemler ve ayarlarimi tamamlandiktan sonra...

 Onizleme deyip hersey yolundaysa Kaydet deyip cikiyoruz..

Degilse..calismaya devam :)

Resimleri toplu halde boyutlandiramam bilmiyorum nasil yapiciiim yaa diyen var ise buraya bakmali:Resimleri toplu olarak boyutlandirma ve yazi ekleme

Kolay gelsin hayirli olsun :)



..