Bumerang - Yazarkafe

Blogger Slayt Alanı Ekle JQuery ile (Seçtiğiniz Resimleri Manşet olarak Yayınlayın)

Türkiyede en çok tıklanan sitelerin başında haber siteleri geliyor.Haber sitelerinin hemen hemen hepsi ana sayfalarında bir slayt alanı barındırıyor.Haber sitelerinde eskiden bir tane  olan slayt alanı şimdilerde ise 2-3'ü buluyor, habercilerin slayt alanlarının arttırma sebepleri ise ziyaretçilerin en çok slayt alanında gösterilen haberleri tıklaması.Hal böyle olunca slayt alanları yavaş yavaş blog aleminede sıçramaya başladı.Şimdilerde blog yazarlarının çoğu ana sayfalarında, bloglarındaki içeriklerden resimler ekleyerek slayt alnları ile içeriklerini sergiliyor.Blogunda slayt alanı olmayan arkadaşlar üzülmesin,çünkü şimdi anlatacağımız basit yöntem ile sizde blogunuza bir slayt alanı ekliyebilirsiniz.
Ekliyeceğimiz blogger slayt alanı demosu için tıklayın.
Blogunuza ekliyeceğimiz blogger slayt alanı için gadget ekleme yöntemini kullanacağız.Bu eklentiyi sizlere iki adımda anlatacağız.
1.Adım:Blogger hesabımızla giriş yapıyoruz.Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip ediyoruz,widget şablonlarını genişlet kutucuğunu işaretliyoruz.Ctrl+F yardımı ile kodlar içerisnde </head> kodunu aratıp buluyoruz ve aşşağıdaki kodu kopylayaıp bulduğumuz </head> kodundan önceki satıra yapıştırıyoruz
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[

/* ------------------------------------------------------------------------
    s3Slider

    Developped By: Boban Karišik -> http://www.serie3.info/
 CSS Help: Mészáros Róbert -> http://www.perspectived.com/
    Version: 1.0

    Copyright: Feel free to redistribute the script/modify it, as
               long as you leave my infos at the top.
-------------------------------------------------------------------------- */

(function($){

$.fn.s3Slider = function(vars) {

 var element     = this;
 var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
 var current     = null;
 var timeOutFn   = null;
 var faderStat   = true;
 var mOver       = false;
 var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
 var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

 items.each(function(i) {

     $(items[i]).mouseover(function() {
        mOver = true;
     });

     $(items[i]).mouseout(function() {
         mOver   = false;
         fadeElement(true);
     });

 });

 var fadeElement = function(isMouseOut) {
     var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
     thisTimeOut = (faderStat) ? 10 : thisTimeOut;
     if(items.length > 0) {
         timeOutFn = setTimeout(makeSlider, thisTimeOut);
     } else {
         console.log("Poof..");
     }
 }

 var makeSlider = function() {
     current = (current != null) ? current : items[(items.length-1)];
     var currNo      = jQuery.inArray(current, items) + 1
     currNo = (currNo == items.length) ? 0 : (currNo - 1);
     var newMargin   = $(element).width() * currNo;
     if(faderStat == true) {
         if(!mOver) {
             $(items[currNo]).fadeIn((timeOut/6), function() {
                 if($(itemsSpan[currNo]).css('bottom') == 0) {
                     $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                         faderStat = false;
                         current = items[currNo];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 } else {
                     $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                         faderStat = false;
                         current = items[currNo];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 }
             });
         }
     } else {
         if(!mOver) {
             if($(itemsSpan[currNo]).css('bottom') == 0) {
                 $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                     $(items[currNo]).fadeOut((timeOut/6), function() {
                         faderStat = true;
                         current = items[(currNo+1)];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 });
             } else {
                 $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                 $(items[currNo]).fadeOut((timeOut/6), function() {
                         faderStat = true;
                         current = items[(currNo+1)];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 });
             }
         }
     }
 }

 makeSlider();

};

})(jQuery);

//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 550px;
position: absolute;
top:-14px;
padding: 0px;
margin-left: 0;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>
Not:Kod içerisinde kırmızı renkle belirttiğimiz timeOut:4000 değerini değiştirerek slayt geçiş hızını,yine kod içerisinde renkli olarak yazdığımız width:550px(genişlik)-height:200px(yükseklik) değerlerini değiştirerek slayt alanını kendi isteğinize göre ayarlayabilirsiniz,tabiki resim boyutunuzuda burdaki genişliğe göre seçmelisiniz.Gerekli düzenlemeleri yaptıktan sonra şablonumuzu kaydediyoruz.
2.Adım:Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip ediyoruz.Aşşağıdaki kodu kopyalayıp açılan gadgetimizin içerisine yapıştırıp kaydediyoruz.
<!-- blogokulu.blogspot.com Kodu Baslat -->
<div id="s3slider"><ul id="s3sliderContent">
<li class="s3sliderImage"><a href="YAZI-LİNKİNİZİ-BURAYA YAZIN"><img style="width:550px;height:200px;" src="http://img692.imageshack.us/img692/6001/avatrkopyad.png" /><span>BASLIK-1 : Aciklama!!!</span></a></li>

<li class="s3sliderImage"><a href="YAZI-LİNKİNİZİ-BURAYA YAZIN"><img style="width:550px;height:200px;" src="http://img205.imageshack.us/img205/9700/53866363.png" /><span>BASLIK-2 : Aciklama</span></a></li>

<li class="s3sliderImage"><a href="YAZI-LİNKİNİZİ-BURAYA YAZIN"><img style="width:550px;height:200px;" src="http://img41.imageshack.us/img41/4797/87529467.png" /><span>BASLIK-3 : Aciklama</span></a></li>

<li class="s3sliderImage"><a href="YAZI-LİNKİNİZİ-BURAYA YAZIN"><img style="width:550px;height:200px;" src="http://img822.imageshack.us/img822/9282/51748703.png" /><span>BASLIK-4 : Aciklama</span></a></li>

<li class="s3sliderImage"></li>
</ul></div>

<div class='clear'></div>
<!-- blogokulu.blogspot.com Kodu Bitir -->
Kod İçerisinde:
YAZI-LİNKİNİZİ-BURAYA YAZIN: Buraya resme tıklayınca açılmasını istediğiniz yazının linkini yazıyorsunuz.
http://img822.imageshack.us/img822/9282/51748703.png:Buraya görüntülemek istediğiniz resminin URL sini yazıyorsunuz.
BASLIK-4 : Aciklama:Resim üzerinde görünecek olan başlığınızı ve kısa açıklamanızı buraya yazıyorsunuz.
Gerekli düzenlemeleri yaptıktan sonra,gadgetimizi kaydediyoruz ve Blog Kayıtlarının üzerine yada şablonumuzun en üstüne gelecek şekilde veya blogumuzda görünmesini istediğimiz yere sürükleyip bırakıyoruz.Yeni slayt alanımız kullanıma hazır.
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ı

15 yorum:

  1. ALLAH razı olsun kaç gündür böyle birşey arıyordum başarılarının devamını dilerim

    YanıtlayınSil
  2. BLOGUMA SLAYT EKLEMEK İÇİN EPEY ARAŞTIRMA YAPTIM SONUNDA ARADIĞIMI BURADA BULDUM AMA BİR SORUM OLACAK BLOGA SÜREKLİ YENİ YAZILAR EKLEYİNCE HEP ESKİ KAYITLARMI GÖRÜNÜR YOKSA SON YAZILANLARMI GÖRÜNTÜLENİR???

    LÜTFEN BUNA CEVAP YAZIN

    YanıtlayınSil
  3. en son yazdığınız ilk başta görünür.

    YanıtlayınSil
  4. cevapladığınız için teşekkür :)

    YanıtlayınSil
  5. HOCAM BU SLAYTI EKLEDİM İKİ SORUM OLACAK CEVAPLARSANIZ ÇOK MEMNUN OLACAĞIM.

    1.SLAYTI BELİRTTİĞİNİZ GİBİ EKLEDİM ANCAK SÜREKLİ AYNI KONULARIN RESİMLERİ ÇIKIYOR BUNU ÖRNEĞİN SON AÇILAN 5 KONUYU GÖSTERECEK ŞEKİLDE AYARLAMAMIZ MÜMKÜNMÜ?

    2.SLAYT ALANINI NE KADAR GENİŞLETSEMDE SLİDER ALANI BİR YERDEN SONRA HEP AYNI KALIYOR HİÇ GENİŞLEMİYOR NEDEN OLABİLİR?

    YanıtlayınSil
  6. aliermanakyuz9 Nisan 2012 17:17

    merhaba, öncelikle teşekkür ederim.. bu kodu bloguma uyguladığım zaman ne yazıkki siyah ekran almaktayım. başka blogda denedik sorun yoktu. sanırım daha önce eklediğim kodların bir çakışması oluyor. bu sorunu nasıl çözebilirim? teşekkürler..

    YanıtlayınSil
  7. aliermanakyuz9 Nisan 2012 18:18

    blogum www.aliermanakyuz.com şuan bu yukarıdaki kodları tutuyorum, bakarsanız sevinirim.

    YanıtlayınSil
  8.  1.Adımda verdiğimiz kodları tam ve doğru olarak yerleştirdiğinizden emin olun.Bu da olmazsa blogunuzda facebook eklentisi var sağ tarafta onun script kodunu kaldırıp deneyin.script kodları çakışmış olabilir.

    YanıtlayınSil
  9. aliermanakyuz9 Nisan 2012 19:32

    1.adım kodları tamam. facebooku kaldırınca da olmadı. maalesef hala çalışmıyor.. size kodları göndermeyi deneyebilir miyim? Bir de öyle baksak.. Acemi olduğum için gözden kaçırdığım bişeyler mi var acaba, ya da başka bişeyle mi çakışıyor, anlamadım.. :(

    YanıtlayınSil
  10. aliermanakyuz9 Nisan 2012 23:31

    tamam buldum. popüler yazılar küp şeklinde dönüyor, onun kodu ile çakışıyormuş. onu kaldırınca oldu. teşekkür ederim..

    YanıtlayınSil
  11.  İyi bakalım hadi hayırlı olsun.

    YanıtlayınSil
  12. calısmıyor malesef vıdeo linki yukledım olmadı resımlı haber ekledım olmadı kapkara goruntu var kodu head ekledım gadgete ekledım lınklerı yaptım degıstım resım lınkınıde ekledım acıklamada olmadı 

    YanıtlayınSil
  13. Admin bunu etiket bazlı yapamaz mıyız ? İstediğimiz etiketteki resimleri ve başlıkları alsın otomatik olarak.

    YanıtlayınSil
  14. bunda etiket meselesi yok.Etiket bazlı yayınladığım slayt alanları var onları kullanabilirsin.Şimdilik bunlarla idare edin, ileride inşallah onuda yayınlarız.

    YanıtlayınSil

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