Blogger'da Başa Dön Düğmesi Nasıl Eklenir?
Blogger'da başa dön (Back To Top) düğmesi eklemek, uzun sayfaları hızlıca başa dönmelerini sağlar. Bu kısa rehberde, adım adım nasıl yapılacağını öğreneceksiniz. Hadi başlayalım!
CSS Kodu Ekleme
Düğmenin görünümünü özelleştirmek istiyorsanız, CSS kodunu ekleyebilirsiniz.
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
background-color:#5200ff;
color: #fff;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 40px;
cursor: pointer;
border-radius: 5%;
display: block;
justify-content: center;
transform: rotate(22,5deg);
}JavaScript Kodu Ekleme
Düğmenin çalışmasını sağlamak için JavaScript kodunu ekleyin. Bu kod, sayfanın yukarı kaydırılmasını sağlar:
<b:if cond='data:view.isPost'>
<div class='back-to-top' id='backToTop'>▵</div>
<script>/*<![CDATA[*/// Back to Top düğmesine tıklanınca sayfayı yukarı kaydır
(smooth)document.getElementById("backToTop").onclick = function() {if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {// Yavaşça yukarı kaydırma işlemi
window.scrollTo({top: 0,behavior: 'smooth'});}};
// Sayfa yukarı kaydırıldığında Back to Top düğmesini göster/gizle
window.onscroll = function() {var backToTopButton = document.getElementById("backToTop"); (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {backToTopButton.style.display = "block";} else {backToTopButton.style.display = "none";}};
/*]]>*/</script></b:if>
HTML ve JavaScript kodlarını ekledikten sonra, değişiklikleri kaydedin ve sayfanızı görüntüleyin. Başa dön düğmesi artık çalışmalıdır. Başa dön düğmesinin düzgün çalıştığını doğruladıktan sonra, isterseniz düğmenin görünümünü ve davranışını kendi zevkinize göre özelleştirebilirsiniz.