BLOGGER OTOMATİK JAVASCRİPT SLAYT ALANI

BLOGGER OTOMATİK JAVASCRİPT SLAYT ALANI 

JAVA SCRİPT Otomatik slayt alanı son yayınlarınızı gösteren oldukça kullanışlı bir manşet eklentisidir. CSS ve jQuery ile son yayınlarınızın fotoğraflarını ve linklerini taşır. Nereye eklerseniz oranın büyüklüyüne,küçüklüğüne göre kendini ayarlar.

Kurması çok kolaydır.Herkese başarılar dilerim.

<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/AVvXsEihg9uHFOR-oMgeG7dtPIpS_vqrVpesIHFpd_L9vKUl1xv8P4u7Hor0QUXxLgIRKQVZ0PguLWDLtC7SRJYDSy9TAEBMBQhC1N4wjQVAlPBsv3ZttcDeQq8RiMyWwyqet4iJMI0BeWAnTMg/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://bloggererdal.blogspot.com/", MaxPost:8, idcontaint:"#featuredpost", ImageSize:300, interval:5000, autoplay:true, tagName:false }); }); </script>
____________________________________________________
$(document).ready(function () {
FeaturedPost({
blogURL:"http://bloggererdal.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://bloggererdal.blogspot.com/": Kendi site adresinizi yazın.
MaxPost: 8 : 8 rakamı son kaç yayını göstereceğine tanımlar.
interval: 5000 : Slaytın geçiş hızını ayarlanır.