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

Kasım 03, 2015
balik-yukari-cik-dugmesi-yapimi

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://2.bp.blogspot.com/-j4gdLyohXTg/VjkUblLwsWI/AAAAAAAAAgI/C8oE8yfRacs/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. 


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.

Altı yıldır blog işleriyle uğraşıyorum. Edindiğim tecrübeleri sizlerle paylaşıyorum.

2 Yorum
avatar

çalışmıyor

Yanıtla
avatar

bir yerde yanlışlık yapıyor olmalısınız. Denedim yine çalışıyor.

Yanıtla

Yorumlarda Kod vs. Kullanmak İÇİN
  • Lütfen sadece bu konuyla ilgili yorumlarınızı bırakınız.
  • Yoruma kod eklemek için <i rel="code"> kodu bunun yerine yazın </i>
  • Daha uzun kod eklemek için <i rel="pre"> kodu bunun yerine yazın </i>
  • Tırnak işareti kullanmak için <i rel="quote"> yorumu bunun yerine yazın </i>
  • Resim eklemek için <i rel="image"> resim url </i>
  • Video eklemek için [iframe] URL embed kodunu buraya yapıştırın [/iframe]
  • Sonra aşağıdaki butona basın ve kodları dönüştürün.
  • © 2015 Blog Bakkalı ✔