4 Nis 2012

Blogger Jquery Slider Menu Eklentisi

Blogger Jquery Slider Menu Eklentisi

Blogger blogunuzda slider menü kullanmak istermisiniz ? oldukça güzel bir eklenti olan Jquery Slider Menu Eklentisini blogger blogunuza eklemek için şağıdaki anlatılanları yapmanız yeterli..

Blogger blogunuzdaki ziyaretçilerinize önemli konularınızı , duyurularınızı göstermek için güzel bir eklenti...Kullanımı ve görüntüsüde oldukça hoş..

Hemen anlatıma geçelim..

Aşağıdaki kodumuzu bulalım..
]]></b:skin>
Hemen üstüne alttaki kodlarımızı ekleyelim..
/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:250px; width: 500px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(http://1.bp.blogspot.com/-e-v9GYybZSg/TdcdITdapZI/AAAAAAAAD-I/RKqZRg0lSjU/s1600/paging_bg2.png) no-repeat;
display: none; /*--eklentileri.blogspot.com--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
Şimdide bu kodu bulalım..
</head>
Bu kodumuzunda hemen üstüne aşağıdaki kodlarımızı ekleyelim..
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function() {

//Set Default State of each portfolio piece
$(&quot;.paging&quot;).show();
$(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(&quot;.window&quot;).width();
var imageSum = $(&quot;.image_reel img&quot;).size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});

//Paging + Slider Function
rotate = function(){ 
var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //eklentileri.blogspot.com

$(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class
$active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(&quot;.image_reel&quot;).animate({ 
left: -image_reelPosition
}, 500 );

}; 

//Rotation + Timing Event
rotateSwitch = function(){ 
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $(&#39;.paging a.active&#39;).next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $(&#39;.paging a:first&#39;); //go back to first
}
rotate(); //eklentileri.blogspot.com
}, 7000); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(&quot;.image_reel a&quot;).hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
}); 

//On Click
$(&quot;.paging a&quot;).click(function() { 
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
}); 

});
</script>
Yukarıdaki işlemleri yaptıysanız , kaydet diyelim..


Yerleşim kısmından blog kayıtları ( önerilir) üstüne gadget olarak aşağıdaki kodlarımızı ekleyelim..
<div class="container">

<div class="folio_block">

<div class="main_view">

<div class="window"> 
<div class="image_reel">

<a href="http://eklentileri.blogspot.com/"><img src="http://2.bp.blogspot.com/-1ot3ioCYwow/Tdcf3NzfIHI/AAAAAAAAD-Q/Ckavo7b8GMw/s1600/slider-image-1.jpg" alt="" /></a>


<a href="http://eklentileri.blogspot.com/"><img src="http://2.bp.blogspot.com/-jm2AH-oMcH4/Tdcf3py1SYI/AAAAAAAAD-U/OGqxPE8eVNA/s1600/slider-image-2.jpg" alt="" /></a>


<a href="http://eklentileri.blogspot.com/"><img src="http://4.bp.blogspot.com/-TCA28AlpMjI/Tdcf4MHoYuI/AAAAAAAAD-Y/NzvcJOrjM_4/s1600/slider-image-3.jpg" alt="" /></a>


<a href="http://eklentileri.blogspot.com/"><img src="http://2.bp.blogspot.com/-d_zcV_6OCLY/Tdcf5E4Fu2I/AAAAAAAAD-c/33kU0yD1TYk/s1600/slider-image-4.jpg" alt="" /></a>

<a href="http://eklentileri.blogspot.com/"><img src="http://2.bp.blogspot.com/-0uxQB121U-A/Tdcf56FpJuI/AAAAAAAAD-g/ltXixg26NtM/s1600/slider-image-6.jpg" alt="" /></a>


</div>
</div>
<div class="paging">

<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
<a href="#" rel="5">5</a>

</div>
</div>

</div> 

</div>
Yukarıdaki kırmızı olan yerleri kendinize göre düzenleyin..DEMO


<<< Bu Yazı için Arama Sonuçları  >>>

Blogger Jquery Slider Menu Eklentisi , Blogger Jquery Slider Menu  , Blogger Jquery  Menu Eklentisi , Blogger Jquery  Menu , Blogger  Slider  Eklentisi , Blogger Jquery  Eklentisi , Blogger Slayt Menu

Eklentileri.blogspot.com Hakkında.


Blogumuz ilk yayınından bu güne , blogger eklentilerini , tüm blogger kullanıcılarına ulaştırmak için yayın yapmış , bu süre içinde hiç bir şekilde kar/gelir elde etmemiş , etmiyecektir..Lütfen desteklerinizi bizden esirgemeyin..

Bizi Facebook ve Twitter üzerinden de takip edebilirsiniz..

26 yorum:

Zkcn dedi ki...

İşe yaradı bu tür çalışmalar bekliyoruz saygılar

Ceren Akyol dedi ki...
Bu yorum bir blog yöneticisi tarafından silindi.
BY_İDDAA dedi ki...

HOCAM EMEĞİNİZE SAĞLIK GÜZEL OLMUŞ..YANLIZ SADECE ANA SAYFADA GÖRÜNSÜN İSTİYORUM YARDIMCI OLURSANIZ SEVİNİRİM ŞİMDİDEN TŞKLER.

Eklentileri.Blogspot dedi ki...

@BY_İDDAA

isteğiniz üzere BU YAZIDA anlatımını yaptım..

BY_İDDAA dedi ki...

İLGİNİZ İÇİN TŞK EDERİM VERDİĞİNİZ KODLARI EKLEDİM VE SORUNUM ÇÖZÜLDÜ ÇALIŞMALARINIZIN DEVAMI DİLERİM..

Eklentileri.Blogspot dedi ki...

Reca ederiz, güle güle kullanın..

Adsız dedi ki...

hocam ben birşey sormak istiyorum ama şuana kadar blogger sitelerinde pek rastlamadım. wordpresste veya normal kodlarla hazırlanmış sitelerde dha çok oyun sitelerinde yeni bir oyun eklendiği zaman resmin üzerinde new diye yazı çıkıyor. acaba bloggerda böyle birşey olur mu?

Eklentileri.Blogspot dedi ki...

Açıkçası mümkün olduğunu düşünüyorum , bir kaç css kodu ile çözülebilir, yakın zamanda bununla ilgili bir konu paylaşırım , eklentileri.blogspot@gmail.com adresine bununla ilgili bir hatırlatma maili atarsanız , paylaştığım zaman mail yolu ile size geri bildirim yapabilirim..

oğuzhan hazan dedi ki...

bu konuyla ilgili bişey sorabilir miyim ?

Eklentileri.Blogspot dedi ki...

@Oğuzhan Hazan

Tabiki Sorabilirsiniz..

oğuzhan hazan dedi ki...

ben bu menüyü siteme ekledim ama resim eklediğim zaman resimler ya çok büyük geliyor yada küçük bunu nasıl ayarlıyabilirim?

Eklentileri.Blogspot dedi ki...

resim boyutlarını 500x250 olarak kullanırsanız sorun olmaz..

oğuzhan hazan dedi ki...

tmm çoook sağol teşekkür ederim

oğuzhan hazan dedi ki...

yaptım ama oda çok büyük oldu ???

Eklentileri.Blogspot dedi ki...

blog adresinizi yazabilirmisiniz..

oğuzhan hazan dedi ki...

http://pratik-zeka.blogspot.com/

Eklentileri.Blogspot dedi ki...

Dediğim gibi 500x250 den büyük resim eklemeyin..eklediğiniz bazı resimler büyük

Ahmet Yıldırım dedi ki...

ben ekledım fakat resımler slayt olarak degılde alt altta cıkyıor

Eklentileri.Blogspot dedi ki...

@Ahmet Yıldırım

Hata yapıyor olabilirsiniz , eklenti sorunsuz çalışmakta çünkü..tekrar denermisiniz ? olmazsa blog linkinizi buraya yada eklentileri.blogspot@gmail.com adresine mail atın temanızı inceleyim..

Adsız dedi ki...

resimleri ve web sitelerini gayet iyi ekleyebildim fakat resim üzerine yazıyı nasıl yazabilirim?

Serkan Uludag dedi ki...

bazen eklenti sapıtıyor çok hızlı değişiyor

Servis dedi ki...
Bu yorum bir blog yöneticisi tarafından silindi.
Hasret dedi ki...

Olmuyor abi kafayı yemek üzereyim. Resimler yan yana çıkıyor yok mu bunun bir çözümü ?

Rosario dedi ki...

Merhaba,

Öncelikle anlatımınız için teşekkür ederim.

Bu slaydı ben siteme koymak istiyorum lakin son gönderilen konulardaki resimler çıksın istiyorum otomatik olarak nasıl ayarlayabilirim? Şimdiden teşekkürler.

Kod Peres dedi ki...
Bu yorum bir blog yöneticisi tarafından silindi.
Jash Hallas dedi ki...

java kodunu /head üstüne atınca sayfa kar gibi oluyor. yani birsey yok bembeyaz. ii de hata nerde

Yorum Gönder

Blogger tarafından desteklenmektedir.