Alroud Blog |
Bagi anda pengguna template bawaan blogger atau pembuat template mungkin anda memerlukan tutorial ini untuk menambahkan fitur back to top di blog anda. Template bawaan blogger mungkin belum ada tombol back to top sehingga anda perlu memasang sendiri. Atau jikalau anda tidak cocok dengan back to top button bawaan template maka anda mampu menggantinya dengan tombol back to top yang akan kita pasang nantinya.
Back to top button ini memiliki smooth effect ,smooth effect ini berfungsi dikala tombol back to top diklik maka secara smooth dan lembut maka laman akan scroll up. Dengan lembut dn perlahan. Tidak pribadi menuju ke atas dengan cepat.
Back to top button sendiri memiliki tugas penting yaitu membantu pengunjung menuju bab paling atas di blog anda tanpa harus repot scroll up secara manual cukup klik tombol back to top maka mereka akan pribadi menuju ke atas. Bagaimana tertarik untuk memasang tombol back to top? Ikuti langkah dibawah 👇
Cara Membuat Back To Top Button
Langkah 1
Silakan masuk ke blogger , pilih Template ➝ Edit HTML. Cari aba-aba </head>
Langkah 2
Salin aba-aba dibawah dan letakkan diatas aba-aba </head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>Langkah 3
Salin aba-aba dibawah dan pastekan/letakkan diatas aba-aba ]]></b:skin> atau </style>
.smoothscroll-top { position:fixed; opacity:0; visibility:hidden; overflow:hidden; text-align:center; z-index:99; background-color:#2ba6e1; color:#fff; width:47px; height:44px; line-height:44px; right:25px; bottom:-25px; padding-top:2px; border-radius:5px; transition:all 0.5s ease-in-out; transition-delay:0.2s; } .smoothscroll-top:hover { background-color:#3eb2ea; color:#fff; transition:all 0.2s ease-in-out; transition-delay:0s; } .smoothscroll-top.show { visibility:visible; cursor:pointer; opacity:1; bottom:25px; } .smoothscroll-top i.fa { line-height:inherit; }Langkah 4
Salin lagi aba-aba dibawah ini dan letakkan diatas aba-aba </body>
<div class="smoothscroll-top"> <span class="scroll-top-inner"> <i class="fa fa-2x fa-arrow-circle-up"></i> </span> </div> <script type='text/javascript'> //<![CDATA[ $(function(){ $(document).on( 'scroll' , function(){ if ($(window).scrollTop() > 100) { $('.smoothscroll-top').addClass('show'); } else { $('.smoothscroll-top').removeClass('show'); } }); $('.smoothscroll-top').on('click' , scrollToTop); }); function scrollToTop() { verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; element = $('body'); offset = element.offset(); offsetTop = offset.top; $('html , body').animate({scrollTop: offsetTop} , 600 , 'linear'); } //]]> </script>Langkah 5
Simpan template dan lihat blog anda.
Gimana hasilnya? Tombo; back to topnya sudah muncul di blog anda atau belum. Jika tidak ada problem maka cukup sekian artikel cara memasang tombol back to top yang mampu saya bagikan biar bermanfaat.
