Son Yazılar Slayt Eklentisi Basit ve Kesin Çözüm
 |
| Blogger slayt manşet eklentisi |
Otomatik slayt eklentisini nasıl eklerim? Blog sayfama slayt nasıl eklerim? Son yazıları slayt olarak gösterme kodu
Blogger için öğrendiğim ve beğendiğim kodları paylaşmaya devam ediyorum. Uzun zamandır aradığım ama bir türlü bulamadığım son yazılar için slayt veya manşet eklentisini paylaşıyorum. Hem de sadece tek yere eklenecek kod ile çalışıyor. Blog sayfanızda yapacağınız eklemeler ziyaretçilerin kaldığı süreyi uzatmak için olmalıdır. Bu tür kodlar hem blogunuzu görüntü olarak şık hale getiriyor hem de seo dostu olmanıza yardımcı oluyor. Slayt eklentisini blogunuza uyarlamak için "Gadget Ekle - Html/Javascript" alanına aşağıdaki kodu ekleyerek kaydetmeniz yeterli. Kod içinde bazı düzenlemeler yapacağınız alanları hemen verdiğim kodun altında açıklayacağım.
<style type="text/css">Slayt Eklentisini Nasıl Düzenlerim?
ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:auto}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRL0bICtZRgmy_TAvulz6ZqFRMmXUoSDbzRcdkaxk3QnESYA1yrqhRM8KFr2s2gV5q6vSJqgT5nE1XpPFDyISgMVmdwsEAWaUttNyGbaIt9pmuxarAV6EDKBD20788eBkUra_r2yi2GX0/s400/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Abel', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel', sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}
.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
</style>
<div id="featuredbwidget"></div>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
featuredbwidget({
listURL:"https://dogushakanyilmaz.blogspot.com/",
featuredNum:9,
listbyLabel:false,
feathumbSize:350,
interval:3000,
autoplay:true,
featuredID:"#featuredbwidget"
});
function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBVjY4yyj0Atl6J0JQGFT1KBlS1hIBlT4w3NXnSeSFA2vSVRcBSnhkQEv7PBOnhdZsMSO_1pMT9Xx7WcAAigXTvfS28OTBx0IJiURsImhxTHd-ltuZPGSTAsPTPFPBu-chU0njxnWBGa4/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></div>');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.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$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.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script>
Yukarıdaki slayt kodunu ekledikten sonra yayınlamadan önce yapılması gerekenleri anlatmak istiyorum. Kod içindeki değiştireceğiniz alanların ne anlama geldiğini açıklamaya çalışacağım.
listURL:"https://dogushakanyilmaz.blogspot.com/" bu alandaki yere kendi blog linkinizi ekleyin.
featuredNum:9 buradaki sayı gösterilecek yayın sayısını simgeler. Sayıyı değiştirerek ne kadar yazı gösterileceğini seçebilirsiniz.
listbyLabel:false bu şekilde kodu yayınlarsanız tüm kategoriler dahil olarak yazılar gösterilir. İsterseniz "false" yazan yeri istediğiniz bir kategori ile değiştirerek sadece o kategorinin veya etiketin yazılarını gösterebilirsiniz. Örneğin: Tavsiye Filmler etiketiniz varsa false yerine bu etiketi yazarak sadece tavsiye filmler yazılarını gösterebilirsiniz.
feathumbSize:350 buradaki rakam resmin boyutunu gösteriyor.
interval:3000 bu alanda geçiş süresini gösteriyor. 3000 milisaniye cinsinden hesaplanmıştır. Yani 3 saniyede bir geçiş olacağını söylüyor.
autoplay:true kodunu bu şekilde bırakırsanız son yazılar otomatik olarak gösterilmeye devam eder. "true" kısmını "false" ile değiştirirseniz otomatik görüntüleme olmaz. Sağa veya sola tıklayarak değiştirilmesini sağlar.
✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵
