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Ş PAYLAŞ 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ıtlaSil
  2. Cyberr-man3 Nisan 2012 15:55

    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ıtlaSil
  3. Blog Okulu3 Nisan 2012 20:02

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

    YanıtlaSil
  4. Cyberr-man4 Nisan 2012 09:51

    cevapladığınız için teşekkür :)

    YanıtlaSil
  5. Cyberr-man8 Nisan 2012 11:35

    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ıtlaSil
  6. Blog Okulu8 Nisan 2012 12:57

    cevap:1 Bu slayt alanında mümkün değil.Görüntülemek istediklerinize ait resimleri seçip anlattığımız gibi eklemeniz gerekiyor.
    Daha önce popüler yazılar için slayt alanı eklemeyi anlatmıştık ama son yazılara ait slayt alanı için halen elimde bir kod yok.Popüler yazılar için slayt alnına burdan ulaşabilirsiniz.
    cevap:2Yapmanız gereken işlem;
    1-Slayt alanına eklediğiniz resmin boyutunu ayrlayın.Örnek:Eklediğiniz resim 600x300 boyutunda olsun.
    2-Konu içerisinde 1.Adımda verdiğimiz mavi renkli olarak belirttiğimiz genişlik ve pembe renkli olarak belirttiğimiz yükseklik değerlerini değiştirin.Resme göre width:600 ve height:300 olmalıdır bu şekilde kaydedip görüntülerseniz, slayt alanının boyutunun değiştiğini göreceksiniz.

    YanıtlaSil
  7. 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ıtlaSil
  8. aliermanakyuz9 Nisan 2012 18:18

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

    YanıtlaSil
  9. Blog Okulu9 Nisan 2012 18:37

     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ıtlaSil
  10. 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ıtlaSil
  11. 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ıtlaSil
  12. Blog Okulu9 Nisan 2012 23:54

     İyi bakalım hadi hayırlı olsun.

    YanıtlaSil
  13. 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ıtlaSil
  14. Parlak Teneke19 Haziran 2012 22:33

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

    YanıtlaSil
  15. 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ıtlaSil

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