Blogger Eklentisi Slayt HTML Kodu

gezginyolcuadam Ağustos 15, 2018
Blogger siteniz için hem görünüm hem de daha fazla içeriği takipçilerinize paylaşmanızı sağlayacak Blogger Eklentisi 'ni sizlerle paylaşıyorum.

Blogger Eklentisi Slayt HTML Kodu


blogger slayt Eklenti Kodları
Blogger HTML Kodları "SLAYT"

Bir Blogger Eklentisi ile daha sizlerleyim. Bu eklentimiz Blogger Slayt Kodları içeriyor. Yapmanız gerekenleri sırasıyla  yazımda anlattığım gibi uygularsanız sizde bu faydalı Blogger Eklentisinden faydalanabilirsiniz.

Gelelim Blogger Eklentisi Kurulumuna, Bloggerınıza giriş yapıyorsunuz - Yerleşim - HTML/Javascript ekle diyerek aşağıdaki kodları içine kopyalayıp yapıştırıyorsunuz. Herşey bu kadar kolay ama faydası çok olacağına inandığım bir Blogger Eklentisi

İşlemi Yapmadan önce mutlaka [Önizleme ##eye##] işlemini yapmanızı tavsiye ederiz.


<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>

<br />
<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: "http://webinsokagi.blogspot.com",
  MaxPost: 8,
  idcontaint: "#rcnsliderpost",
  ImageSize: 300,
  interval: 5000,
  autoplay: true,
  tagName: false
});
//]]>
</script>


HTML Slayt Kodlarımızın bazı noktalarını kendinize göre ayarlamanız gerekmekte. HTML kodlarının arasında kırmızı ile işaretlenmiş alanlar kendinize göre ayarlamanız gereken bölümler.

Kodlar ve İşlevleri

blogURL : kendi blog adresinizi yazmalısınız. ( yayınlayacağınız blog adresi ile aynı olması gerekir.

MaxPost : yayınlanacak en fazla yayın sayısını ifade eder.

interval : bu alan slayt alanının dönüş hızını belirlemeye yarıyor. "5000" olarak belirlediğimiz rakamı yükseltip ve ya düşürerek hızını istediğiniz gibi ayarlayabilirsiniz

autoplay : otomatik kaydırma çubuğunun hareketini sağlar "true"

tagName : bu kod sayesinde eklentimizi istediğimiz etiketi seçerek bir çok farklı kategorideki yazılarınızı gösterebilirsiniz. Bu özelliği aktif etmek için "Blogger Tema" gibi etiketinizi false yazan yerle değiştiriyoruz.

Blogger Slayt Eklentisi yazımızın sonuna gelmiş bulunmaktayız umarım vermiş olduğumuz bilgiler işinize yarar. Yapamadığınız ya da takıldığınız bir şey olursa yorum bölümünden bize ulaşabilirsiniz.






Tags:

Yorum Gönder

0 Yorumlar