Blogger Hareketli Resimli Manşet Menü
1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz.
2 ) Ctrl + F yardımı ile ]]></b:skin> kodunu buluyoruz.
3 ) ]]></b:skin> kodunun öncesine aşağıdaki Blogger Eklentisi -Hareketli Resim Manşet Slayt Menüsü kodunu dizinini ekliyoruz.
/* MBL-Slide-On-Hover-Featured-Slider-Widget */ #slider { border:1px solid #aaa; border-top:none; margin: 0; padding: 0; width: 957px; height: 320px; overflow: hidden; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .kwicks { position:relative } .kwicks li{ width: 192px; height: 320px; display: block; overflow: hidden; padding: 0px; } .fadeout { border-right:1px solid #aaa; display: block; position: absolute; right: 0; width: 300px; height: 320px; z-index: 4; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiznAymxWcs6xRKf7aZwpmxr3aVx08jBEtNt9WRks5L7QvsiOWzABi2EhflcJNJFqTdMl-hnBTim5DVxIyjHvMk6cIpVjjNhJSstkFoJm_nXNGQN0wNYtmPudWyoPGKSPZembsB7zTuGUtn/) repeat-y scroll top right transparent; } #kwick_5 .fadeout { border-right:none } .kwicks.horizontal li { margin-right: 0px; float: left; } .kwicks.vertical li { margin-bottom: 5px; } .kwicks .excerpt { background: #fff; color: #000; opacity: 0.9; filter:alpha(opacity=90); position: absolute; padding: 10px; bottom: 0px; display: block; width: 100%; } .excerpt strong { font-family: "Trebuchet MS",Arial,Helvetica,san-serif; font-weight: normal; letter-spacing: 0.4px; height: 76px; line-height: 26px; font-size: 14px; display:block; text-transform:uppercase; }
4 ) Blogger Eklentisi -Hareketli Resim Manşet Slayt Menüsü bilindik eklentilerin aksine fazladan bir java komutu istiyor. Bunun Blogger kontrol panelinden > Yerleşim > Gadget Ekle > Html/JavaScript sekmesini seçerek aşagıdaki kodları ekleyerek kaydediyoruz.
<script type='text/javascript'>//<![CDATA[
jQuery.easing['jswing']=jQuery.easing['swing'];jQuery.extend(jQuery.easing,{def:'easeOutQuad',swing:function(x,t,b,c,d){return jQuery.easing[jQuery.easing.def](x,t,b,c,d);},easeInQuad:function(x,t,b,c,d){return c*(t/=d)*t+b;},easeOutQuad:function(x,t,b,c,d){return-c*(t/=d)*(t-2)+b;},easeInOutQuad:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t+b;return-c/2*((--t)*(t-2)-1)+b;},easeInCubic:function(x,t,b,c,d){return c*(t/=d)*t*t+b;},easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b;},easeInOutCubic:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t+b;return c/2*((t-=2)*t*t+2)+b;},easeInQuart:function(x,t,b,c,d){return c*(t/=d)*t*t*t+b;},easeOutQuart:function(x,t,b,c,d){return-c*((t=t/d-1)*t*t*t-1)+b;},easeInOutQuart:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t*t+b;return-c/2*((t-=2)*t*t*t-2)+b;},easeInQuint:function(x,t,b,c,d){return c*(t/=d)*t*t*t*t+b;},easeOutQuint:function(x,t,b,c,d){return c*((t=t/d-1)*t*t*t*t+1)+b;},easeInOutQuint:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t*t*t+b;return c/2*((t-=2)*t*t*t*t+2)+b;},easeInSine:function(x,t,b,c,d){return-c*Math.cos(t/d*(Math.PI/2))+c+b;},easeOutSine:function(x,t,b,c,d){return c*Math.sin(t/d*(Math.PI/2))+b;},easeInOutSine:function(x,t,b,c,d){return-c/2*(Math.cos(Math.PI*t/d)-1)+b;},easeInExpo:function(x,t,b,c,d){return(t==0)?b:c*Math.pow(2,10*(t/d-1))+b;},easeOutExpo:function(x,t,b,c,d){return(t==d)?b+c:c*(-Math.pow(2,-10*t/d)+1)+b;},easeInOutExpo:function(x,t,b,c,d){if(t==0)return b;if(t==d)return b+c;if((t/=d/2)<1)return c/2*Math.pow(2,10*(t-1))+b;return c/2*(-Math.pow(2,-10*--t)+2)+b;},easeInCirc:function(x,t,b,c,d){return-c*(Math.sqrt(1-(t/=d)*t)-1)+b;},easeOutCirc:function(x,t,b,c,d){return c*Math.sqrt(1-(t=t/d-1)*t)+b;},easeInOutCirc:function(x,t,b,c,d){if((t/=d/2)<1)return-c/2*(Math.sqrt(1-t*t)-1)+b;return c/2*(Math.sqrt(1-(t-=2)*t)+1)+b;},easeInElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4;}
else var s=p/(2*Math.PI)*Math.asin(c/a);return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;},easeOutElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4;}
else var s=p/(2*Math.PI)*Math.asin(c/a);return a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b;},easeInOutElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d/2)==2)return b+c;if(!p)p=d*(.3*1.5);if(a<Math.abs(c)){a=c;var s=p/4;}
else var s=p/(2*Math.PI)*Math.asin(c/a);if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+c+b;},easeInBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;return c*(t/=d)*t*((s+1)*t-s)+b;},easeOutBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b;},easeInOutBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;if((t/=d/2)<1)return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b;},easeInBounce:function(x,t,b,c,d){return c-jQuery.easing.easeOutBounce(x,d-t,0,c,d)+b;},easeOutBounce:function(x,t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+b;}else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b;}else if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b;}else{return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b;}},easeInOutBounce:function(x,t,b,c,d){if(t<d/2)return jQuery.easing.easeInBounce(x,t*2,0,c,d)*.5+b;return jQuery.easing.easeOutBounce(x,t*2-d,0,c,d)*.5+c*.5+b;}});
/*
Kwicks for jQuery (version 1.5.1)
Copyright (c) 2008 Jeremy Martin
http://www.jeremymartin.name/projects.php?project=kwicks
Licensed under the MIT license:
http://www.opensource.org/licenses/mit-license.php
Any and all use of this script must be accompanied by this copyright/license notice in its present form.
*/
(function($){$.fn.kwicks=function(n){var p={isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500};var o=$.extend(p,n);var q=(o.isVertical?'height':'width');var r=(o.isVertical?'top':'left');return this.each(function(){container=$(this);var k=container.children('li');var l=k.eq(0).css(q).replace(/px/,'');if(!o.max){o.max=(l*k.size())-(o.min*(k.size()-1))}else{o.min=((l*k.size())-o.max)/(k.size()-1)}if(o.isVertical){container.css({width:k.eq(0).css('width'),height:(l*k.size())+(o.spacing*(k.size()-1))+'px'})}else{container.css({width:(l*k.size())+(o.spacing*(k.size()-1))+'px',height:k.eq(0).css('height')})}var m=[];for(i=0;i<k.size();i++){m[i]=[];for(j=1;j<k.size()-1;j++){if(i==j){m[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}else{m[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}}}k.each(function(i){var h=$(this);if(i===0){h.css(r,'0px')}else if(i==k.size()-1){h.css(o.isVertical?'bottom':'right','0px')}else{if(o.sticky){h.css(r,m[o.defaultKwick][i])}else{h.css(r,(i*l)+(i*o.spacing))}}if(o.sticky){if(o.defaultKwick==i){h.css(q,o.max+'px');h.addClass('active')}else{h.css(q,o.min+'px')} }h.css({margin:0,position:'absolute'});h.bind(o.event,function(){var c=[];var d=[];k.stop().removeClass('active');for(j=0;j<k.size();j++){c[j]=k.eq(j).css(q).replace(/px/,'');d[j]=k.eq(j).css(r).replace(/px/,'')}var e={};e[q]=o.max;var f=o.max-c[i];var g=c[i]/f;h.addClass('active').animate(e,{step:function(a){var b=f!=0?a/f-g:1;k.each(function(j){if(j!=i){k.eq(j).css(q,c[j]-((c[j]-o.min)*b)+'px')}if(j>0&&j<k.size()-1){k.eq(j).css(r,d[j]-((d[j]-m[i][j])*b)+'px')}})},duration:o.duration,easing:o.easing})})});if(!o.sticky){container.bind("mouseleave",function(){var c=[];var d=[];k.removeClass('active').stop();for(i=0;i<k.size();i++){c[i]=k.eq(i).css(q).replace(/px/,'');d[i]=k.eq(i).css(r).replace(/px/,'')}var e={};e[q]=l;var f=l-c[0];k.eq(0).animate(e,{step:function(a){var b=f!=0?(a-c[0])/f:1;for(i=1;i<k.size();i++){k.eq(i).css(q,c[i]-((c[i]-l)*b)+'px');if(i<k.size()-1){k.eq(i).css(r,d[i]-((d[i]-((i*l)+(i*o.spacing)))*b)+'px')}}},duration:o.duration,easing:o.easing})})}})}})(jQuery);
$(document).ready(function() {
$('.kwicks').kwicks({
max : 700,
easing: 'easeOutQuart',
spacing : 0,
});
});
//]]></script>
Blogger Eklentisi - Hareketli Resim Manşet Slayt Menüsü - II Kullanımı
5 ) Blogger Eklentisini kullanmak için son olarak yapmamız gereken, manşeti kullanmak istediğimiz alana aşağıda ki Blogger Hareketli Resim Manşet Menüsü kodlarını eklemek.<ul class="kwicks horizontal">
<li id="kwick_1">
<span class="fadeout"></span>
<div class="excerpt">
<strong>Blogger Dersleri - Blogger Resimli Slayt Manşet Alanı Demo</strong></div>
<a href="http://www.bloggerdersleri.com/" rel="bookmark"><img height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDKn6NC86x7gfSlyRx-JKcKN_UUUP6AdnHTI61p2WuVcEeaOByS8G5C-Fuv3gqd2o9XZLovesJgD16EbljJ1HH8eTrt-A8KEmP3V6Gtq6Z0dhdb_ETZ9w7WRwfyHgidY_pNEsaUStiTUA/s1600/blogger-resimli-manset-menu+-+Kopya.png" width="700" /></a></li>
<li id="kwick_2">
<span class="fadeout"></span>
<div class="excerpt">
<strong>Blogger Dersleri - Blogger Resimli Slayt Manşet Alanı Demo</strong></div>
<a href="http://www.bloggerdersleri.com/" rel="bookmark"><img height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDKn6NC86x7gfSlyRx-JKcKN_UUUP6AdnHTI61p2WuVcEeaOByS8G5C-Fuv3gqd2o9XZLovesJgD16EbljJ1HH8eTrt-A8KEmP3V6Gtq6Z0dhdb_ETZ9w7WRwfyHgidY_pNEsaUStiTUA/s1600/blogger-resimli-manset-menu+-+Kopya.png" width="700" /></a>
</li>
<li id="kwick_3">
<span class="fadeout"></span>
<div class="excerpt">
<strong>Blogger Dersleri - Blogger Resimli Slayt Manşet Alanı Demo</strong></div>
<a href="http://www.bloggerdersleri.com/" rel="bookmark"><img height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDKn6NC86x7gfSlyRx-JKcKN_UUUP6AdnHTI61p2WuVcEeaOByS8G5C-Fuv3gqd2o9XZLovesJgD16EbljJ1HH8eTrt-A8KEmP3V6Gtq6Z0dhdb_ETZ9w7WRwfyHgidY_pNEsaUStiTUA/s1600/blogger-resimli-manset-menu+-+Kopya.png" width="700" /></a></li>
<li id="kwick_4">
<span class="fadeout"></span>
<div class="excerpt">
<strong>Blogger Dersleri - Blogger Resimli Slayt Manşet Alanı Demo</strong></div>
<a href="http://www.bloggerdersleri.com/" rel="bookmark"><img height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDKn6NC86x7gfSlyRx-JKcKN_UUUP6AdnHTI61p2WuVcEeaOByS8G5C-Fuv3gqd2o9XZLovesJgD16EbljJ1HH8eTrt-A8KEmP3V6Gtq6Z0dhdb_ETZ9w7WRwfyHgidY_pNEsaUStiTUA/s1600/blogger-resimli-manset-menu+-+Kopya.png" width="700" /></a></li>
<li id="kwick_5">
<span class="fadeout"></span>
<div class="excerpt">
<strong>Blogger Dersleri - Blogger Resimli Slayt Manşet Alanı Demo</strong></div>
<a href="http://www.bloggerdersleri.com/" rel="bookmark"><img height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDKn6NC86x7gfSlyRx-JKcKN_UUUP6AdnHTI61p2WuVcEeaOByS8G5C-Fuv3gqd2o9XZLovesJgD16EbljJ1HH8eTrt-A8KEmP3V6Gtq6Z0dhdb_ETZ9w7WRwfyHgidY_pNEsaUStiTUA/s1600/blogger-resimli-manset-menu+-+Kopya.png" width="700" /></a></li>
</ul>
Blogger Eklentisi - Hareketli Resim Manset Slayt Menusu - II
Beş manşet alanı da aynı kod dizilimi ile oluşturulmuştur. Kullanırken yapmanız gereken ayarların tamamı aynıdır.
<strong>Blogger Dersleri - Blogger Resimli Slayt Manşet Alanı Demo</strong></div>
<a href="http://www.bloggerdersleri.com/" rel="bookmark"><img height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDKn6NC86x7gfSlyRx-JKcKN_UUUP6AdnHTI61p2WuVcEeaOByS8G5C-Fuv3gqd2o9XZLovesJgD16EbljJ1HH8eTrt-A8KEmP3V6Gtq6Z0dhdb_ETZ9w7WRwfyHgidY_pNEsaUStiTUA/s1600/blogger-resimli-manset-menu+-+Kopya.png" width="700" /></a></li>
- Blogger eklentisinde kırmızı ile belirlenmiş olan alan manşetinizin başlığı ve kısa açıklamasıdır.
- Kalın olarak yazılmış http://www.bloggerdersleri.com/ ise manşetlerinizin ulaşmasını istediğiniz link.
- Pembe olarak iki farklı noktada belirlenmiş olan sayısal değerler ise manşet galerinizin boyutlarını ayarlar.
- Mavi ile verilmiş linkler ise manşet galerisinde görülmesini istediğiniz resmin linki.
0 yorum:
Yorum Gönder