2018-08-28

Blogger Balık Oltası Şeklinde Sayfa Başına Çıkma Kodu/Eklentisi

Merhaba arkadaşlar Blogger sitemiz için balık oltası şeklinde sayfa başına çıkma kodlarını paylaşacığım kodları ve anlatımı aşağıda bulabilirsiniz.

1- Öncelikle Blogger panelimizden Tema kısmına gelip oradan da Html'i düzenleme bölümüne geliyoruz. Sonra CTRL+F tuş kombinasyonu ile sayfada kod bulma bölümüne erişiyoruz. 2- ]]></b:skin> kodumuzu bulup bir satır üzerine aşağıda ki kodumuzu yapıştırıyoruz.

/* Aksoyhlc.net Sayfa Baışna Çıkma Kodu */

.aksoyhlcbtn {
  background-image: url(https://2.bp.blogspot.com/-wccsb4saZmk/W4Q1aRLwF9I/AAAAAAAAABE/O1u-ulGIpZgDz6EzR4Xligt78zd_bUcFQCLcBGAs/s640/aksoyhlcsayfabasi.png);
  background-repeat: no-repeat;
  position: relative
}

#aksoyhlcbtn {
  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
}

#aksoyhlcbtn-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
}

#aksoyhlcbtn:hover>#aksoyhlcbtn-bubble,
#aksoyhlcbtn:hover>#aksoyhlcbtn-bubble:after {
  opacity: 1;
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  visibility: visible
}

#aksoyhlcbtn-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
}

3- Sonra temamızda </body> etiketini bulup (genelde sayfanın sonunda olur) bir satır üzerine aşağıda ki kodumuzu ekliyoruz.

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

4- Sonra <body> etiketini bulup bir satır altına aşağıda ki kodumuzu ekliyoruz.

<!--Aksoyhlc.net Sayfa Baışna Çıkma Kodu -->
<div id="aksoyhlcbtnTOP"></div>
<div class="aksoyhlcbtn" id="aksoyhlcbtn">
  <div id="aksoyhlcbtn-bubble">Beni hemen sayfanın başına götür.</div>
</div>

Evet her şey tamam şimdi tek yapmanız gereken temanızı kayıt edip sitenizi kontrol etmek herhangi bir sorunla karşılaşırsanız yorum yapabilirsiniz.