Blogger Slayt Alanı Ekleme

tarih:

Blogger Resimli Slayt Eklentisi
Blogger Slayt Alanı Ekleme.Bu yazımızda blogger slayt alanı eklentisi ekleme ve resimli slayt kodları hakkında yazdık. Blogger kullanıcılarının bloglarının daha profesyonel,daha kaliteli görünmesini ve popüler yazılarınızı daha dikkat çekici bir şekilde gösterilmesini sağlayan bir eklentidir.


Bu eklenti diğer slayt alanlarına göre daha hızlı açılır çünkü kodları çok kısadır.Yani site açılış hızınızı olumsuz etkilemez.

Bu eklentiye resim ve başlık ekleyebilir ve resimlere ve başlıklara linkler verebilirsiniz.Bu sayede resimlere veya başlıklara tıklandığında yazıların yeni sekmede açılmasını sağlayabilirsiniz.

Kodlar:




<style type="text/css">
#sliderFrame{position:relative;width:532px;border:5px solid #000;margin:0 auto;}
#slider{width:532px;height:300px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0WoQY5owT3DJZ50Xhy_SMWcub5oGDhY8exPYijdYLbSL7-83xduIQrosetZNiITdBlTij2CrVC1DLnUZYE5PubsYjvbkIOKKiblrgXXvdZN_FRMzi7HCv2JjR9BZ42ybVabKx0JZPFxUF/s1600/loading.gif) no-repeat 50% 50%;position:relative;box-shadow:0 1px 5px #999;transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);margin:0 auto;}
#slider img{position:absolute;border:none;display:none;}
#slider a.imgLink{z-index:2;display:none;position:absolute;top:0;left:0;border:0;width:100%;height:100%;margin:0;padding:0;}
div.mc-caption-bg,div.mc-caption-bg2{position:absolute;width:100%;height:auto;left:0;bottom:0;z-index:3;overflow:hidden;font-size:0;padding:0;}
div.mc-caption-bg{background-color:#000;}
div.mc-caption{font:bold 14px/20px Arial;color:#EEE;z-index:4;text-align:center;padding:10px 0;}
div.mc-caption a{color:#FB0;}
div.mc-caption a:hover{color:#DA0;}
div.navBulletsWrapper{top:310px;left:200px;width:150px;background:none;padding-left:20px;position:relative;z-index:5;cursor:pointer;}
div.navBulletsWrapper div{width:11px;height:11px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTUei6GYobI7bD-MVOetOk2FrhUoeshSi3sYmopMDdbziH2WYcvJpRUZlWJBarIa8Oh6nxHsjETvSCzI8rVgBa0lDYiQNeyPezTMpMBCBwBNmjktkd_SEBvefKEMcOZP_mJOsTz1B2ewQ/s22/bullet.png) no-repeat 0 0;float:left;overflow:hidden;vertical-align:middle;cursor:pointer;margin-right:11px;position:relative;}
div.navBulletsWrapper div.active{background-position:0 -11px;}
</style>
<script type='text/javascript'>
var sliderOptions=
{
sliderId: "slider",
effect: "series1",
effectRandom: false,
pauseTime: 3000, // Resimlerin geçiş hızı (3000 = 3 Saniye, 1000 = 1 Saniye...)
transitionTime: 600,
slices: 12,
boxes: 8,
hoverPause: true,
autoAdvance: true,
captionOpacity: 0.3,
captionEffect: "fade",
thumbnailsWrapperId: "thumbs",
license: "l91b"
};
var imageSlider=new mcImgSlider(sliderOptions); function mcImgSlider(m){function Q(){var a;c.l&&(a=document.getElementById(c.l));if(a){a=a.childNodes;for(var b=0;b<a.length;b++)"thumb"==a[b].className&&v.push(a[b])}if(a=v.length){for(;a--;)v[a].on=0,v[a].i=a,v[a].onclick=function(){t.y(this.i)},v[a].onmouseover=function(){this.on=1;this.className="thumb thumb-on"},v[a].onmouseout=function(){this.on=0;this.className=this.i==d.a?"thumb thumb-on":"thumb"};L(0)}}function L(a){var b=v.length;if(b)for(;b--;)v[b].className=b!=a&&0==v[b].on?"thumb":"thumb thumb-on"} function R(a){for(var b=[],e=a.length;e--;)b.push(String.fromCharCode(a[e]));return b.join("")}var J=function(a){a=a.childNodes;var b=[];if(a)for(var e=0,c=a.length;e<c;e++)1==a[e].nodeType&&b.push(a[e]);return b},E=function(a,b){a&&(a.o=b,a.style.opacity=b,a.style.filter="alpha(opacity="+100*b+")")},T=document,M=function(a,b,e){return e?a.substring(b,e):a.substring(b)},y=function(){this.d=[];this.b=null;this.c()},U=9>function(){var a=50,b=navigator.userAgent,e;-1!=(e=b.indexOf("MSIE "))&&(a=parseInt(b.substring(e+ 5,b.indexOf(".",e))));return a}();y.a={f:function(a){return-Math.cos(a*Math.PI)/2+.5},g:function(a){return a},h:function(a,b){return Math.pow(a,2*b)},j:function(a,b){return 1-Math.pow(1-a,2*b)}};y.prototype={k:{c:m.transitionTime,a:function(){},b:y.a.f,d:1},c:function(){for(var a=["webkit","moz","ms","o"],b=0;b<a.length&&!window.requestAnimationFrame;++b)window.requestAnimationFrame=window[a[b]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[a[b]+"CancelAnimationFrame"]||window[a[b]+"CancelRequestAnimationFrame"]; this.supportAnimationFrame=!!window.requestAnimationFrame},m:function(a,b,e,c){var d=[];e-=b;for(var f=Math.ceil(60*c.c/1E3),g,h=1;h<=f;h++)g=b+c.b(h/f,c.d)*e,"opacity"!=a&&(g=Math.round(g)),d.push(g);d.index=0;return d},n:function(){null==this.b&&this.p()},p:function(){this.q();var a=this;this.b=this.supportAnimationFrame?window.requestAnimationFrame(function(){a.p()}):window.setInterval(function(){a.q()},15)},q:function(){var a=this.d.length;if(a){for(var b=0;b<a;b++)this.o(this.d[b]);for(;a--;)b= this.d[a],b.d.index==b.d.length&&(b.c(),this.d.splice(a,1))}else this.supportAnimationFrame?window.cancelAnimationFrame(this.b):window.clearInterval(this.b),this.b=null},o:function(a){if(a.d.index<a.d.length){var b=a.b,e=a.d[a.d.index];"opacity"==a.b?U&&(b="filter",e="alpha(opacity="+Math.round(100*e)+")"):e+="px";a.a.style[b]=e;a.d.index++}},r:function(a,b,e,c,d){d=this.s(this.k,d);e=this.m(b,e,c,d);this.d.push({a:a,b:b,d:e,c:d.a});this.n()},s:function(a,b){b=b||{};var e,c={};for(e in a)c[e]=void 0!== b[e]?b[e]:a[e];return c}};var k=new y,d={a:0,e:"",d:0,c:0,b:0},c,h,u,w,H,C,F,n,p,I,z,q,A,B,x,G,r,t=null,N=function(a){c.a="series1"==a?[6,8,15,2,5,14,13,3,7,4,14,1,13,15]:"series2"==a?[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]:a.split(/\W+/);c.a.p=m.effectRandom?-1:1==c.a.length?0:1},O=function(){c={b:m.pauseTime,c:m.transitionTime,f:m.slices,g:m.boxes,O0:m.license,h:m.hoverPause,i:m.autoAdvance,j:m.captionOpacity,k:"none"==m.captionEffect?0:"fade"==m.captionEffect?1:2,l:m.thumbnailsWrapperId,Ob:function(){"undefined"!== typeof beforeSlideChange&&beforeSlideChange(arguments)},Oa:function(){"undefined"!==typeof afterSlideChange&&afterSlideChange(arguments)}};h&&(c.m=Math.ceil(h.offsetHeight*c.g/h.offsetWidth));N(m.effect);c.n=function(){var a;-1==c.a.p?a=c.a[Math.floor(Math.random()*c.a.length)]:(a=c.a[c.a.p],c.a.p++,c.a.p>=c.a.length&&(c.a.p=0));if(1>a||17<a)a=15;return a}},v=[],V=function(a){var b=document.getElementById(a);b&&(b.b=function(a){return-1<b.innerHTML.indexOf(a)});return b},K=function(a,b,e,c,d,f,g){setTimeout(function(){if(b&& e==b-1){var g={a:function(){t.o()}},h;for(h in a)g[h]=a[h]}else g=a;void 0!==d.width&&k.r(c,"width",d.width,f.width,a);void 0!==d.height&&k.r(c,"height",d.height,f.height,a);k.r(c,"opacity",d.opacity,f.opacity,g)},g)},P=function(a){h=a;this.b=0;this.c()},D=function(a){var b=document.createElement("div");b.className=a;return b};P.prototype={c:function(){u=h.offsetWidth;w=h.offsetHeight;r=J(h);for(var a=r.length;a--;){var b=r[a],e=null;if("IMG"!=b.nodeName){if("A"==b.nodeName){e=b;e.style.display="none"; e.className="imgLink"+(e.className?" "+e.className:"");var S=this.z(e),l=e.getAttribute("href");S&&"undefined"!=typeof McVideo&&l&&-1!=l.indexOf("http")&&(e.onclick=function(){return"true"==this.getAttribute("autoPlayVideo")?!1:t.d(this)},McVideo.register(e,this))}b=b.getElementsByTagName("img")[0]}b.style.display="none";d.d++}c.m=Math.ceil(w*c.g/u);d.e="IMG"==r[d.a].nodeName?r[d.a]:r[d.a].getElementsByTagName("img")[0];"A"==r[d.a].nodeName&&(r[d.a].style.display="block");h.style.background='url("'+ d.e.getAttribute("src")+'") no-repeat';this.i();H=this.k();this.m();var f=this.v(),a=d.e.parentNode;this.z(a)&&"true"==a.getAttribute("autoPlayVideo")?this.d(a):c.i&&1<d.d&&(x=setTimeout(function(){f.y(f.n(1))},c.b));c.h&&(h.onmouseover=function(){2!=d.b&&(d.b=1,clearTimeout(x),x=null)},h.onmouseout=function(){2!=d.b&&(d.b=0,null==x&&!d.c&&c.i&&(x=setTimeout(function(){f.y(f.n(d.a+1))},c.b/2)))})},d:function(a){McVideo.play(a,u,w)&&(d.b=2);return!this.b},f:function(){G=D("navBulletsWrapper");for(var a= [],b=0;b<d.d;b++)a.push("<div rel='"+b+"'></div>");G.innerHTML=a.join("");a=J(G);for(b=0;b<a.length;b++)b==d.a&&(a[b].className="active"),a[b].onclick=function(){t.y(parseInt(this.getAttribute("rel")))};h.appendChild(G)},g:function(){for(var a=J(G),b=d.d;b--;)a[b].className=b==d.a?"active":"","A"==r[b].nodeName&&(r[b].style.display=b==d.a?"block":"none")},h:function(a){var b=function(a){a=a.charCodeAt(0).toString();return M(a,a.length-1)};a=a.split("");return a[1]+b(a[0])+(2==a.length?"":b(a[2]))}, i:function(){C=D("mc-caption");F=D("mc-caption");n=D("mc-caption-bg");E(n,0);n.appendChild(F);p=D("mc-caption-bg2");p.appendChild(C);E(p,0);p.style.visibility=n.style.visibility=F.style.visibility="hidden";h.appendChild(n);h.appendChild(p);I=[n.offsetLeft,n.offsetTop,C.offsetWidth];C.style.width=F.style.width=C.offsetWidth+"px";this.j()},j:function(){2==c.k?(z=A={opacity:0,width:0,marginLeft:Math.round(I[2]/2)},q={opacity:1,width:I[2],marginLeft:0},B={opacity:c.j,width:I[2],marginLeft:0}):1==c.k? (z=A={opacity:0},q={opacity:1},B={opacity:c.j}):(z=q={},B=A={})},k:function(){var a=d.e.getAttribute("alt");a&&"#"==a.substr(0,1)&&(a=(a=document.getElementById(a.substring(1)))?a.innerHTML:"");this.l();return a},l:function(){if(1<C.innerHTML.length){var a={c:c.b/4.5,b:1==c.k?y.a.f:y.a.h,d:1==c.k?0:3,a:function(){n.style.visibility=p.style.visibility="hidden"}};c.k||(a.c=a.c=10);void 0!==q.marginLeft&&(k.r(p,"width",q.width,z.width,a),k.r(n,"width",B.width,A.width,a),k.r(p,"marginLeft",q.marginLeft, z.marginLeft,a),k.r(n,"marginLeft",B.marginLeft,A.marginLeft,a));void 0!==q.opacity&&(k.r(p,"opacity",q.opacity,z.opacity,a),k.r(n,"opacity",B.opacity,A.opacity,a))}},m:function(){if(F.innerHTML=C.innerHTML=H){n.style.visibility=p.style.visibility="visible";var a={c:c.k?c.b/3:10,b:1==c.k?y.a.f:y.a.j,d:1==c.k?0:3};void 0!==q.marginLeft&&(k.r(p,"width",z.width,q.width,a),k.r(n,"width",A.width,B.width,a),k.r(p,"marginLeft",z.marginLeft,q.marginLeft,a),k.r(n,"marginLeft",A.marginLeft,B.marginLeft,a)); void 0!==q.opacity&&(k.r(p,"opacity",z.opacity,q.opacity,a),k.r(n,"opacity",A.opacity,B.opacity,a))}},a:function(a){return a.replace(/(?:.*\.)?(\w)([\w\-])?[^.]*(\w)\.[^.]*$/,"$1$3$2")},o:function(){d.c=0;clearTimeout(x);x=null;this.m();h.style.background='url("'+d.e.getAttribute("src")+'") no-repeat';var a=this,b=d.e.parentNode;this.z(b)&&"true"==b.getAttribute("autoPlayVideo")?this.d(b):!d.b&&c.i&&(x=setTimeout(function(){a.y(a.n(d.a+1))},c.b));c.Oa.call(this,d.a,d.e)},p:function(){d.c=1;d.e="IMG"== r[d.a].nodeName?r[d.a]:r[d.a].getElementsByTagName("img")[0];this.g();H=this.k();var a=h.getElementsByTagName("div");for(i=a.length;i--;)"mcSlc"!=a[i].className&&"mcBox"!=a[i].className||delete h.removeChild(a[i]);a=c.n();c.Ob.apply(this,[d.a,d.e,H,a]);L(d.a);var b=14>a?this.w(a):this.x();9>a||15==a?a%2&&(b=b.reverse()):14>a&&(b=b[0]);9>a?this.q(b,a):13>a?this.r(b,a):13==a?this.s(b):16>a?this.t(b,a):this.u(b,a)},q:function(a,b){for(var e=0,c=7>b?{height:0,opacity:-.4}:{width:0,opacity:0},d={height:w, opacity:1},f=0,g=a.length;f<g;f++)3>b?a[f].style.bottom="0":5>b?a[f].style.top="0":7>b?(a[f].style[f%2?"bottom":"top"]="0",c.opacity=-.2):(d={width:a[f].offsetWidth,opacity:1},a[f].style.width=a[f].style.top="0",a[f].style.height=w+"px"),K({},g,f,a[f],c,d,e),e+=50},r:function(a,b){a.style.width=11>b?"0px":u+"px";a.style.height=11>b?w+"px":"0px";E(a,1);11>b&&(a.style.top="0");9==b?(a.style.left="auto",a.style.right="0px"):10<b&&(a.style[11==b?"bottom":"top"]="0");if(11>b)var e=0,d=u;else e=0,d=w;k.r(a, 11>b?"width":"height",e,d,{b:y.a.j,c:2*c.c,a:function(){t.o()}})},s:function(a){a.style.top="0";a.style.width=u+"px";a.style.height=w+"px";k.r(a,"opacity",0,1,{c:2*c.c,a:function(){t.o()}})},t:function(a){for(var b=timeBuff=0,e=colIndex=0,d=[[]],l=0,f=a.length;l<f;l++)a[l].style.width=a[l].style.height="0px",d[e][colIndex]=a[l],colIndex++,colIndex==c.g&&(e++,colIndex=0,d[e]=[]);e={c:c.c/1.3};l=0;for(f=2*c.g;l<f;l++){for(var g=l,h=0;h<c.m;h++){if(0<=g&&g<c.g){var k=d[h][g];K(e,a.length,b,k,{width:0, height:0,opacity:0},{width:k.w,height:k.h,opacity:1},timeBuff);b++}g--}timeBuff+=100}},u:function(a,b){for(var e=a,c,d,f=e.length;f;c=parseInt(Math.random()*f),d=e[--f],e[f]=e[c],e[c]=d);a=e;c=e=0;for(d=a.length;c<d;c++){f=a[c];if(16==b){a[c].style.width=a[c].style.height="0px";var g={width:0,height:0,opacity:0},h={width:f.w,height:f.h,opacity:1}}else g={opacity:0},h={opacity:1};K({},a.length,c,f,g,h,e);e+=20}},v:function(){return(new Function("a","b","c","d","e","f","g","h","this.f();var l=e(g(b([110,105,97,109,111,100])));if(l==''||l.length>3||(f(l).length==2?a[b([48,79])].indexOf(f(l))>-1:a[b([48,79])]==f(l)+'b')){d();this.b=1;}else{a[b([97,79])]=a[b([98,79])]=function(){};var k=c(b([115,105,99,109]));if (k && k.getAttribute(b([102,101,114,104]))) var x = k.getAttribute(b([102,101,114,104]));if (x && x.length > 20) var y = h(x, 17, 19) == 'ol';if(!(y&&(k.b('en') || k.b('li')))){a.a=[6];a.a.p=0;}};return this;")).apply(this, [c,R,V,Q,this.a,this.h,function(a){return T[a]},M])},w:function(a){for(var b=[],e=8<a?u:Math.round(u/c.f),k=8<a?1:c.f,l=0;l<k;l++){var f=D("mcSlc"),g=f.style;g.left=e*l+"px";g.width=(l==c.f-1?u-e*l:e)+"px";g.height="0px";g.background='url("'+d.e.getAttribute("src")+'") no-repeat -'+l*e+"px 0%";10==a?g.background='url("'+d.e.getAttribute("src")+'") no-repeat right top':12==a&&(g.background='url("'+d.e.getAttribute("src")+'") no-repeat left bottom');g.zIndex=1;g.position="absolute";E(f,0);h.appendChild(f); b.push(f)}return b},x:function(){for(var a=[],b=Math.round(u/c.g),e=Math.round(w/c.m),k=0;k<c.m;k++)for(var l=0;l<c.g;l++){var f=D("mcBox"),g=f.style;g.left=b*l+"px";g.top=e*k+"px";f.w=l==c.g-1?u-b*l:b;f.h=k==c.m-1?w-e*k:e;g.width=f.w+"px";g.height=f.h+"px";g.background='url("'+d.e.getAttribute("src")+'") no-repeat -'+l*b+"px -"+k*e+"px";g.zIndex=1;g.position="absolute";E(f,0);h.appendChild(f);a.push(f)}return a},y:function(a,b){if(d.c&&!b||a==d.a)return 0;if(2==d.b){d.b=0;var c=document.getElementById("mcVideo"); c.src="";delete c.parentNode.parentNode.removeChild(c.parentNode)}clearTimeout(x);x=null;d.a=this.n(a);this.p()},n:function(a){a>=d.d?a=0:0>a&&(a=d.d-1);return a},To:function(a){this.y(this.n(d.a+a))},z:function(a){return-1<a.className.indexOf(" video")}};O();(function(a,b,c){a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent&&a.attachEvent("on"+b,c)})(window,"load",function(){var a=document.getElementById(m.sliderId);a&&(t=new P(a))});return{displaySlide:function(a,b){t.y(a,b)},next:function(){t.To(1)}, previous:function(){t.To(-1)},getAuto:function(){return c.i},switchAuto:function(){(c.i=!c.i)&&t.To(1)},setEffect:function(a){N(a)},changeOptions:function(a){for(var b in a)m[b]=a[b];O()},getElement:function(){return h}}};
</script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
</div></div>


Kodlar arasında kırmızı renk ile gösterilmiş alanları kendi isteğinize göre doldurabilirsiniz.

<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>


Sayfa sonunda bulunan;


# simgesi yerine tıklandığında açılmasını istediğiniz kayıt linkini ekleyebilirsiniz.


RESİM URL Yazan yere slayt alanında gözükmesini istediğiniz kayıtın içinden herhangi bir resmin linkini yazabilirsiniz



Eğer resim linkini almayı bilmiyorsanız;






Öncelikle linkini almak istediğiniz resmin üstüne geliyorsunuz ve mause ile sağ tıklıyorsunuz.Açılan pencereden Resim URL'sini kopyala seçeneğine tıklıyoruz.Bu sayede resim linkini öğrenmiş oluyoruz.




Blogger Resimli Slayt Eklentisi



























BAŞLIK  Yazan yere slayt kayıt başlığınızın adını yazıyorsunuz.






Blogger Slayt Ekleme







Eğer sizde blogunuza hem güzellik katmak hemde ziyaretçilerinizin sitenizden memnun kalmasını istiyorsanız bu özelliği eklemenizi tavsiye ederim bende bugün sizlere bu konuyu anlatacağım...







Arkadaşlar genelde büyük siteler ve bloglarda slayt alanı vardır sizinde büyük site veya blog olma yolunda  atacağınız büyük adımlardan biridir slayt alanı lafı uzatmadan anlatıma geçiyorum.




    

  • Öncelikle bloggere giriş yapıyoruz,
    • 

  • Daha sonra yerleşim kategorisine gidiyoruz,
    • 

  • Orada herhangi bir gadget ekle seçeneğine tıklıyoruz,
    • 

  • Gadgetin içine aşşağıdaki istediğiniz özellikteki slayt alanının kodunu html dosyasına yapıştırıyoruz;
    • 







Blogger Slayt Alanı Eklentisi















Blogger Slayt Alanı Eklentisi







Blogger resimli slayt alanı eklentisini oluşturduk güle güle kullanın.





















































Yorumlar











Yorum Gönder