OTOMATİK SLAYT EKLENTİSİ

Otomatik slayt ya da diğer adıyla manşet eklentilerine genel de haber ve teknoloji sitelerinde sıkça karşılaşmışsınızdır.

genelde manşetler manuel hazırlanır yani resim ve yazıları düzenleyip tek tek eklemek gerekir. Bu da bana zahmetli bir iş gibi gelir. 

Görmüş olduğunuz manşet te ise herşey otomatik yani yazıları ve resimleri etiketler sayesinde blogunuzdan otomatik olarak çekiyor ve bloğun açılış hızını da fazla etkilemiyor. 

Gelelim bloga eklentiyi nasıl uygulayacağımıza; 

Blogger kumanda panelindeYerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu takip ederek aşağıdaki kodları yapıştırın:

<style type="text/css"> #slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;} #slides ul,#slides li{list-style:none;position:relative;margin:0;padding:0;} #slides ul{height:250px;} #slides li{width:49.9%;height:100%;position:absolute;display:none;} #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;background-color:#fff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;padding:4px;} #slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZlbqZTasRTSnGluhLW-AHrxvPWQJTYzC7sR7seH9gxxbkafgcZH-YdrpvlZyBWXKnLk2e1kuWrWoTEsdjjZAf88T4S74MgCOKgiIgOTmR5U2tJ2McZwq7HqnY6IlO6706aKg6mS5gDDHN/s1600/fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #282c2f;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;} #slides h4{position:absolute;bottom:30px;font-size:18px;font-family:Arial;left:0;color:#FFF;z-index:3;line-height:20px;font-weight:400;margin:0;padding:0 10px;} #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:#FFF;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute;} #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-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1;} #buttons{text-align:center;background:#282c2f;width:10%;margin:5px auto;} #buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative;} #buttons a::before{content:"";width:0;height:0;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%;border-color:transparent #fff transparent transparent;border-style:solid;border-width:8px 7px;} #buttons a#nextx::before{margin-left:-3px;border-color:transparent transparent transparent #fff;} .footer-widget-box-last,#mef-organic-tabs .nav li.last{margin-right:0;} #header,#main,#footer,.clearfix,#slides li:nth-child(1),#slides li:nth-child(2),#slides li:nth-child(3),#slides li:nth-child(4){display:block;} #crosscol-wrapper,#PopularPosts1 h2,#BlogArchive1 h2,#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none;} @media only screen and max-width600px { #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><br /> <div id="featuredpost"> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><br /> <script type="text/javascript"> //<![CDATA[ function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"#featuredpost",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrAGz5ca3sFQR6PL9o2I4PrpJyXutrYl3gRgUQlQGpUZG48CZ6iNzOU7je6t0p_Kj0qYWJSDCapsDkLSaUd8tarGuW3RacxlnTYoO46X9blB76T32dG5kkqFQNm1Goa9oXU31fEjNJcrrs/s1600/grey.gif",MonthNames:["Ocak","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"> <ul class="randomnya"></ul> </div> <div id="buttons"> <a href="#" id="prevx">prev</a><a href="#" id="nextx">next</a></div> ').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+=' <li><a target="_self" href="'+q+'"><div class="overlayx"> </div> <img class="random" src="'+u+'" alt="'+k+'" width="'+h.ImageSize+'px" height="'+h.ImageSize+'px"/><h4> '+k+'</h4> </a><div class="label_text"> <span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div> </li> "}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click()} //]]> </script><br /> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () { FeaturedPost({ blogURL:"https://pcpedi.Blogspot.com.tr", MaxPost:8, // Slaytdaki gösterilen konu sayısı idcontaint:"#featuredpost", ImageSize:300, interval:5000, // Resimlerin geçiş hızı (5000 = 5 Saniye, 1000 = 1 Saniye...) autoplay:true, tagName:false});}); //]]> </script>


Önizlemeyi bu adresten görebilirsiniz

http://pcpedi.blogspot.com.tr/


pcpedi. Blogspot.com.tr yazan bölüme kendi blog adresinizi yazın.

Umarım işinize yarar.

saygılarımla 

iyi yayınlar