Bumerang - Yazarkafe

Blogger için Basit Şık Görünümlü Slayt Alanı


Blogger için tasarlanmış kurulumu basit görünümü şık olan bir salyt alanı ile daha karşınızdayız.Genişliğini ve yüksekliğini ayarlayabileceğiniz, slayt geçişi otomatik veya tıklamalı olan  jQuery slayt alanını blogunuzda görselliği ön plana çıkarmak istiyorsanız mutlaka kullanmalısınız.Bu slayt alanını blogunuza uygulamak için.
DEMO GÖRÜNÜM
1-Blogger Hesabımızla Giriş yapıyoruz.
2-Kumanda Paneli>Şablon>Htmlyi Düzenle yolunu takip edip widget şablonlarını genişlet kutucuğunu işareetliyoruz.
3-Html kodları içierisnde Ctl+F yardımı ile ]]></b:skin> kodunu aratıp buluyoruz.Aşağıdaki kodu kopyalayıp bulduğumuz ]]></b:skin> kodunun hemen üstüne yapıştırıyoruz.
/* Start Slider Code From http://www.blogokulu.org/ */

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;}

}
/* End Slider Code From http://www.blogokulu.org/ */
4-Html kodları içierisnde yine Ctl+F yardımı ile </head> kodunu aratıp buluyoruz.Aşağıdaki kodu kopyalayıp bulduğumuz </head> kodundan önceki kısma yapıştırıyoruz.
<!-- Start Slider Code From http://www.blogokulu.org/ -->
<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>
<!-- End Slider Code From http://www.blogokulu.org/ -->
Kod içerisinde 940 değeri genişlik 340 değeri yüksekliği belirtir.Bu değerleri değiştirerek slayt alanını kendinize göre boyutlandırabilirsiniz.
5-Yerleşim>Gadget Ekle>Html/Javascript yolunu takip edip açılan gadgetin içerisine aşağıdaki kodu kopyalayıp yapıştırıyoruz.
<div id="my-slideshow">
<ul class="bjqs">
<li><img title="Resim1 Başlığı Buraya Yazılacak" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVAdLfZ8-66-flKhX1OK7zaUZ1r9MvEBzEVRqLnnQd6A_oSLOpDXbNJqTHK1sgNBgjNwbfqfonxfIktnZb7aNOshn9eg283TsZfLMmDmWtey1_Za0R6RxR3GvruZ5Uu3PTUJ_7fGgMvxeK/s1600/slider-image1.jpg"/></li>

<li><img title="Resim2 Başlığı Buraya Yazılacak" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpyiRki99Jgt66whhf5vcjfAAlrcvTtzFf4XU2nT1rB28Ev7FhXWpeLSc0CayCOliV5b8K1tTAGtXUIrcPGCy3HnI5UamjsmApSRKSsuEvk05rhLrFBKOEsaLy1-LoYP6TC-Iq4wYRsZ5D/s1600/slider-image2.jpg"/></li>

<li><img title="Resim3 Başlığı Buraya Yazılacak" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdDYUueygPpr7AHfCwhtgJZdLCTPrPmjz-5NJot0yCgH1bHtYbIZdUWCv3VQqverL4UcBS1LzztGdAwVuK7hAbHjZPzWVSDUKfOlvJLj22jiBOg7eyjk_TOJ9prOmBF-_p33yjyrZasfOp/s1600/slider-image-3.jpg"/></li>

<li><img title="Resim4 Başlığı Buraya Yazılacak" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicMUxWYumi1q42guTDzaZj9ckxrP35uJZ0eaUBV4CaR6R_wcBE9Z7ZQJKK-lbcN4M-yW7rv3RPp8IwcGGxHli3nVUsVfCepe_IuTtZHhYXWPPUhcqf_6zh55-6oH3Mi2vcnkHgWwydlC-M/s1600/slider-image4.jpg"/></li>

<li><img title="Resim5 Başlığı Buraya Yazılacak" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8_0SLJpEMGVhI3flzH4WElE6QLG5ektQ6GKBlrjDuRuMweLFq8aFe0tDYp_cCgWxCmPHD9grHfQ9MO-2tVRAwC11j6m7dlW0BINccMR6sl-2v-fCztJzoI1Xx-9qt0T6F0__5E-b3xz8l/s1600/slider-image5.jpg"/></li>
</ul>
</div>
Son olarak aşağı resimde gösterdiğim yere yani başlığın hemen altına eklediğimiz gadgeti sürükleyip bırakıyoruz.
Videolu Anlatım:
PAYLAŞ

BLOG OKULU

Merhabalar, 2012 yılından beri editörlüğünü yaptığım blogokulu.org sitesinde blogger kullanıcıları için gerekli olan bir çok bilgiyi bulabilrsiniz.Blogger temaları,blogger eklentileri ve blogger dersleri ile blog yazarlarına elimizden geldiğince yardımcı olmaya çalışıyoruz.

  • Image
  • Image
  • Image
  • Image
  • Image
    Disqus Yorumları
    Facebook Yorumları

14 yorum:

  1. gadget eklemeden önizleme yapıyorum anasayfada ustte yazı olarak cıkıyor html yapmadan gadget denedım 4 ayrı ekran resım cıkıyor kocaman cesaret edemedım yoksa bozuk olursa sılmem zor eskı eklentılerımde sılınır busefer calıstıgından emın olmak gerek 

    YanıtlaSil
  2. hocam yen ıeklemıssınız farkettım hos bır slay bence ama denedım dedıgım gıbı olmadı 4 pencerede altalta cıktı lakın onizleme yaptıgımda gadget eklemeden yaptım ondan sorun olacagını sanmıyorum eklesemde degısen olmaz sanırım

    YanıtlaSil
  3. Oguzhan_hazan_199521 Haziran 2012 11:51

    bendede sadece resimler alt alta çıktı neden acaba ?

    YanıtlaSil
  4. Berna yıldız2 Temmuz 2012 16:08

    Merhaba verdiğiniz ilk iki koduniçerisinde sitenizin linki var o linkleri kendi site adresimizle değiştirmemiz gerekiyormu ??  yoksa sizin sitenizin adresimi kalmalı ?? onu anlayamadım..

    YanıtlaSil
  5. slayt oldu ama resimlerin linkini değiştirmeye çalıştım olmadı. var mı formülü?

    YanıtlaSil
  6. <li><a href="RESİM LİNKİ"><img title="RESİM BAŞLIĞI" src="RESMİN URL ADRESİ"/></a></li>
    kodu bu şekilde düzenleyin olur.

    YanıtlaSil
  7. Çok güzel oldu ama next ve prev butonları oluşmadı düz yazı çıktı 

    YanıtlaSil
  8. kodu denedim next-prev butonları çıkıyor,tekrar denemenizi tavsiye ederim.

    YanıtlaSil
  9. hocam 3 kere denedim hep aynı sonucu aldım özelden iletişime geçme imkanımız var mı ?

    YanıtlaSil
  10. şimdi tekrar denedim yeniden ekledim çalışıyor,iletişim için TIKLAYIN.

    YanıtlaSil
  11. GOZUKTU AMA BOZUK CALISTI MALESEF KODLARIDA DOGRU EKLEDIM 

    http://menzilduragi.blogspot.com/ 

    YanıtlaSil
  12.  tekrar denemeni tavsiye ederim, denedim çalışıyor?

    YanıtlaSil
  13. Muhamet GÜNEŞ6 Aralık 2012 11:00

    next prev butonlarını nasıl kaldıracam admin

    YanıtlaSil
  14. aynı şekilde bende dogru ekledim ama benımde bozuk oldu resımler cok azı gorunuyor admin lutfen yardım edermısın yapmak ıstıyorum bunu 
    http://orantarim.blogspot.com/

    YanıtlaSil

Belirtmek istediğiniz farklı konular varsa Burdan Yazabilrisiniz...