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/AVvXsEjbOJj9GmrOVp_NieJioCnxXrdrIARfK0QbZcQMdH4j_9SfgBqGdx0uggRk-fgkpfhZ6m0MZ7-jP9HZDODOcdXNjEE6rIRuBP72wl58QloDAEk2LvUbRIy55bow1F6sQPWmYYEBulCkUrg/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