Begini Cara Mudah Membuat Tombol Back To Top Sederhana di Blogger! Pemulapun Bisa

Back to top V3 V4

 

Funsi tombol ini yaitu jika blog memposting artikel yang panjang sampai jauh ke bawah, tombol ini dapat membantu pengunjung untuk mempermudah kembali ke halaman awal artikel tanpa repot scroll ke atas. 

 

Setelah pada postingan sebelumnya admin telah berbagi tombol back to top menggunakan font awesome. Kesempatan ini admin akan berbagi tips trik cara memasang tombol back to top v3 dan v4 di Blogger. Cara memasang tombol back to top ini sangatlah mudah, berikut tutorianya. 

 

Cara Memasang Tombol Back To Top di Blogger

1. Di Blogger 👉 Tema 👉 Klik di samping Sesuaikan 👉 Edit HTML

Edit HTML Template

Pilih salah satu kode di bawah ini:

Back To Top V3

2. Letakan kode di bawah ini di atas kode </body> :

  <script type='text/javascript'>$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#ScrollToTop&#39;).fadeIn()}else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700);return false})});</script><style>#ScrollToTop{text-align:center;z-index:9999;position:fixed;bottom:50px; right:32px;cursor:pointer;display:none;opacity:0.7;}#ScrollToTop:hover{opacity:1;}</style><div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0oKX3Exqm_MHeiyCF6Zzzd7ckTnVWWWlrG31YslQIZO4Y8B7EIvXRRQ2FCrp_5D_x3rDmiv1cLcURynQKpRuGcpnUB_CT-S75FHsHSxGSP06hIi64nr-aXS0VVySOWP7fYqBTq7wm5mfRN9pshyphenhyphenUfbrJTWKGDUjTuKVWg7OK0uADSBrK2k9Hw_3KBdx8/s60/To-Top-Button-v3.png'/></div>

3. Save Template

Back To Top V4

2. Letakan kode di bawah ini di atas kode </body> :

  <script type='text/javascript'>$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#ScrollToTop&#39;).fadeIn()}else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700);return false})});</script><style>#ScrollToTop{text-align:center;z-index:9999;position:fixed;bottom:50px; right:32px;cursor:pointer;display:none;opacity:0.7;}#ScrollToTop:hover{opacity:1;}</style><div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1c6iA8P1ljYrcroFGQ8ilyJQeymP4D6XP5OUzINT6ZeOA3fCx_iVHpFyS_U1S0FNg814lJEtyD64j9ZWXhWkOy5nLCt1f9zBt8YnBYCOtf3q_Hd0feXLotnqQSylmbKF0gH_JtZ-jr1Wl5_TCWgUP776M6kMrgHkwteAshcH2wF9umpbbCH2WP4dtY5w/s80/To-Top-Button-v4.png'/></div>

3. Save Template

Untuk versi yang lain, kamu dapat melihat postingan sebelumnya. Sekian widget Blogger yang dapat dibagikan saat ini, semoga bermanfaat.