Sıcak sıcak, yeni çıktı !

Yazarlarımız

Jquery ile blogunuza slider ekleyin

19 Mart 2012 Pazartesi
 Evet inanılmaz bir silder hazırlamak için bu eklentiyi kullanabilirsiniz.. Nasıl mı ?
Temanızı yedeklemeyi unutmayın diyerek söze başlıyorum. Bu  eklenti ile kaliteli bloglar oluşturmak artık daha kolay.
ésosyofikir,

1.Adım. Blogger'ınıza tıklayın ve Tasarım ardından HTML'Yİ DÜZENLE'ye tıklayın..

2.Adım. Ctrl+ F tuşuna basarak aşağıdaki kodu arayınız


]]></b:skin>


3. Adım. Kodu buldunuz.. Şimdi bu koddan hemen önce aşağıdaki kodu yapıştırınız.

/* http://Sosyofikir.Com/ Slider Kod Başlangıcı */

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}

ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;max-width:100%;}

ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}

p.bjqs-caption{display:block;max-width:96%;margin:0;padding:2%;position:absolute;bottom:0;background:rgba(0,0,0,0.7);color:#fff;-moz-border-radius: 6px;-webkit-border-radius: 6px;-moz-box-shadow: 4px 4px 4px #dddddd;-webkit-box-shadow: 4px 4px 4px #dddddd;}

}
/*http://Sosyofikir.Com/ Slider Kod Sonu*/



4.Adım
Ctrl+F tuşlarına basarak aşağıdaki kodu bulunuz.
</head>

Hemen öncesine şu kodu yapıştırınız
<!-- http://Sosyofikir.Com/ Slider Kod Başlangıcı -->
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/9921010228/basic-jquery-slider.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#my-slideshow&#39;).bjqs({
&#39;width&#39; : 940,
&#39;height&#39; : 340,
&#39;showMarkers&#39; : true,
&#39;showControls&#39; : true,
&#39;centerMarkers&#39; : false
});
});
</script>
<!-- http://Sosyofikir.Com/ Slider Kod Bitişi -->

Kırmızı ile gösterilen yerler boyularıdır onu kendi temanıza uygun ayarlayabilirsiniz.
Şimdi temanızı kaydedebilirsiniz.

Şimdi sıra geldi son aşamaya.. Html Javascript eklemek..  Tasarım >add gadget > html javascript ekle..

<div id="my-slideshow">
<ul class="bjqs">
<li><img title="Yazı başlığınız buraya gelecek" src="http://1.bp.blogspot.com/-6VtyHuKWXec/T00nRHDBfKI/AAAAAAAAFwQ/FwyFSdzpq5I/s1600/slider-image1.jpg"/></li>

<li><img title="Yazı başlığınız buraya gelecek" src="http://1.bp.blogspot.com/-PpkbSLY_9TQ/T00nR_BmGGI/AAAAAAAAFwY/B-WYpsKXJTM/s1600/slider-image2.jpg"/></li>

<li><img title="Yazı başlığınız buraya gelecek" src="http://2.bp.blogspot.com/-iywK-OLiBio/T00nPynnhOI/AAAAAAAAFwI/Sic5_siiUb0/s1600/slider-image-3.jpg"/></li>

<li><img title="Yazı başlığınız buraya gelecek" src="http://1.bp.blogspot.com/-07WMvWuPh28/T00nUTHpPZI/AAAAAAAAFwg/zQp89S1-5fY/s1600/slider-image4.jpg"/></li>

<li><img title="This is a another longer caption that can be the lenght of the image or even longer onto the next line." src="http://2.bp.blogspot.com/-c5hZdFVFe1E/T00nVcWvScI/AAAAAAAAFwo/t7hX91c07Xc/s1600/slider-image5.jpg"/></li>
</ul>
</div>

Hiç yorum yok:

Yorum Gönder

Türkçe dil kurallarına lütfen dikkat edelim.
Yorumunuz en kısa sürede yayınlanacaktır..
Yorumlarınız bizim için değerlidir.