Kolay Gezinmek İçin Başa Dön Butonu Eklentisi

Tidak Ada Tanggapan

Blogger başa dön butonu, yukarı çık ve aşağı in eklentisi
  Blog siteleri veya web siteleri için yukarı çıkma butonu hem işlevsel hem de görünüme artı puan kazandıran bir yöntem. Benim paylaşacağım kod ile hem yukarı çık hem de aşağı in butonu ile blog sayfasında kolay gezebileceksiniz. Blogger servisi için tasarlanmış bu animasyon destekli kod ile sorunsuz bir kullanım sağlayacaksınız. Özellikle blog sayfasında devamını oku kullanmayan ve uzun yazılar paylaşan yazarlar için gayet kullanışlı olacağını düşünüyorum. Böylece okuyucular başa dönme butonu ile uğraşmadan blog sayfanızı inceleyebilirler.

Başa Dön (Scroll to Top) Eklentisi Nasıl Eklenir?

  Eklentiyi kurabilmeniz için iki aşamalı bir kod ekleme yapacağız.
1) İlk olarak css kodları için ]]></b:skin> kodunun hemen üstüne aşağıdaki kodu ekleyin. Eğer çalışmazsa </style> kodunun bir satır üstüne ekleyin. background: #666 renk kodunu değiştirerek istediğiniz rengi ekleyebilirsiniz. Html renk kodları ve isimleri yazımı okuyarak renk fikirleri edinebilirsiniz.

#UpTotop, #DownTotop {background:#666;text-align:center;position:fixed;right:10px;cursor:pointer;width:30px;height:30px;line-height:43px;border-radius: 2px;z-index:999;} #UpTotop {bottom:10px;display:none;}#DownTotop {top:30px;}#UpTotop svg, #DownTotop svg {fill:#fff;width:24px;height:24px}

2) Temanızda </body> kodunu aratarak hemen üstüne aşağıdaki javascript kodunu ekleyin. Kaydettikten sonra blog sayfanızı incelediğinizde başa dön butonunun çalıştığını göreceksiniz.

<script type='text/javascript'>//<![CDATA[ $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#UpTotop').fadeIn(); } else { $('#UpTotop').fadeOut(); } }); $('#UpTotop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); var $elem = $('body'); $('#DownTotop').click(function () { $('html, body').animate({scrollTop: $elem.height()}, 2000); $('#DownTotop').fadeOut()}); $('#UpTotop').click(function () { $('#DownTotop').fadeIn() });}); //]]></script><div id='UpTotop'><svg viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path d='M5 4v2h14V4H5zm0 10h4v6h6v-6h4l-7-7-7 7z'/></svg></div><div id='DownTotop'><svg viewBox='0 0 24 24'><path d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/><path d='M0 0h24v24H0z' fill='none'/></svg></div>

Kaynak: Blogger Eklentileri

✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵