JavaScript Resimli Manşet Slayt eklentisi
Bugün sizlerle daha önce paylastığım Jquery Otomatik resim slayt galerisi ve Jquery slider manşet eklentisi yazılarımdan farklı olarak JavaScript versiyon resimli manşet slayt eklentisini paylaşacağım.
Ziyaretçilerinizi resimlerinizle dikkatini çekmek için kullanabileceğiniz Resimli Manşet Slayt eklentisi JavaScript versiyonu. Haber siteleri tarafından da kullanılan bu slayt manşet eklentisini sizde bloglarınız da kullanabilirsiniz. Resimleri ve linkleri değiştirip sürekli güncelleyebilir ve istediğiniz konuların tanıtımını yapabilirsiniz. Resimler sırayla altında kısa notlarla slayt olarak akar ve Jquery kullanılmadığı için blogu yavaşlatmaz.

Örnek Slayt

Fethiye Fethiye Limanı Fethiye Ölüdeniz Fethiye Saklıkent Çalış Plajı Fethiye

Bu slaytı blogunuza eklemek için:

1. Blogger Kumanda Panelinize gidin.
2. Yerleşim tıklayın.
3. Üst Bilginin altındaki yere Gadget/Widget Ekle,
4. HTML / JavaScript seçeneğini seçin.
5. Aşağıdaki kodu isteğinize göre ayarlayarak, kopyalayın ve yapıştırın.

<style type="text/css">
#sliderFrame{position:relative;width:532px;max-width: 100%;border:5px solid #000;margin:0 auto;}
#slider{width:532px;height:300px;max-width: 100%;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCkRvnHYuekrxxn1K1Ncc-Sb1wTA9yUuuR5ujwlPUBWy_lg4zVLa8RgmCnhbYZymr-TLqVUWSTSH2kk8vfUeypkLf8IpVY17YAD3EuFwtRJ8xxaSERZW97hKVMb0lpSXxcs1f-C4DMyw1V/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:32%;right:32%;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/AVvXsEi7WNGmff9MQBQbNjGpZJKWF8sgt15ty0JnXrCKn8m4fMXsJloMGeOxKYU305bw8aiNAtZ0q-yyI_f-eVMLGjdGiQBH-3bqRM5W-DgTr2evanQvZM7VoVUX8vBD6-B2IVOUqXcEBV9rAIg/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>

Kod içinde kırmızı ile belirtdiğim yerleri Resimlerinizin genişliğine-yüksekliğine göre ayarlayabilirsiniz.
<a href="Resme tıklayınca açılacak sayfanın adresi"><img src="Slaytta gösterilecek resmin adresi" alt="Resmin altında gözükecek yazı metni"/></a>
Kodu denemek ve ayarlarınızı yapmak için Online html editor'ü kullanabilirsiniz. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...

57 Yorumlar

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

  1. Nice sharing.And I love Fethiye:)good work...

    YanıtlaSil
  2. çok güzel bir paylaşım ilk defa bir blogun altına yorum yapıyorum çok hoşuma gitti inanın. lakin ufak bir ricam olucam ben bu slayt her sayfada görünsün istemiyorum sadece anasayfada olsun istiyorum bunun için ne yapmam gerekiyor

    YanıtlaSil
  3. Öncelikle teşekkürler.Blogunuza Gadget/Widget Ekle bölümünden bu slaytı eklerken başlık bölümüne bi isim yazın.Mesela "Image Slider" başlığıyla kaydediyoruz.Sonra Blogumuzun şablon kısmına giriyoruz.Düzenle yapıp, Ctrl+F yardımıyla "Image Slider" başlığımızı buluyoruz.
    <b:widget id='HTML4' locked='false' title=Image Slider' type='HTML'>
    <b:includable id='main'> bulduk ve hemen altına...
    <b:if cond='data:blog.url == data:blog.homepageUrl'> bunu ekliyoruz.
    Artık eklediğiniz slayt eklentisi sadece ana sayfada gözükecektir.Kolay gelsin.

    YanıtlaSil
    Yanıtlar
    1. Merhaba ben bu işlemi yapıyorum fakat şablonu kaydederken hata veriyor neden acaba?

      Sil
    2. Slayt'ın sadece anasayfada görünmesini isteyenler bu yazımı okuyup uygulasın.

      Sil
    3. Şimdi de şöyle bir hata veriyor.
      The widget with id HTML1 is not within a section (actual parent element is: b:if.) Every widget should be in a section.

      Sil
    4. Uygulamayı yanlış yapdığınız için o hatayı alıyorsunuz. Şablonunuzu yedekleyip bana blogger yardım sayfamdan gönderin. Ben yapıp size geri yollarım. Yapamayan arkadaşlar lütfen bana blogger yardım sayfamdan ulaşsınlar.

      Sil
  4. resimlerin tüm sayfada görünmesini nasıl sağlayabiliriz?

    YanıtlaSil
  5. Blogger kontrol panelinde "yerleşim" sekmesine tıklayın."Blog kayıtları" bölümünün üstünde "gadget ekle"yi tıklayıp oluşturduğunuz slaytı oraya ekleyin.Tüm sayfalarda görünecektir.Kolay gelsin.

    YanıtlaSil
  6. resimlerin boyutu ekrana çok büyük geldi nasıl ayarlayacağım?

    YanıtlaSil
  7. Kod içinde kırmızı ile belirtdiğim yerleri Resimlerinizin genişliğine-yüksekliğine göre ayarlayabilirsiniz.Ya resimleri slider'e göre ufaltın yada slider'i resimlere göre genislik (width),Yükseklik(height) bölümlerini ayarlayın.Yapamıyosanız iletisim bölümünden bana blogunuzun ismini yazın.Kodları blogunuza uygun hale getirip mailinize gönderirim.

    YanıtlaSil
  8. Resmin kendi boyutunu küçültmeden resmi bire bir sığdırma şansımız yok mu acaba?

    YanıtlaSil
  9. Merhaba efendim resim sayısını nasıl azaltabiliriz 4 adet nokta var 3 olmasını istiyorum?

    YanıtlaSil
  10. Örnekte Kod içinde kırmızı ile belirtdiğim (<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>) yerleri isteginize göre degiştirebilirsiniz. Örnekte 5 adet resim var. 3 istiyosanız buraya ekleyin.
    <div id="slider">
    <!--Bu araya kaç resim istiyosanız ekleyin-->

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

    <!--Bitiş-->
    </div></div>

    YanıtlaSil
  11. Merhabalar. Çok güzel bir paylaşım olmuş. fakat takıldığım bir nokta oldu. Resimleri 800 px göre ayarladım ve yapıştırdım fakat. slayt olurken 3 tane takip noktası tam resimlerin ortasında duruyor. Alt tarafta olmasını nasıl sağlarım.

    YanıtlaSil
  12. Gamer MK Aşağıdaki işaretlediğim style kodları bölümündeki değişikliği yaparsanız problem kalmaz. Kolay gelsin.
    div.navBulletsWrapper {
    top: 410px;
    left: 330px;
    width: 150px;
    background: none;
    padding-left: 20px;
    position: relative;
    z-index: 5;
    cursor: pointer;
    }

    YanıtlaSil
  13. Hocam navigasyon sistemi çalışmıyor.Nasıl olacak?

    YanıtlaSil
  14. Pronetlen çalışmama şansı yok. Herşey gayet normal. Kendinize göre özelleştirdinizmi eklentiyi? Yapamıyorsanız, hangi resimleri istiyorsunuz, websiteniz vs. ayrıntılı bi şekilde bana iletisim bölümünden yazın. Hazılayıp gönderirim size.

    YanıtlaSil
  15. Hocam manşet slayt çalışıyor fakat alttaki küçük yuvarlak butoncuklar çalışmıyor.Hatta gözükmüyor bile yuvarlak butonlar.Hocam birde ben kodla biraz oynadım ve koddaki dosyaları kendi siteme upload ettim ve koddada upload ettiklerimi düzelttim.Ve ayrıca siteme göre uyarladım slaytı.

    Hocam sitem : http://www.netlen.net/

    YanıtlaSil
  16. Pronetlen eklentinin tam üstünde bir div style'i ekli;
    <div id="158182650742940667" align="left" style="width: 100%; overflow-y: hidden;" class="wcustomhtml">
    Burdan overflow-y: hidden; bölümünü silin.
    ve eklentinin style bölümünde
    div.navBulletsWrapper bulun ve aşağıda göstediğim bölümlerini değiştirin.
    top: 275px;
    left: 200px;
    width: 160px;

    Uyarlamanız güzel olmuş elinize sağlık. Bol ziyaretçiler dilerim. Kolay gelsin.

    YanıtlaSil
  17. Teşekkür ederim hocam ama malesef ben sitemi weebly üzerinden düzenlediğim için söylediğin div koduna erişimim yok malesef.Altta verdiğin değerleri değiştirdim fakat hiç bir faydası yok malesef değişen birşey olmadı.Başka çözümün varmıdır acaba?

    YanıtlaSil
  18. Hocam biz bunu yaptık fakat resimler çok hızlı geçiyor bunu nasıl düzeltebiliriz...

    YanıtlaSil
  19. NoO MeRCy Bayrak Kapmaca sitenizde 3 tane aynı javascript kodu var. Çakışma oluyo. O yüzden slider eklentileriniz düzensiz çalışıyo. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> Bu kodu 1'e indirin.
    </head> kodundan önce 1 tane koymanız yeterli. Script kodlarınıza dikkat edin. Kolay gelsin.

    YanıtlaSil
  20. Arkadaşlar çok güzel bir site buldum çok rahat bir şekilde slayt yapabilirsiniz.http://slideful.com/ adresine gidin slayt yapın kodunuzu alın sitenize yapıştırın.Çok güzel gerçekten.

    YanıtlaSil
  21. selam
    bu slayt ı manşet şeklinde kullanmak istiyorum.haber eklediğim zaman haber manşette yayınlasın istiyorum.haber ve görsel otomatikmen manşette çıksın .nasıl olabilir

    YanıtlaSil
    Yanıtlar
    1. Faruk bey, bu eklentide kendiniz tek tek eklemeniz gerek. Yazdığınız yazının resmini ve linkini. Ama ben otomatik paylaşılsın istiyorum diyosanız; Jquery slider manşet eklentisi adlı konuyu deneyebilirsiniz. Kolay gelsin.

      Sil
  22. herşey çok güzel eline sağlık bir tek bekleme süresini ayarlayamadım yardımcı olursanız sevinirim

    YanıtlaSil
    Yanıtlar
    1. Bekleme süresi degistirmek icin kodlar icindeki http://social-media-dosyalari.googlecode.com/files/Meftunapartblog-slayt.js script dosyasini acip icindeki pauseTime: 2600, olan bölümü istegize göre ayarlayabilirsiniz. <script>...</script> kodlari arasina ekleyerek kullanabilirsiniz, kolay gelsin

      Sil
  23. ben yalnış yaptım ayrdım edin benim blogumda sayfalar bölümünü kaldıramam onun altına eklemek istiyorum ve ben bağlantı istiyorum yani bir resim olucak dediğim yere giricek nasıl oluyor?

    YanıtlaSil
  24. teşekkürler başardım fakat bloguma da girin http://baltasa.blogspot.com.tr/ resimler düzgün çıkmıyor genişliklerini ayalıyamıyorum yardımcı olur

    YanıtlaSil
    Yanıtlar
    1. #sliderFrame ve #slider kodlarında genişliği 960 ayarlayın. Yani width:960px;
      sliderın altındaki yuvarlak bulletlerin görünmesini isterseniz;
      div.navBulletsWrapper daki left: 420px; yapın ve
      Blogger kontrol panelinden - şablon - HTML'yi Düzenle yapın.
      .tabs-outer kodunu bulun, ordaki overflow: visible; olarak değiştirin.
      Resimleriniz 960 genişlik, 720 yükseklik değerine sahip, bu bir slider için uygun boyutlar değil malesef. 960X300 olarak alttan keserek gösteriyo slider. Resimlerinizin boyutlarını slider'a göre ayarlayın yada sliderı resimlerinize göre ayarlayın. Resimleriniz facebook sunucusundan çağrılıyo. Bunları direk bloggera yüklerseniz daha uygun olur.

      Sil
  25. Resimlerin boyutu kaç olacak.

    YanıtlaSil
  26. Resimlerin boyutu kaç olacak acaba

    YanıtlaSil
    Yanıtlar
    1. Bu örnekte resimlerin boyutu, genişlik: 532px, yükseklik: 300px.
      Bu bölümleri kırmızıyla göstermiştim zaten. Resimlerinizin boyutlarına göre slideri ayarlayabilirsiniz. Kolay gelsin.

      Sil
  27. Merhaba kardeş,öncelikle adamsn helal valla sana.eğer youtube adresin adsenseliyse reklamlaa felan tıklıyım.

    Ayrıca bir sorum olcaktı.şimdi slayta 10 tane resim ekledim ama slaytın altındaki 10 tane yuvarlak iki sıra alt alta geçti.o 10 tane yuvarlağı nasıl yan yana yapabilirim.teşekkürler.

    YanıtlaSil
    Yanıtlar
    1. Çok teşekkürler. Adsense ile şu an için bi bağlantım yok.
      Sorunuzun cevabı;
      Style kodlarında div.navBulletsWrapper bölümünü bulun. Burdaki genişlik, "width" tanımını "width: 220px;" şeklinde değiştirin. Ve bunları ortalamak için aynı kod içindeki "Left" değerini "left: 150px;" olarak ayarlayın. Tabi resimlerinizin boyutuna göre ortalama değerini değiştirebirsiniz. Kolay gelsin.

      Sil
  28. yaptım çok sağolun.Bide o yuvarlakların içine sayı yazabiliyormuyuz yada şeklillerini değiştirmeyi felan ;?

    YanıtlaSil
  29. kardeşim ben dediğin yöntemi harfiyen uyguladım lakin benim manşet yerimde sitemde sadece resmin URL si gözüküyor bi yardımcı olursan SEVİNİRİM sabahtan beri uğraşıyorym :(

    YanıtlaSil
    Yanıtlar
    1. Buğra bey sitenize uyguladığınız ve olmayan slider kodlarını kopyalayıp bana iletişim bölümünden yollayın. Yanlış biyer varsa düzeltir, size e-mailinize geri yollarım. O şekilde eklersiniz sitenize.

      Sil
  30. Paylaşım için teşekkürler.Bu uygulama, asp tabanlı sitede, yuvarlak mask içinde ve sadece ana sayfada nasıl kullanılabilir? Bilgilendirme imkanı bulabilirseniz çok sevinirim

    YanıtlaSil
  31. afedersınız admınım resimlerin geçiş süresini ayarlayamadım yardımcı olurmusunuz tekrardan ?

    YanıtlaSil
  32. Abicim bana 1137 px X 645 px boyutlarında navigasyonu ayarlı kodunu atabilirmisin navigasyonu bir türlü hizalayamadım

    YanıtlaSil
  33. Paylaşım için teşekkürler.

    YanıtlaSil
  34. malesef bende resimler görünmedi

    YanıtlaSil
  35. MERABA BİŞEY SORUCAM BU İNDEX.HTML DİE TEK BİR SAYFADA DİMİ

    YanıtlaSil
  36. Yanıtlar
    1. Teşekkürler Meftun MEDE. Kolay ve pratik anlatımınız ile rahat uyguladım. Harika oldu.

      Sil
  37. Resim yerine bir dizi metni cümle cümle slayta aktarmak için ne yapabiliriz.

    YanıtlaSil
  38. Elinize sağlık üstad. güzel ve pratik bir çalışma. emeğinize saygılar

    YanıtlaSil
  39. abicim ben bunu yapamdım yaa bana bi yardım cı olsan olurmu ya

    YanıtlaSil
  40. paylaşımınız için teşekkür ederim.çok güzel çalışıyor.ancak bir türlü ana sayfa haricindeki sayfalarda görünmesini engelleyemedim.konu ile ilgili yorumlarda önerdiğiniz yazınızı da okudum.ordaki örnekleriniz gibi yapsam da sürekli hata veriyor.bu konuda yardımcı olabilir misiniz?

    YanıtlaSil
  41. merhaba. slaytı genişlettim ama slaytın altındaki o geçiş noktaları tam ortaya gelmedi biraz solda kalıd onu nasıl ortaya alabilirim

    YanıtlaSil
  42. Görsellerin değişme hızlarını nasıl ayarlayabiliriz acaba?

    YanıtlaSil
  43. Merhaba, öncelikle teşekkürler ancak ben bu eklentiyi width ve height ile büyüttüğümde alttaki noktalar tam ortada olmuyor ne yapmalıyım?

    YanıtlaSil
  44. http://www.mersintemizliksirketleri.org bu siteye eklemek istiyoum yardımcı olurmusunuz

    YanıtlaSil
  45. slayt sayfasının sol yan ve ust kenarında siyah bosluklar nasıl yok edilir

    YanıtlaSil
  46. merhaba kolay gelsin, mause slaytın ütüne geldiğinde duruyor slaytın devam etmesini istiyorum hangi kodları değiştirmem gerekiyor yada bir ipucu verirseniz ben gerisini allederim

    YanıtlaSil

Yorum Gönder

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

Önceki Makale Sonraki Makale