Blogger Eklentisi - Hareketli Resim Manşet Slayt Menüsü - II

Blogger Eklentisi - Blogger Hareketli Resim Manşet Slayt Menü

Blogger Eklentileri - ile sizlere daha önce oldukça şık bir Blogger Resimli Manşet Eklentisi sunmuştum. Blogger kullanıcılarının çok sık kullandığı bu eklentilerin farklı tiplerini de size sunarak bloglarınız için en uygununu seçmenize yardımcı olmaya çalışacağım. Blogger resimli manşet eklentisinin en önemli farkı mouse ile üzerine gelince hareketlenerek geniş bir alanda açılması.

Blogger Hareketli Resimli Manşet Demosu

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/AVvXsEi7MsImNVvlhyaG27iuzNEigdo8KvSNZUMTC3RQveKPAyKwgMQ1Db1dpyoX2i11kUVrVt5BO6kBosSqX1n0BC9Hq2NgObVEBlN-DMZO9E0Rw2IE5fqFgHlrU6aSLJ7nSsZ8rBq6SLdo6m5Y/) 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/AVvXsEgH1wsgvVb8rvObvSU7Zmc8ltm7YWHwP_40WqRfhSP8ZBvYPxE0VxiBLHfPZIsLHBb4Xspzs6zUx5UX4jHSnLvf9YN1sqGgzcGsh_unzkcTAO6tIArA589jZxY6nJJqHILfKDjX-Uc4D4g/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/AVvXsEgH1wsgvVb8rvObvSU7Zmc8ltm7YWHwP_40WqRfhSP8ZBvYPxE0VxiBLHfPZIsLHBb4Xspzs6zUx5UX4jHSnLvf9YN1sqGgzcGsh_unzkcTAO6tIArA589jZxY6nJJqHILfKDjX-Uc4D4g/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/AVvXsEgH1wsgvVb8rvObvSU7Zmc8ltm7YWHwP_40WqRfhSP8ZBvYPxE0VxiBLHfPZIsLHBb4Xspzs6zUx5UX4jHSnLvf9YN1sqGgzcGsh_unzkcTAO6tIArA589jZxY6nJJqHILfKDjX-Uc4D4g/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/AVvXsEgH1wsgvVb8rvObvSU7Zmc8ltm7YWHwP_40WqRfhSP8ZBvYPxE0VxiBLHfPZIsLHBb4Xspzs6zUx5UX4jHSnLvf9YN1sqGgzcGsh_unzkcTAO6tIArA589jZxY6nJJqHILfKDjX-Uc4D4g/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/AVvXsEgH1wsgvVb8rvObvSU7Zmc8ltm7YWHwP_40WqRfhSP8ZBvYPxE0VxiBLHfPZIsLHBb4Xspzs6zUx5UX4jHSnLvf9YN1sqGgzcGsh_unzkcTAO6tIArA589jZxY6nJJqHILfKDjX-Uc4D4g/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>

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.

Farklı tarzda bir Blogger Manşet Eklentisi İçin Buradan Buyurun : Blogger Resimli Manşet Slayt Menü >>