Jquery ile hazırlanmış yukarı çık aşağı in butonları ekleyin

Blog’unuza eklediğiniz bir kaç parça kod sayesinde ,yukarı çık/aşağı in gibi butonları tasarımıza sabitleyerek , blog ziyaretçilerinizin sayfayı tek tıklama ile yukarıya veya aşağı doğru kaydırabilmelerini kolaylaştırabilirsiniz. yukarı-cik nternette bir çok örneğini bulabileceğiniz bu uygulamanın kodlarını bir kez blog’unuza ekledikten sonra biraz HTML ve CSS bilgisi ile kendi tasarımınıza uyarlayabilir ,yeni fonksiyonlarda ekleyebilirsiniz.
Uygulamayı hemen test edebilmek için jquery uygulamalarini tanitti[imiz bloga bakmaniz yeterli ,kendi blog’unuz da kullanmak içinse aşağıda bir gadget sizi bekliyor .


Uygulamayı blog’unuza ekledikten sonra özelleştirme işlemlerine geçmeden önce önemli bir konuya kısaca değinmek istiyorum yazımızın başında belirtiğimiz gibi uygulamamız Jquery kütüphanesini kullanmatadır bu şu anlama gelir yukarıdaki kodları ekledikten sonra biraz incelerseniz javascirpt kodlarında şöyle bir kod satırı bulunmaktadır


bu kod jquery’nin ana kodudur eklediğiniz diğer eklentileri çalıştıran bu kod şuan halen geliştirme aşamasında olduğu için sürekli güncellenmektedir .. siz daha önce bu kodun
1.5.1/  , 1.4.1/ ,1.3.1/  versiyonlarından her hangi birisini blog’unuza eklediyseniz yukarıda bulunan ana kodu tekrar eklemenize gerek yok , o yüzden o kodu silin yoksa eklentinizin çalışmamasına sebep olabilir.

Eklentiyi kendinize göre özelleştirin.

Eklentimiz iki düğmeden oluşmakta siz bu düğmelerin yerine farklı düğmeler kullanmak isterseniz  yapmanız gereken bulduğunuz görselleri her hangi bir yere yükledikten sonra linkini alıp CSS kodlarında bulunan  maviyle renklendirilmiş olan linklerle değiştirmek.

<style>
a#scrlBotm{
background:transparent url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/32x32/rnd_br_down.png) no-repeat top left;
            position:fixed;
            bottom:5px;
right:5px;
            width:32px;
            height:32px;
        }
  a#scrlTop{
background:transparent url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/32x32/rnd_br_up.png) no-repeat top left;
            position:fixed;
            bottom:40px;
right:5px;
            width:32px;
            height:32px;
        }
</style>

Farklı ikonlar bulmak için İconfinder sitesinde kısa bir arama yapmanız yeterli olacaktır.
İkonların sağda değil de solda görünmesini isterseniz yine CSS kodlarında kırmızı ile renklendirdiğim right yerine left yazın.

Düğmelere tıklanıldığın da sayfanın daha hızlı veya daha yavaş kaydırılmasını istiyorsanız javascript kodlarında bulunan kırmızı ile renklendirdiğim 1500 değeriyle oynamanız yeterli.


<script language='javascript' type='text/javascript'>
         $(function () {
             $(&#39;#scrlBotm&#39;).click(function () {
                 $(&#39;html, body&#39;).animate({
                     scrollTop: $(document).height()
                 },
1500);
                 return false;
             });
             $(&#39;#scrlTop&#39;).click(function () {
                 $(&#39;html, body&#39;).animate({
                     scrollTop: &#39;0px&#39;
                 },
1500);
                 return false;
             });
         });
    </script>


Sayfanın daha yavaş kaydırılmasını istiyorsanız 1500'ü yükseltmeniz gerekir daha hızlı kaydırılması içinse değeri düşürmeniz gerekir.
Paylaş !

20 yorum:

  1. Eklenti mükemmel hocam ekledim hemen bloga elinize sağlık :)
    Bu arada yazının sonu eksik kalmış sanırım :)

    YanıtlaSil
  2. teşekkürler By İzocin beğenmene sevindim ...
    yazı konusunda da haklısın biraz daha düzenleme yapmayı düşünüyordum o yüzden dediğin gibi eksik kaldı...

    YanıtlaSil
  3. iyi yapmışsın admin :) ayrıca bu yönlendirme fikride gerçekten güzel bir fikirmiş.

    YanıtlaSil
  4. ya tayfur ben bu etiketlerin ana sayfada görünmesini istemiyorum internetten araştırıp 1-2 şeyi denedim ama olmadı bana kesin bir şey önerebilir misin?

    YanıtlaSil
  5. etiketleri sadece yazı sayfalarında göstermek için burda ki anlatıma bakabilirsin.

    YanıtlaSil
  6. vallahi oldu teşekkürler izninle yönlendiriyorum :)

    YanıtlaSil
  7. selam tayfun abi sağol yardmılar için ışık ve sevgi ile..... tanrıça seninle olsun..

    YanıtlaSil
  8. rica ederim admin yönetici tanrı,tanrıça,ışık,sevgi,huzur,mutluluk seninle de olsun :)

    YanıtlaSil
  9. Okey güzel paylaşım.Teşkkürler.Tek harekette oley..

    YanıtlaSil
  10. Selamlar, ben http://bloggermodifiyejquery.blogspot.com daki facebook, twitter, feed butonları gibi bir şey arıyorum. Sanırım bu konuda bir yazınız yok varsa da ben bulamadım. Bunu nasıl yapabilirim. Yardımlarınız için şimdiden teşekkürler.

    YanıtlaSil
    Yanıtlar
    1. orada tab menu kullanmıştık görsellik açısından oraya eklemiştik, ilerleyen günlerde kendi blogunuza ekleeyebileceğiniz adımlarla birlikte kodlarını paylaşabiliriz.

      Sil
  11. gadgetlere ekledim yukarı çıkıyor ama aşağı inmiyor

    YanıtlaSil
  12. 2 gündür sitenin altını üstüne getirdim. Çoraplarınızı bulamazsanız benim bloğun kodlarının altına bi bakın derim :P
    Verdiğiniz bilgiler çok güzel. Teşekkür ederim. Ama ben bir şeyi beceremedim; Bu konuda vermiş olduğunuz kodları bi güzel kendi kodlarıma ekledim ve lakin sağ altta beliren işlevsiz iki okum oldu sadece. Atamıyorum da (geyiğin dibine vurdum zannımca, pardon). Bu oklar orda öylece kaldı. Tıklanmıyor da... Neyi yanlış yaptım acaba?! Her şey için teşekkür ederim tekrar.

    YanıtlaSil
    Yanıtlar
    1. böyle konuşmasını bilen insanlara hayran oluyorum yeminle.

      Sil
  13. harikasın hocam super uygulama eline emeğine sağlık

    YanıtlaSil
  14. Teşekkürler. Bana sadece yukarı çık butonu lazımdı. Kodlarda silme yaparak hallettim.

    YanıtlaSil
  15. Deneyebilirsiniz Çok Güzel Kod: http://web-site-codes.blogspot.com/

    YanıtlaSil
  16. Hocam kodlar temada slider menü bozuldu, slider uçtu :) acil yardım...http://www.edebiyatyuvasi.com/ cevabınızı bekliyorum yildiran_orhan@hotmail.com

    YanıtlaSil

Lütfen yazıyla ilgisiz yorum yapmayın sormak istediğiniz bir soru varsa sağda bulunan kotegorilerden sorunuza en uygun olan kategoriye tıklayıp, açılan sonuçlardan birisine yorum yapabilirsiniz, ayrıca sadece link bırakmak için yapılan spam yorumlar yayınlanmaz