Anasayfa » » Blogger Yukarı Çık Butonu Eklemek

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/AVvXsEjbQzYois6-FgZ7T2PgUHlJrX3y3wVQ-SjI2ggV2pjueK5m9OZpjfj-O84D-R7y37FST-QAfd4jIa4UcKhi8kL3PzGcNu3ebaArDZA-KQXpLQXde_Hh-0a804b2L8zfaW7vGAtXNWhDyhP6/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/AVvXsEjbQzYois6-FgZ7T2PgUHlJrX3y3wVQ-SjI2ggV2pjueK5m9OZpjfj-O84D-R7y37FST-QAfd4jIa4UcKhi8kL3PzGcNu3ebaArDZA-KQXpLQXde_Hh-0a804b2L8zfaW7vGAtXNWhDyhP6/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.


3 yorum:

  1. Merhaba verdiğiniz kodda hatalar var;
    14 tane hata buluyor ve sizin blogunuzdaki gibi buton çıkmıyor...
    Düzenlerseniz sevinirim.

    YanıtlaSil
  2. aşağıdaki kodları deneyiniz..

    http://codings.trueblogtips.com/rocket-back-to-top.txt

    YanıtlaSil
  3. Linki kopyalayıp tarayıcınız adres çubuğuna yapıştırınız. Karşınıza çıkan kodları < /body > etiketinden sonra yapıştırın.

    http://codings.trueblogtips.com/rocket-back-to-top.txt

    YanıtlaSil

Yorum yazarken güzel Türkçe'mizi güzel kullanalım!