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.