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

Share:
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJcwNoKSM5U5abFg89DQoVsRmOskCq0sEcayVvjfI3AD8dhQ-zqlyfSty-zxs5XtZ26LcY4QpZf9gwYiJWvxUireMFuE_CFDgSXKwcqy0IkSnEcsXf9hiKSpmTzXML_yNrcFeEaUHwrUA/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/AVvXsEh-BmH-WNVWuiNaYMeoVtmnWObCN8E8zH0NeCsfjgpVYkB8GwLrC-3Bspdux2HeoFB6IV1WIuyraCkDtx-48naJC7dm58GJSkGhJU0MSwgPso1pm1LusV51ucGWKyT-FSVJL04DUbtEEE4/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.

✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵

8 yorum:

  1. ç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 :)

    YanıtlaSil
    Yanıtlar
    1. 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.

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

      Sil
    3. Rica ederim, çözülmesine sevindim..

      Sil
  2. Son yazıları slayt şeklinde göstermek okurlar açısından ilgi çekici olabilir.Slayt eklentisi için teşekkürler.

    YanıtlaSil
    Yanıtlar
    1. Bir çok özelliği ve kolay eklenmesi nedeniyle sevdiğim bir kod. Rica ederim.

      Sil
  3. Merhabalar blog kayıtlarının üstüne ekledim gadgeti boyutunuda küçülttüm yinede büyük görünüyor naapabilirim?

    YanıtlaSil
    Yanıtlar
    1. Bu eklenti nereye koyarsanız oraya göre şekilleniyor. Başka bir yerde değerlendirebilirsiniz.

      Sil

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

1) Yaptığınız yorumun, yazıyla alakalı olmasına özen gösterin.
2) Yazım ve dil bilgisi kurallarına mümkün olduğunca dikkat edin.
3) Kullandığınız üslubun sizi yansıttığını unutmayın.
4) Yorum yaparken link eklemeyin.

Seo Teknikleri ve Blog ipuçlarını alarak daha fazla ziyaretçi ve en yüksek verimi hedefleyin.