Cara Membuat Tombol Back To Top Dengan Progress Bar Di Blogger

Apakah Anda ingin membuat tombol back to top dengan progress di blog? maka artikel ini cocok untuk anda, 

Apakah cara ini mempengaruhi  kecepatan situs web? Jangan khawatir itu tidak mempengaruhi kecepatan website Anda

Haruskah kita menambahkan progress membaca?

Ya, anda harus menambahkan progress membaca ke situs blogger Anda karena dengan menambahkan reading progress bar dapat membuat artikel Anda lebih menarik karena pembaca dapat mengetahui seberapa jauh artikel telah dibaca. 

Bagaimana cara kerja progress membaca? 

Ketika pengunjung situs mengunjungi situs yang menambahkan bilah kemajuan, mereka melihat garis ketika melihat ke bawah dan ketika mencari ke atas, itu berfungsi dengan menambahkan beberapa kode ke situs blogger Anda. 

Jadi, tanpa membuang waktu lagi, mari kita mulai tutorial membuat tombol back to top dengan progress bar di blog.

Bagaimana cara membuat tombol back to top dengan progress bar di blog? 

Penting! Sebelum kita mulai menambahkan kode ke XML, saya sarankan Anda membuat cadangan tema Anda saat ini Jika kebetulan terjadi masalah, Anda dapat memulihkannya nanti

1: Pertama-tama Login keDashboard Blogger.

2: Di Blogger Dashboard, klik Tema.

3: Klik ikon panah bawah di sebelah tombol 'sesuaikan'.

4: klik Edit HTML, , Anda akan diarahkan ke halaman pengeditan.

5: Sekarang cari kode ]]></b:skin> atau /*]]>*/</style> dan paste Kode CSS berikut tepat di atasnya. Atau Anda bisa menempelkannya di atas tag <head/> dengan menambahkan <style></style>

/* back to top dengan progress bar */ .tTpB{justify-content:center;position:fixed;right:20px;width:45px;height:45px;border-radius:50%;cursor:pointer;visibility:hidden;opacity:0;z-index:9999;transform:scale(0);transition:transform .3s ease,opacity .3s ease,visibility .3s ease,margin-bottom 1s ease}.tTpB.vbl{visibility:visible;opacity:1;transform:scale(1)}.tTpB{bottom:70px}.tTpB:hover{opacity:.8}.tTpB svg{height:100%;width:100%;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);stroke-width:1.5;cursor:pointer}.tTpB svg .b{fill:#fff;stroke:#e6e6e6;opacity:.9}.tTpB svg .c{fill:none;stroke:#482dff;stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round}.tTpB svg .d{fill:none;stroke:#08102b}.drK .tTpB svg .b{fill:#2d2d30;stroke:#404045}.drK .tTpB svg .c{stroke:#8775f5}.drK .tTpB svg .d{stroke:#fffdfc}.tTpB{display:flex;align-items:center}

6:  Kemudian cari kode  </body> dan tempelkan Kode JS berikut tepat di atasnya.

<!--[ Back To Top Dengan Progress Bar ]-->

<div class="tTpB" id="backTop" onclick="window.scrollTo({top: 0});"> <svg viewBox="0 0 34 34"> <circle class="b" cx="17" cy="17" r="15.92"></circle> <circle class="c scrollProgress" cx="17" cy="17" r="15.92"></circle> <path class="line d" d="M15.07,21.06,19.16,17l-4.09-4.06"></path> </svg> </div> <script type="text/javascript"> //<![CDATA[ 	var progressPath = document.querySelector(".scrollProgress"); 	var pathLength = progressPath.getTotalLength(); 	progressPath.style.transition = progressPath.style.WebkitTransition = 'none'; 	progressPath.style.strokeDasharray = pathLength + ' ' + pathLength; 	progressPath.style.strokeDashoffset = pathLength; 	progressPath.getBoundingClientRect(); 	progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear'; 	var updateProgress = function() { 		var scroll = document.documentElement.scrollTop; 		var height = document.documentElement.scrollHeight - window.innerHeight; 		var progress = pathLength - (scroll * pathLength / height); 		progressPath.style.strokeDashoffset = progress; 	} 	updateProgress(); 	window.addEventListener('scroll', (updateProgress)); 	var offset = 0; 	var duration = 550; 	window.onscroll = function() { 		 if (document.documentElement.scrollTop > offset) { 			document.querySelector('.tTpB').classList.add('vbl'); 		} else { 			document.querySelector('.tTpB').classList.remove('vbl'); 		} 	}; 	document.querySelector('.tTpB').onclick = function() { 		document.querySelector('html, body').animate(window.scroll({ top: ['8px', '280px'] },{ duration: 2500, // number in ms [this would be equiv of your speed]. easing: 'ease-in-out', iterations: 1, // infinity or a number. // fill: '' })); 		return false; 	}; //]]> </script>

7: Simpan Templat dan lihat.

Kesimpulan

Pada artikel ini saya telah membuat tutorial tentang membuat tombol back to top dengan progress bar. Saya harap Anda menyukai artikel ini dan silakan bagikan artikel ini dengan teman-teman Anda dan ikuti blog ini untuk mendapatkan informasi lainya. 

Share Pin Share