Blogger Yukarı Çık Butonu Eklemek

Bazı bloglarda görürsünüz. Sayfada aşağıya doğru indiğinizde kaydırma çubuğu ile birlikte aşağıya doğru bir butonun indiğini görürsünüz. Bu buton sayfanın en üstüne, en başa dönmeniz için kolaylık düğmesidir. Tıkladığınız anda sayfanın yukarıya doğru kaydığını görürsünüz.

Yabancı bir blogda gördüğüm güzel bir yukarı çık butonunu paylaşmak istiyorum.

Yukarı çık butonunu temanıza nasıl ekleyeceğinizi aşağıdaki adımları dikkatlice uygularsanız çok kolaydır. Unutmayın blogunuzun tasarımında yapacağınız her değişiklikten önce mutlaka temanızın yedeğini alın.

Blogger yönetim panelinden ŞABLON---> HTML Düzenle'ye tıklayarak temanızın kodlarına erişin.

CTRL + F tuş kombinasyonuyla </body>   kodlarını aratın ve hemen altına gelecek şekilde aşağıdaki kodları yapıştırın.

 <style>

#rocketbacktotop{

background: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5_M4F0jIiLF2zSbYARCpfvTC2vGmJPAxg0tCUVR4xCbEdlU6Ypd4vFQYfjr6o3nmdz2IiAmUnwdgdq9YCUx_ve4nQ5-FQ7Pk-j_8KlftLJNNMzC_llWA0jkQK0SnuKNS7NnGmySTbhN-K/s1600/yukaricik.png&#39;) 0 0 no-repeat;

height: 130px;

width: 72px;

padding:5px;

position:fixed;

bottom: 5px;

right: 5px;

cursor:pointer;

    z-indez:1;

}

  #rocketbacktotop:hover{

    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5_M4F0jIiLF2zSbYARCpfvTC2vGmJPAxg0tCUVR4xCbEdlU6Ypd4vFQYfjr6o3nmdz2IiAmUnwdgdq9YCUx_ve4nQ5-FQ7Pk-j_8KlftLJNNMzC_llWA0jkQK0SnuKNS7NnGmySTbhN-K/s1600/yukaricik.png)no-repeat;

background-position: 0 -142px;

}

</style>

<!-- Back to top button by Deep Sinha -->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'/>

<script type='text/javascript'>

//<![CDATA[

$(window).scroll(function(){if($(this).scrollTop()>100)

{$("#rocketbacktotop").removeAttr("href");$("#rocketbacktotop").stop().animate(

{bottom:"0"},{duration:100,queue:false})}

else{$("#rocketbacktotop").stop().animate({bottom:"30000"},

{duration:8000,queue:false})}});$(function()

{$("#rocketbacktotop").click(function()

{$("html, body").animate({scrollTop:0},"slow");

return false})});

//]]>

</script>

<!-- Code provided to you by skillblogger Blog -->

<a href='#' id='rocketbacktotop'/> 

</html> 

Temanızı şablon önizle diyerek kontrol edin eğer temanızda bir problem yoksa şablonu kaydedebilirsiniz.

Butonun önzilemesini bloğumun sağ alt köşesinde görebilirsiniz.