Blogger Animasyonlu Yukarı Çık Butonu

Retnus

14 Mayıs

Published 06 Ekim

Blogger altyapılı sitelerin artmasıyla birlikte her geçen gün daha da etkileyici eklentiler görür olduk. Eskiden sadece Wordpress'te görebileceğimiz eklentiyi bugün sizin için hazırladık. Blogger animasyonlu yukarı çık butonu sayesinde görsel olarak çok daha hoş bir bloga sahip olabileceksiniz.

Nasıl Eklerim?

Öncelikle sitenizde yer alan eski yukarı çık butonunu kaldırmanız gerekir. Çünkü bu ekleyeceğimiz eklenti ile kod çakışması yaşayıp çalışmayabilir. O yüzden de temiz bir kurulum için eskisini kaldırın. Şimdi başlayalım.

Demo için, bu sayfada veya diğer sayfalarda aşağı kaydırabilirsiniz.

Uyarı!
Düzenlemeden önce temanızı yedeklemeyi unutmayın.

1. Adım: Öncelikle Blogger Kontrol Paneli'ne giriş yapın.

2. Adım: Blogger Kontrol Paneli'nde Tema'ya tıklayın.

3. Adım: 'Özelleştir' düğmesinin yanındaki aşağı ok simgesini tıklayın.

4. Adım: HTML'yi Düzenle'ye tıklayın, temanın kodlarına yönlendirileceksiniz.

5. Adım: Şimdi kod panelinin içindeyken CTRL+F tuşuna basarak ]]></b:skin>kodunu arayın ve aşağıdaki kodu hemen üstüne yapıştırın.

Aşağıdaki kodların içinde #989b9f aratarak istediğiniz renge göre değiştirebilirsiniz.

/* Yukarı Çık Butonu by retnus.com */
.retnusTop{display:flex;align-items:center;justify-content:center;position:fixed;right:20px;bottom:70px;width:45px;height:45px;
border-radius:50%;cursor:pointer;visibility:hidden;opacity:0;z-index:5;transform:scale(0);transition:transform .3s ease, opacity .3s ease,
visibility .3s ease,margin-bottom 1s ease} .retnusTop.vsbl{visibility:visible;opacity:1;transform:scale(1)}
.retnusTop:hover{opacity:.8} .retnusTop svg{height:100% !important;width:100% !important;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);
transform:rotate(-90deg);stroke-width:1.5;cursor:pointer} .retnusTop svg .b{fill:#fff;stroke:#e6e6e6;opacity:.9} .retnusTop svg .c{fill:none;stroke:#989b9f;
stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round} .retnusTop svg .d{fill:none;stroke:#08102b} 
.drK .retnusTop svg .b{fill:#2d2d30;stroke:#404045} .drK .retnusTop svg .c{stroke:#8775f5} .drK .retnusTop svg .d{stroke:#fffdfc}

6. Adım: Şimdi</b:defaultmarkup>kodu arayın ve üstüne aşağıdaki kodları yapıştırın.

<!--[ Yukarı Çık Butonu by retnus.com ]-->
<b:includable id='blogretnus-backtoTop'>
<div class='retnusTop'>
<svg onclick='window.scrollTo({top: 0})' viewBox='0 0 34 34'><circle class='b' cx='17' cy='17' r='15.92'/><circle class='c' cx='17' cy='17' r='15.92'/><path class='line d' d='M15.07,21.06,19.16,17l-4.09-4.06'/></svg></div>
</b:includable>

7. Adım: Aşağıdaki kodları</footer>'ın altına yapıştırın.

<!--[ Yukarı Çık Butonu by retnus.com ]-->
<b:include name='blogretnus-backtoTop'/>

7. Adım: Son olarak JavaScript kodlarını ekleme kaldı. </body>Olarak aratın eğer bulamazsanız</body>olarakta aratabilirsiniz. Bulduktan sonra aşağıdaki kodları hemen üstüne yapıştırın.

<!-- Yukarı Çık Butonu by retnus.com -->
<script>/*<![CDATA[*/ 
var prPt = document.querySelector('.retnusTop circle.c'),
    ptLh = prPt.getTotalLength();
prPt.style.transition = prPt.style.WebkitTransition = 'none', prPt.style.strokeDasharray = ptLh + ' ' + ptLh, prPt.style.strokeDashoffset = ptLh, prPt.getBoundingClientRect();
var updateProgress = function () {
    var _0x89fex4 = document.documentElement.scrollTop,
        _0x89fex5 = document.documentElement.scrollHeight - window.innerHeight;
    prPt.style.strokeDashoffset = ptLh - _0x89fex4 * ptLh / _0x89fex5
};
updateProgress(), window.addEventListener('scroll', updateProgress);
var offset = 0;
window.onscroll = function () {
    document.documentElement.scrollTop > offset ? document.querySelector('.retnusTop').classList.add('vsbl') : document.querySelector('.retnusTop').classList.remove('vsbl')
};
/*]]>*/</script>

8. Adım: Son olarak bu simgeye tıklayarak değişiklikleri kaydedin.

Son

Bu yazımızda blogger animasyonlu yukarı çık butonu açıkladık. Umarım bu eklentiyi beğenirsiniz. Takıldığınız bir durum olduğunda yorum yaparak bize sorabilirsiniz.