Blogger Yukarı Çık Butonu Eklentisi Ekleme

Blogger Yukarı Çık Butonu Eklentisi nasıl ekleneceği konusunda size kolay bir şekilde Bloğunuza uygulayabilirsiniz.

Blog ziyaretçileriniz kolaylıkla sayfanın başına dönmesine yardımcı olacak bu eklenti sayesinde ziyaretçilerinize sayfa gezinmeleri ve sayfada kalma sürelerine olumlu katkı sağlayabilecek kullanışlı bir eklentidir.

Blogger Yukarı Çık Butonu Eklentisi Nasıl Eklenir

Bloğunuza kolay bir şekilde ekleyebileceğiniz bu eklentiyi temalar bölümüne gidin HTML düzenle bölümüne tıklayın. Açılan Bölümde </head>  Bölümünün hemen üstüne aşağıdaki kodu ekleyin.

 <style>
/* Back To Top */
.backtotop{display:none;background:#3c6382;color:#fff;font-size:1.4em;width:40px;height:40px;line-height:40px;outline:0;z-index:999;bottom:20px;right:20px;position:fixed;border-radius:5px;padding:0;text-align:center;cursor:pointer;opacity:1;transition:all .25s}.backtotop svg{width:24px;height:24px;transform:rotate(90deg);vertical-align:middle;transition:all .25s}.backtotop:hover{background:#0a3d62}
</style> 

Daha Sonra başa dön eklenditinin 2. ve son adımı </body> bulun ve hemen üstüne aşağıdaki kodu ekleyin.

<div class='backtotop hide'><svg viewBox='0 0 24 24'>
  <path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#fff'/>
</svg></div>
<script>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},400),!1})});
//]]>
</script>

Temayı kaydedin Blogger yukarı çık eklentisini başarı ile kurdunuz. Biraz CSS ve HTML bilginiz var ise başa dön eklentisini temanıza uygun bir şekilde rengini, boyutunu ayarlayabilirsiniz.