Blogger Özel Efektli Slider Otomatik Slayt Manşet Eklentisi

Merhabalar;
Bu Konumuzda sizlere Blogger Özel Efektli Slider Otomatik Slayt Manşet Eklentisi 'ni anlatacağım.Birçok kişi sitesinin görsel efektler ile süslemeyi sever şahsen ben öyleyim.Sitenin Ana sayfasında görselliğe önem veririm TeknoWin'den de gördüğünüz üzre.

Bu konumuzda sitenize renk katacak bir eklentiden bahsedicem. Birçok kaynakdan araştırdım ama sorunsuz çalışan yada istedigim eklentileri içiren bir Manşet eklentisi sonunda buldum ve sizlerle paylaşıyım dedim. 
Anlatıma geçmeden önce bu Slayt Manşet  eklentisini diğerlerinden ayıran özelik ise kişiseleştirilebilir olması hem En Yeni Yayınlarınızı hemde isterseniz belirtmiş olduğunuz Kategorileri otomatik manşet halinde göstermesi. Adımları İzleyin

Blogger Özel Efektli Slider Otomatik Slayt Manşet Eklentisi

• Blogger'e Giriş Yapın
• Yerleşim>> Gatget Ekle>> HTML/JavaScript Yolunu İzleyin

Aşağıda vermiş olduğum kodu sitenizin hangi bölümünde görünmesini iztiyorsanız o bölümün HTML/JavaScript penceresine ekleyin.Önerim sağa veya sola eklemeniz

<style scoped="" type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative }ul.rcentside{width:100%;height:500px }ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none }ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block }ul.rcentside img{border:0;width:100%;height:auto}ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 }ul.rcentside li:nth-child(2){left:0;top:50% }ul.rcentside li:nth-child(3){left:50.5%;top:50% }ul.rcentside li:nth-child(4){width:100%;left:0;top:75% }ul.rcentside .overlayx,ul.rcentside li{transition:all .4s ease-in-out }ul.rcentside .overlayx{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/AVvXsEiImrv4yjrmnLZonjsgVbGn0vGoGNU833djrNPX98Dnd7L084FpzHp2SAqYFKTpIkhPXOYh9sT_AAeEq51bS2GvmFAWfgvQ52RBrs5kJcU2nuQqXcoYOKSmbJTLOMA4Eo2uS3PlJ7LYdwg/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x }ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1).overlayx{background-position:50% 25% }ul.rcentside .overlayx:hover{opacity:.1 }ul.rcentside 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.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4{font-size:150% }ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}ul.rcentside li:nth-child(2).autname,ul.rcentside li:nth-child(3).autname{display:none }.buttons{margin:5px 0 0 }.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative }.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% }.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px }
</style>
<div id="featuredpostside"></div>
<script type='text/javascript'>
function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><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+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//<![CDATA[
FeaturedPostSide({
  blogURL: "https://teknoowin.blogspot.com",
  MaxPost: 8,
  idcontaint: "#featuredpostside",
  ImageSize: 300,
  interval: 5000,
  autoplay: true,
  tagName: false
});
//]]>
</script>

Kodları ekledikden sonra kaydedin.

Kodlar üzerinde değiştirmeniz gereken yerler

Kırmızı İle belirmiş oldugum yerleri kendinize göre degiştirebilirsiniz.
blogURL: "https://teknoowin.blogspot.com", :Buruya kendi adresinizi yazın
  MaxPost: 8, :Buraya Kaç adet yayını göstermek isterseniz o sayıyı yazın(maxsimum 4 
manşet gösterir ama siz 10 yaparsanız geriye kalan yayını sıraya ekler)
  idcontaint: "#featuredpostside",
  ImageSize: 300, :Manşet resim boyutu 
  interval: 5000, :Otomatik Degiştirme hızı
  autoplay: true, :otomatik olarak sıra ile mahsetleri değiştirir oruya false 
yazarsanız manuel olur
  tagName: false :Burasıda belirmiş olduğunuz kategorideki yayınları gösterir 
kategori şeklinde göstermek false yazan yere "Kategori" şeklinde yazmanız yeterlidir.
Bir Blogger Konularının da sonuna geldik umarım işinize yarar.TeknoWin Sundu 😏

Umarım Yardımcı Olmuşumdur Yapamadığınız Bir Yer veya Takıldığınız Bir Sorun Olursa Yorumlarda Belirtin.

Not : Eklentideki kategori belitme seçeneği çalışmamaktadır bunu dikkate alıpda eklentiyi kurunuz. Kategori eklemekde sıkıntı yaşayanlar için yardımcı olamam.

Demo / Ön İzleme