Appbilgi.com

Eklentisiz Yukarı Çık Butonu

03.11.2020
326

Eklentisiz Yukarı Çık Butonu (basit)

WordPress ve diğer tüm yazılımlar için eklentisiz yukarı çık butonu

Bazı wordpress temaları ve diğer CMS scriptlerinin desteklemediği yukarı çık butonunu basit ve eklentisiz bir şekilde nasıl entegre edildiğini hep beraber öğrenelim. Kullanıcılar için çok büyük bir kolaylık sağlayan bu özellik, web siteler için olmazsa olmazlardan olduğunu unutmayın.

Öncelik ile tema yada ana dizinde bulunan footer.php dosyasının </body> tag’ının hemen üzerine aşağıdaki kodu ekliyoruz.

<a href="#top" id="yukari-cik" title="Yukarı Çık"></a>

<script>
jQuery(document).ready(function($){
    $(window).scroll(function(){
        if ($(this).scrollTop() < 850) {
            $('#yukari-cik') .fadeOut();
        } else {
            $('#yukari-cik') .fadeIn();
        }
    });
    $('#yukari-cik').on('click', function(){
        $('html, body').animate({scrollTop:0}, 'fast');
        return false;
        });
});
</script>

Ardından yukarı çık butonunu css ile yapılandırmak için yine tema yada ana dizininde bulunan style.css dosyasının içine uygun bir yere aşağıdaki kodu ekliyoruz.

#yukari-cik {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
z-index:9999;
display:none;
background: url("yukari.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
transition-duration: 0.4s;
}

CSS kodlarının içinde ki right:100px; satırı yukarı çık butonunu sağa ve sola yaslama parametresidir. 100px değerini düşürdükce buton resmi sağa yaslanacaktır. Bu özelliği web sitenizin genişliğine göre istediğiniz pozisyona ayarlaya bilirsiniz.

Aşağıdaki görseli ise yine footer.php ve style.css dosyalarının olduğu bölüme yükleyin. Dilerseniz farklı bir görsel kullana bilirsiniz. Eğer farklı bir görsel kullanmak isterseniz style.css dosyasına eklediğiniz kodun içinde ki background: url(“yukari.png”); satırından yeni buton resim ismini ve height: 40px; ile width: 40px; satırlarını ise yeni buton resmine göre ölçülendire bilirsiniz.

buton1
yukari-cik
buton2

Tüm bu işlemleri yaptıktan sonra artık çok şık bir yukarı çık butonu eklemiş oluyorsunuz ayrıca karmaşık ve gereksiz dosyalardan oluşan yukarı çık eklentilerinden de kurtulmuş olursunuz.

Herhangi bir sorun yaşarsanız yorum kısmından bildirin yardımcı olmaya çalışırım.

Kolay gelsin.

Bu yazımızı beğendiyseniz, bu kategoride yer alan Wordpress Gravatar ve Diğer Görsellerin Alt Etiket Sorunu başlıklı bir önceki yazımızı da okumanızı tavsiye ederiz.

MAKALE YAZARI


Merhaba, Malatya/yeşilyurt doğumluyum. Tekstil Teknoloji Teknisyenliği alanında önlisans yaptım ve şuan özel bir sektörde mesleğimi icra etmekteyim.

ZİYARETÇİ YORUMLARI - 0 YORUM

Henüz yorum yapılmamış. İlk yorumu yukarıdaki form aracılığıyla siz yapabilirsiniz.

Copyright © 2020 Appbilgi.com. Tüm hakları saklıdır.

bilgi sitesi, trend bilgiler, saglik, tarih, teknoloji, yemek tarifleri, ip uclari, neden, bilgi, sitesi, webmaster, faydali, bilgiler, nedir, nasil, yapilir, nerede