Blogger için alternatif slayt eklentisi

Blogger için en çok tercih edilen eklentilerden biri de elbette slayt geçişleridir. Birçok farklı çeşidi olan bu eklentinin bugün bahsedeceğim şekli ise, kolay kurulumuyla birlikte hem sade hem de etkileyici bir yapıya sahip. Css kodları üzerinde düzenlemeler yaparak gönlünüzce değiştirebileceğiniz gibi, eklentiyi birazdan paylaşacağım haliyle de kullanabilirsiniz. Slaytımız herhangi tıklama işlemine gerek duymadan da çalışmasının yanı sıra, üzerindeki numaralara tıklayarak da hareket ettirilebilmektedir. Şimdi bu güzel eklentinin kurulumuna geçebiliriz.

 </head>

Bu kodun hemen üzerine aşağıdaki kodları ekliyoruz. 


 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(".paging").show(); $(".paging a:first").addClass("active"); var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; $(".image_reel").css({'width' : imageReelWidth}); //Paging + Slider Function rotate = function(){ var triggerID = $active.attr("rel") - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging a").removeClass('active'); //Remove all active class $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) //Slider Animation $(".image_reel").animate({ left: -image_reelPosition }, 500 ); }; //Rotation + Timing Event rotateSwitch = function(){ play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds $active = $('.paging a.active').next(); if ( $active.length === 0) { //If paging reaches the end... $active = $('.paging a:first'); //go back to first } rotate(); //Trigger the paging and slider function }, 5000); //Timer speed in milliseconds (3 seconds) }; rotateSwitch(); //Run function on launch //On Hover $(".image_reel a").hover(function() { clearInterval(play); }, function() { rotateSwitch(); //Resume rotation }); //On Click $(".paging a").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>

Daha sonra aşağıdaki kodu buluyoruz

 ]]></b:skin>

Bu kodun hemen üzerine de aşağıdaki kodları ekliyoruz.

#galeria{ margin: 0 auto; padding: 0px 0px; width: 810px; z-index:999; } .main_view { float:left; position: relative; z-index:999; } .window { height:289px; width: 800px; border:1px solid #fff; overflow: hidden; position: relative; -moz-box-shadow:0px 0px 4px #fff; -webkit-box-shadow:0px 0px 4px #fff; box-shadow:0px 0px 4px #fff; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;z-index:999; } .image_reel { position: absolute; top: 0; left: 0; z-index:1000; } .image_reel img { float: left; z-index:1001; } .paging { position: absolute; bottom: 40px; right: -1px; width: 220px; height:41px; z-index: 100; text-align: center; line-height: 40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ExNp9In2jKgAaywE-e-ie2JPa_TpFbYyuRXwT09-fVYzj5qghw31EynFQ28qT3Nd3vv3hL-4jWSaPUec-dNdEvg1_tmvSTvn8Hi_KZZF82jM4GXj8vOC2LNCqixIBNfahSU5Ooqkz1nL/s0/slider.png); -moz-border-radius-topleft: 15px; -moz-border-radius-bottomleft: 15px; -webkit-border-radius-bottomleft: 15px; -webkit-border-radius-topleft: 15px; border:1px solid #fff; border-right: 0px solid; display: none; -moz-box-shadow:inset 0px 0px 2px #d6d6d6; -webkit-box-shadow: inset 0px 0px 2px #d6d6d6; box-shadow:inset 0px 0px 2px #d6d6d6; z-index:1002; } .paging a { outline:none; padding: 5px 10px; text-decoration: none; color: #999; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ExNp9In2jKgAaywE-e-ie2JPa_TpFbYyuRXwT09-fVYzj5qghw31EynFQ28qT3Nd3vv3hL-4jWSaPUec-dNdEvg1_tmvSTvn8Hi_KZZF82jM4GXj8vOC2LNCqixIBNfahSU5Ooqkz1nL/s0/slider.png) center; -moz-border-radius: 17px; -khtml-border-radius: 17px; -webkit-border-radius: 17px; -moz-box-shadow: inset 0px 0px 1px #d6d6d6; -webkit-box-shadow:inset 0px 0px 1px #d6d6d6; box-shadow:inset 0px 0px 1px #d6d6d6; border:1px solid #fff;z-index:1002; } .paging a.active { font-weight: bold; border: 1px solid #fff; color: #17add8; background: #f1f1f1; -moz-border-radius: 17px; -khtml-border-radius: 17px; -webkit-border-radius: 17px; -moz-box-shadow: inset 0px 0px 2px #d6d6d6; -webkit-box-shadow:inset 0px 0px 2px #d6d6d6; box-shadow:inset 0px 0px 2px #d6d6d6; z-index:1002; } .paging a:hover { font-weight: bold; z-index:1002; }

Son olarak ise slaytımızın yer almasını istediğimiz şablon bölümüne aşağıdaki kodları ekliyoruz


 <div id='galeria'> <div class='main_view'> <div class='window'> <div class='image_reel'> <a href='#' rel='1'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaoVN1br21LveYuJLAmpoWWo-jVoS9GF498cyYBMLa0bjcJNWhyphenhyphenH07uB2bhllXGfxhv_vtkp3HsPSS2ocSWr1qNMmmj8NjZy9rsuWzSZJ8ZaYigq85J8k5MpBiCpxU6_GAIxafCzGMX3ay/s0/wallpapersafull_4110..jpg'/></a> <a href='#' rel='2'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwJa_tmg8_wk-8IFkfnzLpW3NN4a1tSli9D4HGgs-GuC7apyVCVT_GTNwE5LyioJ0IRHt-O2S3EkK0nhCeCoKqQ_HHh4FWFBWuhroAgHxb5gEoTR7seS5CCLYK92Py20BNLqawbPocoH3e/s0/wallpapersafull_3986..jpg'/></a> <a href='#' rel='3'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioSYnZjRbBQdkvFiHSMQlCoV2yEWTrVYIdLfYpAPnnXiirqBhaIfCEWlBhqnTAhovcNCYBzp7vwn3dbanERVtNRj0TnKJUQLw-_gOYy5lNCUXYqcMNHLyTMRLSXaq83OD4d98ssVsFTVJ5/s0/wallpapersafull_4106..jpgg'/></a></div> </div> <div class='paging'> <a href='' rel='1'>1</a><a href='' rel='2'>2</a><a href='' rel='3'>3</a> </div> </div> </div>


Böylece slaytımızı blog sayfamıza eklemiş olduk.

Önemli notlar: Script kodları içerisinde kırmızıyla belirttiğim rakamı küçülterek slayttaki resimlerin daha kısa aralıklarla değişmesini sağlayabilirsiniz. Slaytta yer alan ve kırmızıyla belirttiğim resimlerin yerine yine 800 px × 289 px boyutlarında farklı resimler koyabilirsiniz. Slayttaki resimlere tıklandığında istediğiniz bir adrese yönlendirmesini isterseniz de yine kırmızıyla belirttiğim # kısmını silerek adresi yazabilirsiniz.

Michael Bolton How Am I Supposed To Live Without You

I could hardly believe it, when I heard the news today
Buna zorlukla inanabildim, bugün haberi duydugumda
I had to come and get it straight from you
Gelmek zorundaydim ve senden dogrusunu ögrenmek
They said you were leavin', someone's swept your heart away
Onlar terk ettigini söyledi, birisi kalbini alıp götürdü
From the look uponyour face I see it's true
Yüzündeki bu ifadeden görüyorum ki bu dogru

So tell me all about it, tell me 'bout the plans you're makin'
Öyleyse anlat bana bunu, anlat bana ‘yaptigin planlari’
Oh, then tell me one thing more before I go
Oh, sonra gitmemden önce bir sey daha söyle bana

CHORUS:
Tell me how am I supposed to live without you
Söyle bana sensiz yasamam nasil beklenir
Now that I've been lovin' you so long
Seni bu kadar uzun süredir severken
How am I supposed to live without you
Sensiz yasamam nasil beklenir
And how am I supposed to carry on
Ve devam etmem nasil beklenir
When all that I've been livin' for is gone
Ugruna yasadigim hersey gitmisken

I'm too proud for cryin', didn't come here to break down
Aglamak için fazla gururluyum, buraya çökmeye gelmedim
It's just a dream of mine is coming to an end
Sadece benim bir rüyam sona eriyor
And how can I blame you when I built my world around
Ve seni nasil suçlayabilirim ben dünyami etrafina kurmusken
The hope that one day we'd be so much more than friends
Bir gün arkadastan fazlasi olabilecegimiz umudunun

I don't wanna know the price I'm gonna pay for dreaming, oh
Rüya görmek için ödeyecegim bedeli bilmiyorum
Even now it's more than I can take
Su an bile katlanabilecegimden fazla

No, I don't wanna know the price I'm gonna pay for dreaming
Hayir, hayal kurmak için ödeyecegim bedeli bilmiyorum
Oh, now that your dream has come true
Oh, simdi senin hayalin gerçek oldu