To Top

By Ndo Andre At Friday, March 15, 2024

Mudah! Membuat Tombol Back To Top V3 n V4 di Blogger

By Ndo Andre At Friday, March 15, 2024

Tombol back to top V3 & V4 di Blogger. 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.

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. Cara memasang tombol back to top ini sangatlah mudah, berikut tutorianya.

Membuat Tombol Back To Top versi dua di Blog

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()>500) { $('#ScrollToTop').fadeIn()}else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').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()>500) { $('#ScrollToTop').fadeIn()}else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').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.

Ndo Andre at Friday, March 15, 2024

By Ndo Andre At Thursday, March 14, 2024

Membuat Tombol Back To Top Menggunakan Font Awesome

By Ndo Andre At Thursday, March 14, 2024

Tombol Back To Top Menggunakan Font Awesome di Blogger. Hai sobat, pada kesempatan ini admin akan berbagi widget blog yaitu tombol back to top yang mungkin saja kamu tertarik ingin menggunakannya. Tombol back to top memiliki peranan cukup penting bagi blog dengan konten yang memiliki halaman yang panjang, pengunjung dapat dengan mudah kembali ke awal artikel tanpa harus scroll halaman.

Font awesome ini memberikan kemudahan dalam menggunakan icon pada website atau blog. Seperti font pada umumnya font awesome ini sangat mudah untuk di customize dengan berbagai style css seperti size, color, drop shadow dan lain sebagainya. Berikut ini admin akan bagikan tombol back to top menggunakan font awesome di Blogger.

Membuat Back To Top Menggunakan Font Awesome

Cara Memasang Tombol Back To di Blogger

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

Membuat Tombol Back To Top Menggunakan Font Awesome

Edit HTML Template

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

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/> <script src='https://raw.githack.com/Brando07/sepeser.com/main/to-top3.js' type='text/javascript'/> <div class='smoothscroll-top'> <span class='scroll-top-inner'> <i class='fa fa-2x fa-arrow-circle-up'/> </span> </div>

Jika di template kamu sudah menggunakan font awesome seperti kode warna merah di atas maka kode ini tidak perlu digunakan lagi.

3. Save Template

Sekian tips, trik, tuorial cara memasang tombol back to top menggunakan font awesome di blogspot Blogger. Semoga bermanfaat.

Ndo Andre at Thursday, March 14, 2024

By Ndo Andre At Tuesday, March 12, 2024

Cobain Tombol Back To Top V2 ini di Blogmu Gan

By Ndo Andre At Tuesday, March 12, 2024

Tombol back to top V2 di Blogger. Hai sobat, pada kesempatan ini admin akan berbagi widget blog yang mungkin saja kamu tertarik ingin coba menggunakannya di blog kamu.

Cara membuat tombol back to top v2 ini sangatlah mudah pemasangannya. funsi tombol ini yaitu jika blog memposting artikel yang panjang sampai jauh ke bawah, tombol ini dapat membantu pengunjung untuk mempermudah kembali ke halaman atas pada awal artikel tanpa repot scroll ke atas.

Cara Memasang Tombol Back To Top V2 di Blogger

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

Edit HTML Template

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

<script type='text/javascript'>$(function() { $(window).scroll(function() {if($(this).scrollTop()>500) { $('#ScrollToTop').fadeIn()}else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').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/AVvXsEj9t6fJaCUE0oHTnd89Wpyd5DQ6r2HqqH4AilJmEAI20rcTWwRlcoVTWulgYxeHOJJcfdatLz1jbjHwjcxx-utyEhuVhM9s-32f3np4-KSXmFFbXhSQPVLQ2n6dXNrHMdROcE2fQrFqpLWIEUO7ms22HD_9D6pfk1jwbtd_XRc0VTO6UNgjtLO5zmDbIZY/s60/Back-to-Top-V2-Blog.png'/></div>

3. Save Template

Tombol back to top memiliki peranan cukup penting bagi blog dengan konten yang memiliki halaman yang panjang.

Ndo Andre at Tuesday, March 12, 2024

By Ndo Andre At Monday, March 11, 2024

Cara Membuat Tombol Back To Top V1 di Blogger

By Ndo Andre At Monday, March 11, 2024

Tombol back to top V1 di Blogger. Pada kesempatan ini admin sepeser.com akan berbagi tutorial blog tentang cara membuat tombol back to top. Ketika blog memposting artikel yang panjang, tombol ini dapat membantu pengunjung untuk mempermudah kembali ke halaman atas pada awal artikel tanpa perlu scroll ke atas.

Tombol back to top memiliki peranan cukup penting bagi blog dengan konten yang memiliki halaman yang panjang. Blog yang memuat banyak informasi pada halamannya, membuat pengunjung menggulir jauh ke bawah halaman.

Membuat Tombol Back To Top versi satu di Blog

Cara Memasang Tombol Back To Top V1 di Blogger

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

Edit HTML Template

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

<script type='text/javascript'>$(function() { $(window).scroll(function() {if($(this).scrollTop()>500) { $('#ScrollToTop').fadeIn()}else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},700);return false})});</script><style>#ScrollToTop{text-align:center;z-index:9999;position:fixed;bottom:40px; right:30px;cursor:pointer;display:none;opacity:0.7;}#ScrollToTop:hover{opacity:1;}</style><div id='ScrollToTop'><img alt='Back to top' src='http://4.bp.blogspot.com/-Izmqq2QVcY8/UmMQyNKbhYI/AAAAAAAABcI/a28qtFC2uto/s1600/backtotop.png'/></div>

3. Save Template

Tombol back to top ini memberikan fungsi baik cara untuk melompat ke atas dengan mudah dan singkat, dari pada harus menggerakannya dengan mouse.

Ndo Andre at Monday, March 11, 2024