Mobil Uyumlu ve Resimli Son Yazılar Slayt Eklentisi

etikete-duyarlı-slayt-widgeti

Son yazılar eklentisi, Resimli son yazılar eklentisi, Mobil uyumlu son yazılar kodu
  Blogger kullanıcıları için faydalı olabilecek en azından blog sayfasına kalite getirmek amacıyla slayt eklentisini kullanabilirsiniz. Son yazıları slayt eşliğinde göstererek oldukça şık bir eklentiye sahip olacaksınız. Slayt eklentisi hem otomatik çalışıyor hem de yazıları görselleri ile birlikte gösteriyor. Belirlediğiniz zaman aralığında yazılar düzenli olarak kendiliğinden değişiyor. Belirlediğiniz sayıda yayını tekrarlayarak göstermesini sağlayabilirsiniz. Ayrıca kullanmak istediğinizde slaytta gösterilen yazılarınızı istediğiniz etiketlere göre ayarlayabilirsiniz. Eklentiyi false olarak bırakırsanız son yazıları paylaşır. Ama ilgili yere "blog ipuçları" gibi etiketinizi eklediğinizde sadece bu yazıları gösterir.

  Slayt eklentisini blog sayfanıza uyarlamak için sidebar alanını kullanabilirsiniz. Kodlama sidebar alanına göre yapılmış ama kod bilginiz varsa üzerinde oynayabilirsiniz. Nasıl ekleyeceğinizi gelirsek işlem oldukça basittir. Yapmanız gereken tek şey aşağıdaki kodu Gadget Ekle bölümünde HTML/Javascript alanına ekleyerek kaydetmenizdir.

blogger-için-slayt-kodu

Eklentinin ayarları şöyle değiştirilebilir;
blogURL: https://dogushakanyilmaz.blogspot.com linkini kendi blog linkinizle değiştirin.
MaxPost: Eklenti içerisinde kaç adet yazının gösterileceğini belirler.
İnterval: Slayt geçiş süresini belirler. İsterseniz daha hızlı veya yavaş olmasını sağlayabilirsiniz.
autoplay: Otomatik çalışan eklentiye sağa ve sola hareket ettirme olanağı tanır.
tagName: Bu şekilde kaldığında son yayınlar gösterilmeye devam eder. "false" yerine istediğiniz etiketi ekleyerek sadece ilgili yazıları slayt olarak gösterebilirsiniz.

<style scoped="" type="text/css">
ul.rcnslider *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.rcnslider{font-size:11px}
ul.rcnslider,ul.rcnslider li{margin:0;padding:0;list-style:none;position:relative}
ul.rcnslider{width:100%;height:500px}
ul.rcnslider li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.rcnslider li:nth-child(1),ul.rcnslider li:nth-child(2),ul.rcnslider li:nth-child(3),ul.rcnslider li:nth-child(4){display:block}
ul.rcnslider img{border:0;width:100%;height:auto}
ul.rcnslider li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.rcnslider li:nth-child(2){left:0;top:50%}
ul.rcnslider li:nth-child(3){left:50.5%;top:50%}
ul.rcnslider li:nth-child(4){width:100%;left:0;top:75%}
ul.rcnslider .overlayx,ul.rcnslider li{transition:all .4s ease-in-out}
ul.rcnslider .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAFACAYAAAB5k8bJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhhJREFUeNrslG1LVFEUhe/cGQtLfBlrECECIZEgDAlRCUEoUwQRIXWc/HmmJaIiKqIFCin1YQiFNDWTCKQPEhS9qGO6Vuwlxzs62cfiXnhg77Ofu845M44Rz/MqPXt8z3nCJmzCJmz+/cZ3m1+qfXfR1Xw3IKImAg7ZRFnoxQObRn1T8pQWAxlpGdMuKO0i2GOTD/a16a5N86VdAj/YFICf0r7btCBm8ZfBNxaFNv196q+mFetycfCFRSkLpX02La4rJLjIpgzsUIvaO5yW6Wzl4BOba2CbU2rFpl3XphXgI4sb4IPSikyrlFYF3qnYkKa0mzrbLbDKphq8CWq3pdWAJTa1YJnfhqvdkVYH0mzqwUvPvtxCm96N2UIDWKDWCBZ1U12hUVdoAi9Y3APz0pR2X9oD8JxFC3gWvEKzPt5WMMOmDUxLK7GQNmmcTvHFSTCuK+hs7dq0A0xwZRaMuRqfDn0gnZyymAMj0uKaalNqo1xZAMPSSmz6UGldnLJ4BYaCaV1KozbElTR4EtS6pXWDp1x57WqlZ2rLph1Su2paT5bGP6JBN82TxmmSISxWXE1pSaX1cMqVt2BA2hWbJpXWK23tNK1XadQeU1tn8WeNP5d+92z89/RIm/ZxLxabbpq0lNJSSsvSTt80t3ac9j54tr/QTpytX9rxpokzz3ZObSvn2XKnZZ9t63xXCLVQC7VQ+0+0IwEGAOg12Bw8IUYdAAAAAElFTkSuQmCC);background-position:50% 50%;background-repeat:repeat-x}
ul.rcnslider .overlayx,ul.rcnslider img{margin:3px}
ul.rcnslider li:nth-child(1).overlayx{background-position:50% 25%}
ul.rcnslider .overlayx:hover{opacity:.1}
ul.rcnslider h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}
ul.rcnslider li:hover h4{bottom:30px}
ul.rcnslider li:nth-child(1)h4,ul.rcnslider li:nth-child(4)h4{font-size:150%}
ul.rcnslider .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}
ul.rcnslider li:hover .label_text{bottom:20px;opacity:1}
ul.rcnslider li:nth-child(2).autname,ul.rcnslider li:nth-child(3).autname{display:none}
.rcnslider-btn{margin:5px 0 0}
.rcnslider-btn a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.rcnslider-btn a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #444 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.rcnslider-btn a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
</style>
<div id="rcnsliderpost"></div>
<script type='text/javascript'>
function rcnsliderpost(a){(function(e){var h={blogURL:"",MaxPost:8,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"data:image/gif;base64,R0lGODlhAQABAIAAAPHx8AAAACH5BAEAAAAALAAAAAABAAEAQAICRAEAOw==",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 d=h.MaxPost*200;g.html('<div class="slidercn"><ul class="rcnslider"></ul></div><div class="rcnslider-btn"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></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.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="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><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).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .slidercn li:first").before(e(h.idcontaint+" .slidercn li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .slidercn li:last").after(e(h.idcontaint+" .slidercn li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .slidercn li:first").before(e(h.idcontaint+" .slidercn li:last"));e(h.idcontaint+" .slidercn").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//<![CDATA[
rcnsliderpost({
blogURL: "https://dogushakanyilmaz.blogspot.com",
MaxPost: 8,
idcontaint: "#rcnsliderpost",
ImageSize: 300,
interval: 5000,
autoplay: true,
tagName: false
});
//]]>
</script>

Kaynak: Blogger Eklentileri

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

0 yorum