Blogger Animasyonlu Yukarı Çık Butonu

"Blogger Animasyonlu Yukarı Çık Butonu, Blogger Eklentileri"

Nasıl Eklerim?

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