Oltayla Balık Tutar Gibi! Sayfa Başına Dön Butonu Yapımı

Blogger bloğunuz için daha önce roket şeklinde yukarı çık butonu yapımını anlatmıştım. Şimdiki Yukarı çık butonumuz olta şeklinde. Siz blog sayfanızda aşağı doğru indikçe otomatik olarak olta bloğunuza atılın, oltanın ucundaki solucan ise "beni kurtarııın yukarı çek yukarıııı" diye bağırır :)

Sayfa başına dön butonu ne işe yarar?

Ziyaretçiniz özellikle uzun yazılarınızı okuduktan sonra tekrar yukarı çıkmak istediğinde iki saat o güzel parmaklarını yormasın diye oltanın ucuna tek tıklamayla sayfayı yukarı çıkarır. Anlatıma geçelim.

Oltayla Balık Tutar Gibi! Sayfa Başına Dön Butonu Yapımı

1. Blogger panelize girin.

2. Şablon

3. HTML'yi Düzenle

4. Kodlar üzerine tıklayın CTRL F tuşlarına basın arama kutusunu açın.

5. ]]></b:skin> kodunu bulun ve üst satırına aşağıdaki kodları yapıştırın.

/* Blog Bakkalı Yukarı Çık Butonu */
.umpanikan{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgup1ed2hbZMHNts54zOZLLZPB16a6woTWylmY6CvekTXMjljVzKbqqj5dTanSWWqakytzfo2VXjHShCdX7KuPakSCY5dimiF_wBcpvkzGfhKcXO_-CeUylFgFU3bM6qNjSHzuEdtNOwxQ/s1600/blogbakkali.png);background-repeat:no-repeat;position:relative}
#umpanikan{cursor:pointer;width:30px;height:530px;background-size:41px;position:fixed;top:-700px;left:7%;transition:all .7s ease-in-out;-webkit-transition:all .7s ease-in-out;z-index:21}
#umpanikan-bubble{background:#fff;border-radius:50px;color:#06f;display:block;font-size:12px;line-height:14px;opacity:0;overflow:visible;padding:5px;position:absolute;top:445px;left:20px;text-align:center;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:hidden;width:60px;height:auto;z-index:99}
#umpanikan:hover > #umpanikan-bubble,#umpanikan:hover > #umpanikan-bubble:after{opacity:1;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:visible}
#umpanikan-bubble:after{border-bottom:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff;border-left:5px solid #fff;content:"";display:block;position:absolute;top:0%;left:10px;width:0;height:0;z-index:99}

6. </body> kodunu bulun. Yine üstüne aşağıdaki kodları ekleyin.

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(n){n(window).on("scroll",!1,function(){var o=n(window).scrollTop();o>700?n("#umpanikan").css("top","0"):n("#umpanikan").css("top",o-700+"px")}),n("#umpanikan").unbind("click").click(function(){n("html,body").animate({scrollTop:n("#umpanikanTOP").offset().top},"slow")})});
//]]>
</script>

7. <body> kodunu bul ve altına aşağıdaki kodları kopyala ve yapıştır.

<div id="umpanikanTOP"></div>
<div class="umpanikan" id="umpanikan">
  <div id="umpanikan-bubble">Anaam köpek balığı! Çek yukarıı çeeek.</div>
</div>

8. Şablonu kaydedin.

DEMOSUNA BURADAN BAKABİLİRSİN

Olta şeklinde back to top yani sayfa başına dön butonu yapımı bu kadar basit. Yorumunuzla güzellik katmayı ve bloğuma üye olup destek olmayı unutmayın :) İyi bloglamalar.