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/>
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 :)
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 :)
..
Güzel bir paylaşım, teşekkürler :)
YanıtlaSil! •• Değerlendiriyorum & Paylaşıyorum •• !
Ricalar :)
Silcok güzel bir paylasim canim benim sayfaya eklememis olsaydin mutlaka bunuda denerdim:)
YanıtlaSilbenim sayfada olanin resimlerinide bu sekilde degise bilirmiyimki daha hic bakmadim nasil durumdalar aslinda :)
bir bakim :))
Seninki iyi Zeynebim yorma kafani kuzum :)
Silyok ben memnunum sadece icindeki resimleri degismek istiyorum daha öncede söyledigim gibi canim
SilGüzelmiş , teşekkürler ;)
YanıtlaSilRica ederim Sepsekerim .
Silbana karinca duasi gibi geliyor :)
YanıtlaSilkafa bos benim sevgim ,bos
yoktum evde ;)
özledüüüüüüm
Sen baska dualar oku bunlari bana biraaaaaaaaaaaaaaaak!!!
SilArarim yine ;)
Çok güzel ilgileniyorsun Maşallah.
YanıtlaSilTeşekkürler verdiğin emekler için :)
Tesekkur ederim Busra'can!
Silcanım beni de ara be :) uğrayamadım kaç zamandır, diyceklerim var sana
YanıtlaSilpes valla bravo.
YanıtlaSil:))))
blogumda yazı dışında hiçbişi bulundurmuyorum.
tek ilgi yazılarıma olsun diye çok sade.
ama blogumun dizaynını revize etmek istersem sana sölüyüm barik.
:)