Blogger Son Yayınlar Slider (Manşet, Slayt) Alanı

Otomatik olarak son yayınlarınızı gösteren oldukça kullanışlı bir manşet alanıdır. CSS ve jQuery ile son yayınlarınızın fotoğraflarını ve linklerini taşır. Eklediğiniz yerin büyüklüğüne göre otomatik boyutlanır.

<style scoped="" type="text/css">
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#000000;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDdiP7INIqGuyl4GQFSokVXgZxeJA85dlJnNs03kAQI5ppLW7MQsiY3TQn3-rllMbTscactkZjyOB0gTchJxUxzVd_xwQB3qLcLFA_xAePzQAhFTy3fSCbCTC-EHdw0DujQi1DnfnOmtU/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #535353;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Georgia,Times,"Times New Roman";left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin:5px 0 0}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:49.8%}
  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
</style>
<div id="featuredpost"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://ivyth.googlecode.com/svn/js/featuredpost.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://vedatoksuz.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
</script>

*Blogunuzda göstermek istediğiniz yere Blogger Kullanıcı paneli > Yerleşim > Gadget ekle > HTML/JavaScript ekle yolunu izleyerek ekleyebilirsiniz.
* Slayt alanını manşet bölümü olarak sayfa yanlarında ve tek bir sayfa içinde de kullanabilirsiniz.

blogURL:"http://vedatoksuz.blogspot.com/": Kendi site adresinizi yazın.
MaxPost:8 : 8 rakamı son kaç yayını göstereceği
interval:5000, : Slayt geçiş hızı.

Not: Kodları ben yazmadım sadece düzenledim.
Yapılan değişikler :
Filter düzenlendi böylece eklendiği alanın ölçülerine sorunsuz ayarlanıyor.
Fazla kodlamalar çıkartıldı böylece daha stabil ve hızlı hale geldi.
Gölge ve canlanma efekti düzenlendi.
Çerçeve düzenlendi böylece her temaya uyumlu hale geldi.

Not: Kodu ben yazmadım, güncelledim, Türkçeye çevirdim ve  zoom ve size hatalarını düzelttim.
Kodu yazan programcı Googlecode kodlarını değiştirdiği için eklemeden çalışıp çalışmadığını kontrol ediniz.