Son Yazılar Slayt Eklentisi Basit ve Kesin Çözüm

blogger-için-slayt-eklentisi
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">
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://3.bp.blogspot.com/-1_Vnfz23h0E/V0m7kzHpgiI/AAAAAAAALlU/f763ScY-PBc2UnqNX3Tf20lyvHxtRo9qwCLcB/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://3.bp.blogspot.com/-EOu4Rrgcryo/V0m8dV7MU1I/AAAAAAAALlg/4h5vQaHpQiMdkvtUdDbu0LtjJRvgPERYwCLcB/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>
Slayt Eklentisini Nasıl Düzenlerim?

  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.

YAZIYI PAYLAŞ

BENZER YAZILAR

SONRAKİ
« Prev Post
ÖNCEKİ
Next Post »

4 yorum

yorum YAZ
18 Haziran 2017 18:26 delete

çok güzel bir eklenti hemen bloğumuzda denedik ama gadget alanının dışında yazıların olduğu kısma kaydı nasıl düzenleyebiliriz? yardımcı olursanız çok seviniriz :)

Cevap Ver
avatar
18 Haziran 2017 18:54 delete

Slaytı blog kayıtlarının üstüne mi eklediniz yoksa ayrıca gadget alanı var mı? Ben yan tarafta kullanıyorum ama yazıların üstüne aldığımda da çalışıyor.

Cevap Ver
avatar
19 Haziran 2017 14:57 delete

gerek burdan gerek yorum ile ettiğiniz yardımlar için çok teşekkür ederiz bloga uyguladık çok da güzel oldu :)

Cevap Ver
avatar
19 Haziran 2017 17:42 delete

Rica ederim, çözülmesine sevindim..

Cevap Ver
avatar

YORUM YAPARAK KATKIDA BULUNABİLİRSİNİZ...

1) Yaptığınız yorumun, yazıyla alakalı olmasına özen gösteriniz.
2) Yazım ve dil bilgisi kurallarına mümkün olduğunca dikkat ediniz.
3) Kullandığınız üslubun sizi yansıttığını unutmayınız. EmoticonEmoticon