Blog İçin Animasyonlu Başa Dön Butonu

Blog siteleri için iki yönlü (aşağı-yukarı), başa dönüşlerde animasyon efekti olacak şekilde fonksiyonel özellikli ve CSS3 tasarımlı başa dön (Scroll To Top) butonunu paylaşacağım.

Bknz: Blogger ve WordPress AMP Başa Dön Butonu

Blog sitesine neden başa dön butonu neden eklenmeli? Başa dön butonu, ana sayfanızda çok fazla yayın varsa ve yayınlarınız çok uzun ise ziyaretçileriniz sayfa sonuna ve sayfa başına kaydırma butonu ile daha hızlı erişim sağlar ve blogunuzun daha kullanışlı duruma gelir.

Ön İzleme

Blogunuza başa dön butonu elemek için, aşağıdaki adımları takip edin.

Bloga Başa Dön Butonu Nasıl Eklenir?

Aşağıdaki CSS kodlarını, blogunuzun şablon kodları arasında bulunan ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin.

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

Aşağıdaki javaScript kodunu </body> blogunuzda bulunan konun bir satır üzerine ekleyin.

<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>

Aşağıdaki HTML kodları, yukarıdaki javaScript kodunun bir satır altına ekleyin.

<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>

Şablonu kaydederek blogunuzu kontrol edin. Yukarıdaki kodlar ile ilgili herhangi bir problem yaşanması durumunda yorum formunu kullanarak eklenti ile ilgili sorunlarınızı bize iletebilirsiniz.