Latest News

Cara Memasang Tombol Back To Top di Blogger - Smooth Effect

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 kalau 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.

Bagi


Back to top button sendiri memiliki tugas penting adalah 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 instruksi </head>

Langkah 2
Salin instruksi dibawah dan letakkan diatas instruksi </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Langkah 3
Salin instruksi dibawah dan pastekan/letakkan diatas instruksi ]]></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 instruksi dibawah ini dan letakkan diatas instruksi </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 duduk perkara maka cukup sekian artikel cara memasang tombol back to top yang mampu aku bagikan biar bermanfaat.