Blog Sayfalarını Aşağı ve Yukarı Kaydırma Butonları Nasıl Eklenir?

Bu yazımızda blog sayfalarını aşağı ve yukarı kaydırma butonlarını, blog sitelerine nasıl kurulduğu ile ilgili ipuçları paylaşacağım.

Aşağı ve yukarı kaydırma butonları nedir? Blog sayfalarında başa dönmek yada sayfanın en alt kısmına fareyi yada yön tuşlarını kullanmadan, sadece bir tıklama ile aşağı ve yukarı bir tıklama yada dokunma ile kolayca hızlı bir şekilde çalışan butonlardır. Bu özelliği blog sitenize eklediğinizde ziyaretçileriniz içeriklerinize daha hızlı bir şekilde göz atabilecek.

Aşağı ve yukarı kaydırma butonları, özellikle uzun içeriklere sahip blog sayfalarının daha kolay erişilebilir olmasında önemli rol oynamaktadır. Sayfalarında çok fazla uzun içerik olan blog sitelerinin kullanması gereken pratik blog eklentilerinden biridir.

Aşağı ve yukarı kaydırma butonlarını blog sitenize kurmak için aşağıdaki adımları takip edin.

Blog Sayfalarını Aşağı ve Yukarı Kaydırma Butonları Nasıl Eklenir?

Birinci adım: Blogger hesabınızda turum açın ve eklemek istediğiniz blogun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın.

İkinci adım: Aşağıdaki HTML ve javaScript kodlarını sırasıyla blogunuzun </body> kodunun bir satır üzerine ekleyin.

javaScript

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#blogToTop").fadeIn(r):jQuery("#blogToTop").fadeOut(r)})});
$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},600),!1}})});
//]]>
</script>

Aşağıdaki HTML kodu yukarıdaki javaScript kodunun bir satır üzerine ekleyin.

HTML

<ul id='blogToTop'>
<li><a href='#top'><svg width="24" height="24" viewBox="0 0 1792 1792"><path d="M1683 1331l-166 165q-19 19-45 19t-45-19l-531-531-531 531q-19 19-45 19t-45-19l-166-165q-19-19-19-45.5t19-45.5l742-741q19-19 45-19t45 19l742 741q19 19 19 45.5t-19 45.5z"/></svg></a></li>
<li><a href='#bottom'><svg width="24" height="24" viewBox="0 0 1792 1792"><path d="M1683 808l-742 741q-19 19-45 19t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z"/></svg></a></li>
</ul>
<div id='top'></div>
<div id='bottom'></div>

Üçüncü adım: Aşağı ve yukarı kaydırma butonları iki farklı tasarıma sahip. Kullanmak istediğiniz stil dosyasını ön izleme sayfasında butonları inceledikten sonra blog sitenize ekleyebilirsiniz. Aşağıdaki eklemek istediğini CSS stil dosyasını blogunuzun </head> kodunun bir satır üzerine ekleyin.

CSS Stil Dosyası 1

#blogToTop{position:fixed;display:none;list-style:none;bottom:49%;right:10px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#blogToTop svg{fill:#000}
#blogToTop svg:hover{fill:#2196F3}
#top{position:absolute;top:0}

Ön İzleme

CSS Stil Dosyası 2

#blogToTop{position:fixed;display:none;list-style:none;bottom:49%;right:20px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#blogToTop a{display:inline-block;background:#fff;font-size:.8rem;margin:5px auto;padding:12px 14px;border-radius:100%;-webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14)}
#blogToTop a:hover{-webkit-box-shadow: 0 4px 6px 0 rgba(0,0,0,0.14);box-shadow: 0 4px 6px 0 rgba(0,0,0,0.14)}
#top{position:absolute;top:0}

Ön İzleme

Yukarıdaki adımları tamamladıktan sonra şablonu kaydedin ve blogunuzu kontrol edin.

Blog sitelerinde kullanılan blog siteleri için pratik eklentilerden biri olan sayfa kaydırma butonlarını paylaştım. Yayın ile ilgili görüşlerinizi bizimle paylaşmanızı bekliyoruz.