Blogger Yukarı Çık Butonu Ekleme

Yukarı çık butonu çoğu bloglarda artık vazgeçilmez konumda diyebiliriz. Kullanıcıların sağ köşede görmeye alıştıkları ve kolayca ana menüye başa dönmenize yarayan yukarı çık butonu sayesinde ziyaretçilerinizin site deneyimini daha da kolaylaştırabilirsiniz.
Özellikle uzun makale yayını yapan blogger sitelerinin aramakta olduğu yukarı çık eklentisi sitelerde kullanılabilirliği arttırdığı gibi hızlı gezinmeyi de sağlıyor. Mobil uyumlu yani responsive olan bu kodlar ile sitenize daha çok özellik kazandırabilirsiniz.

Nasıl Yapılır?

İlk olarak sitenizde Tema bölümünü seçtikten sonra HTML’yi Düzenle butonuna tıklayınız. Daha sonra ]]></b:skin> kodlarını aratıp üst satırına aşağıda bulunan kodları ekleyin.

/* Yukarı Çık Butonu */ .yukaricik{visibility:hidden;width:50px;height:50px;position:fixed;bottom:50px;right:20px;z-index:9999;cursor:pointer;border-radius:50%;border:2px solid #586D82;opacity:0;-webkit-transform:translateZ(0);transition:all .5s;background:#00887a url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center} .yukaricik:hover{opacity:1;background:#00887a url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center} .yukaricik.show{visibility:visible;bottom:20px;opacity:1}

Daha sonra </body> etiketinin üstüne alt satırda bulunan kodları ekleyin;

<div class='yukaricik'></div>
<script type='text/javascript'> $(document).scroll(function() { return $(document).scrollTop()> 300 ? $('.yukaricik').addClass('show') : $('.yukaricik').removeClass('show') }), $('.yukaricik').click(function() { return $('html,body').animate({ scrollTop: '0' }); }); </script>

Kodları ekledikten sonra kaydet butonuna basın. Sitenizde başa dönmenizi sağlayacak olan yukarı çık butonu artık hazır. Sitenizi yeni pencere açıp kontrol edebilirsiniz.

Paylaş :