Cara Membuat Tombol Sticky To Top Dengan Bilah Kemajuan Membaca

Cara Menambahkan Tombol Sticky Kembali Ke Atas Dengan Kemajuan Membaca

Jika Anda ingin menambahkan sticky to top button dengan scroll progress di situs blogger maka postingan ini hanya untuk Anda.

Apakah Anda khawatir dengan kecepatan situs web Anda? Jangan khawatir itu tidak memengaruhi kecepatan situs web Anda.

Juga jangan khawatir bagian akordeon ini berisi mode gelap css Anda hanya ingin mengubah kelas mode gelap yang Anda berikan dengan kelas mode gelap tema Anda, Anda dapat mengubahnya dengan lancar dengan mengikuti tutorial ini dengan benar.

Haruskah Anda menambahkan bilah kemajuan membaca?

Saya ingin melihatnya, saya akan mengatakan ya Anda harus menambahkan parsing progress bar ke situs blogger Anda karena pengunjung situs Anda akan menganggapnya sebagai model yang solid: artikel akan membantu memahami artikel secara keseluruhan dan kemajuannya bar akan membantu untuk memahami artikel secara keseluruhan untuk para tamu dan kesan situs Anda. untuk pertumbuhan.

Bagaimana cara kerja bilah kemajuan?

Saat tamu situs mengunjungi situs yang menambahkan bilah kemajuan, mereka melihat garis saat melihat ke bawah dan saat melihat ke atas berfungsi dengan menambahkan beberapa kode ke situs blogger Anda.

Jadi tanpa membuang waktu yang penting mari kita periksa bagaimana cara menambahkan sticky responsif ke tombol atas dengan kemajuan gulir?

Bagaimana cara menambahkan tombol sticky responsif go to top dengan kemajuan gulir?

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

1. Langkah 1: Pertama-tama, Masuk ke Dasbor Blogger Anda.
2. Langkah 2: Pada Dasbor Blogger, klik Tema.
3. Langkah 3: Klik ikon panah ke bawah di samping tombol 'sesuaikan'.
4. Langkah 4: Klik Edit HTML, Anda akan diarahkan ke halaman pengeditan.
5. Langkah 5: Sekarang cari kode ]]></b:skin> atau /*]]>*/</style> dan pastekan kode CSS berikut di atasnya. Atau Anda dapat menempelkannya di atas tag <head/> dengan menambahkan <style></style>

   /* Sticky To Top Dengan Bilah Kemajuan Membaca */ 
   .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. Langkah 6: Kemudian temukan kode </body> dan pastekan Kode JS berikut tepat di atasnya.

   <!--[ Sticky To Top Dengan Bilah Kemajuan Membaca ]-->
   <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. Langkah 7: Simpan Template dan Nikmati Tombol Sticky To Top.

Kesimpulan

Pada artikel ini saya telah membuat tutorial tentang cara menambahkan tombol sticky responsif kembali ke atas dengan kemajuan gulir. Saya harap Anda menyukai artikel ini.

Sumber:
https://www.creatorfaruk.com/2023/01/How-To-Add-Sticky-To-Top-Button.html

Lanjut ke Link Tujuan

Anda mungkin tertarik artikel ini :

Terima kasih telah membaca artikel kami yang berjudul: Cara Membuat Tombol Sticky To Top Dengan Bilah Kemajuan Membaca, jangan lupa + IKUTI website kami dan silahkan bagikan artikel ini jika menurut Anda bermanfaat. Simak artikel kami lainnya di Google News.

Dukung kami dengan memilih salah satu metode donasi di bawah ini:

Donasi via Saweria Donasi via Trakteer Donasi via PayPal

Dana / OVO / GoPay 0858 6878 6809