Blogger Balık Yemi Yukarı Çık Eklentisi Kurulumu

Blogger Balık Yemi Yukarı Çık Eklentisi Kurulumu

Blogger balık yemi yukarı çık eklentisi sayfalarınızda gezen ziyaretçiler için kaydırma çubuğunu kullanmasına gerek kalmadan sayfanın başına dönmesini sağlayan balık yemi şeklinde yukarı çık butonudur.

Balık yemi yukarı çık butonu sayfayı ziyaret eden ziyaretçinin sayfayı aşağı doğru çekmesinden sonra balık yeni kancası görünür olur.

Bloger siteniz için yukarı çık başa dön eklentisi yeni bir tasarım kullanmak isteyenler için oldukça güzel bir tasarıma sahiptir.

Balık Yemi Yukarı Çık (Başa Dön) Eklentisi Yükleme

Eklentiyi eklemek istediğiniz blogger sitenizi açın tema bölümüne girin ve HTML'yi düzenle açın açılan tema bölümünde ]]> </ b: skin> veya </style> alanını bulun aşağıdaki kodları bulduğunuz alanın bir üstüne yapıştırın.

.umpanikan{background-image:url(https://3.bp.blogspot.com/-cYh1IxsmhD4/VyLubMGA9gI/AAAAAAAADAw/v5_BdKLkkrwVosuBC8gTlXYSN_l0Qo_NwCLcB/s1600/umpanikan.png);background-repeat:no-repeat;position:relative}
#umpanikan{cursor:pointer;width:30px;height:530px;background-size:41px;position:fixed;top:-700px;right: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;right: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-right:5px solid #fff;content:"";display:block;position:absolute;top:0%;right:10px;width:0;height:0;z-index:99}

Ardından temanızın </body> alanını bulun aşağıdaki kodları hemen üstüne 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>

Son adımda <body> alanını bulun aşağıdaki kodları hemen altına ekleyin.

<div id="umpanikanTOP"></div>
<div class="umpanikan" id="umpanikan">
<div id="umpanikan-bubble">Başa Dön</div>
</div>

Dilerseniz başa dön bölümünü dilediğiniz şekilde değiştirebilirsiniz. İşlemleri doğru yapmış iseniz temanızı kaydedin.

Yorum Gönder

Daha yeni Daha eski

İletişim