BloggerDijitalİnternet

Blogger Scroll Bar (Blogger Yukarı Kaydırma) Eklentisi

Blogger bloglarda da WordPress, Joomla gibi cms sitelerde ve diğer sitelerde olduğu gibi sayfanın sağ köşesinde bulunan yukarı kaydırma butonu kullanılabilir. Genelde sitelerde yaygın olarak kullanılan ve sayfanın herhangi bir bölümündeyken tıklandığı gibi hızla sayfayı yukarı sürükleyen bir butondur bu.

Blogger tabanlı site ya da blogunuzda bu eklentiyi kullanmak için yapmanız gerekenler;

1. Adım: Blogger yönetici panelinizden aşağıda gösterildiği gibi Tema>HTML’yi düzenle seçeneğine gidiyorsunuz.

Blogger tema

Ardından çıkan kod penceresinde boş bir alana tıklayıp Ctrl+F yapıyoruz.

Sağ üst köşede çıkan arama kutusuna </head> yazıyoruz ve enter yapıyoruz. Sayfada doğrudan </head> kodunun olduğu yere gitmiş olacağız. Bu kodun hemen üstüne aşağıdaki kodu ekliyoruz.

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

Bu işlemin ardından </body> kodunu buluyoruz. Bu kodun üstüne önce aşağıdaki Javascript kodunu ekliyoruz.

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

Son olarak tekrar </body> kodunun üstüne aşağıdaki HTML kodunu ekleyerek bitiriyoruz.

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

Artık scroll bar blogunuzda kullanıma hazırdır.

Kaynak
Bloggereklentileri
Tagler

Sanalok

Sanalok Haziran 2018'de iletişimciler ve sosyal bilimlerle ilgilenenler için hayata geçirilmiş bir içerik platformudur. Diğer sitelerden farklı olarak Sanalok, katılımcı ve herkesin içerik üretebileceği bir yapıya sahiptir. Bu alandaki çalışmalar sürdürülmektedir.

İlgili İçerikler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Kapalı