Ziyaretçilerinizin sayfayı aşağı ve yukarı kaydırmasını kolaylaştıracak, slayt biçiminde ortaya çıkan aşağı ve yukarı butonu. Daha iyi bir ziyaretçi deneyimi yaşatmak için ziyaretçilerinizi yukarı ve aşağı kaydırma butonlarıyla memnun edibilirsiniz. Bu sayede uzun makalelerde manuel olarak sayfayı kaydırma gibi bi dertleri olmayacak.

Adımları kısaca takip ederek çok basit bir şekilde sitenize ve blogunuza ekleyebilirsiniz.

1.Adım Fontawesome Bağlantı Yükleme

Eğer blogunuzun Fontawesome bağlantısı yoksa, aşağıdaki bağlantı scriptini blogunuzdan </head> öğesini aratarak üst kısmına ekleyin.

<script type='text/javascript'>
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
</script>

Bu bağlantı sayesinde Fontawesome iconları blogunuzda görünecektir.

2.Adım Yukarı Aşağı Butonu Ekleme

Blogunuza giriş yaptıktan sonra Tema-HTML düzenle sekmesini tıklayıp </head> kodunu CTRL-F yardımı ile bulduktan sonra aşağıdaki kodu hemen üst kısmına yapıştırın.

<style type='text/css'>

#slidetop,#slidebottom{background:#fff;margin:0;padding:5px 15px 0;border-radius:0;position:fixed;color:#222;bottom:0;border:1px solid rgba(0,0,0,0.05);border-bottom:0;cursor:pointer;display:none;line-height:2;box-shadow:0 -1px 20px rgba(0,0,0,0.05);backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);transition:all .3s}#slidetop:hover,#slidebottom:hover{background:#fafafa}#slidetop{right:46px;border-radius:5px 0 0 0}#slidebottom{right:0;border-right:0;box-shadow:5px -1px 20px rgba(0,0,0,0.05)}
@media only screen and (max-width:768px){#slidetop{right:43px}}
</style>

Son olarak Aşağıdaki kodları </body> öğesini artıp bulduktan sonra öncesine ekleyip temanızı kaydedin.

<div id='downfooter'/>
<a href='#' id='slidetop'><i class='fa fa-chevron-up' title='Slide up'/></a><a href='#' id='slidebottom'><i class='fa fa-chevron-down' title='Slide down'/></a>
<script type='text/javascript'>
//<![CDATA[
// Slide Up and Down by www.naminakiky.com
!function(o){o(window).scroll(function(){o(this).scrollTop()>75?(o("#slidetop").removeAttr("href"),o("#slidetop").fadeIn()):o("#slidetop").fadeOut()}),o(function(){o("#slidetop").click(function(){return o("html, body").animate({scrollTop:0},"slow"),!1})})}(jQuery),function(o){o(window).scroll(function(){o(this).scrollTop()<0?(o("#slidebottom").removeAttr("href"),o("#slidebottom").fadeOut()):o("#slidebottom").fadeIn()}),o(function(){o("#slidebottom").click(function(){return o("html, body").animate({scrollTop:$("#downfooter").offset().top},"slow"),!1})})}(jQuery);
//]]>
</script>