Cara Membuat Tombol Back to Top - Kembali ke Atas Responsive Fast Loading Di Blog

Baca Juga

Cara Membuat Tombol Back to Top - Kembali ke Atas Responsive Fast Loading Di Blog-Fungsi Back to Top button ini memudahkan pengguna kembali ke halaman atas dalam satu klik atau satu sentuhan (tap).menu navigasi yang memudahkan pengunjung untuk kembali ke bagian atas halaman blog secara cepat, tanpa perlu scroll mouse atau "usap-usap" screen.

Jika halaman discroll ke bawah, tombol Back to Top ini baru muncul. Begitu diklik, maka halaman yang sedang dibuka akan otomatis bergerak ke bagian teratas.

Back to Top

adalah fitur atau widget yang "wajib" ada di blog Anda. Hal ini agar memudahkan pengunjung dalam kembali ke bagian atas halaman blog setelah scroll ke bawah untuk membaca postingan.

Tombol Back to Top ini bisa dibilang ramah pengguna (User Friendly) karena ramah dalam pengguna dan memudahkan pengunjung yang membuka halaman atau postingan blog Anda. Untuk Contoh Bisa dilihat Di https://jalan-top.blogspot.com

Baiklah Langsung saja menuju Cara Membuat Tombol Back to Top - Kembali ke Atas Responsive Fast Loading Di Blog

Langkah Pertama :

1. Buka Blogger - Kemudian Login / Masuk

2. Dashboard - Klik Template.

3. Silakan Edit HTML.

4.Temukan (CTRL+F) kode </body>

5. Copy&Paste kode berikut ini, dan letakkan diatas kode </body>

<!--Back To Top Ready Start-->
<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-chevron-up'/>
</a></div>
<script>          
$(window).scroll(function() {
if($(this).scrollTop() &gt; 200) {
$(&#39;#back-to-top&#39;).fadeIn();
} else {
$(&#39;#back-to-top&#39;).fadeOut();
}
});
$(&#39;#back-to-top&#39;).hide().click(function() {
$(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
return false;
});
</script>
<!--Back To Top End -->

6.Temukan kode ]]></b:skin> atau </style>

7. Copy&Paste kode berikut ini, dan Letakkan diatas kode  ]]></b:skin> atau </style>

#back-to-top{background:#E73037;color:#ffffff;padding:8px 10px;font-size:24px}
.back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}

8. Selanjutnya kita pasang Font Awesome.

Karena tombol kembali ke atas ini arah ke atas.

Temukan kode

</head>

Copy&Paste kode berikut ini, dan Letakkan diatas kode

</head>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link>

9. Simpan Template.

Demikian Tutorial Blogger Cara Membuat Tombol Back to Top - Kembali ke Atas Responsive Fast Loading Di Blog kali ini, bila terjadi kesalahan / Masih Bingung silakan jangan sungkan untuk berkomentar dibawah ini. Sekarang anda Buka postingan yang mana saja dan srool e bawah dan apakah sudah muncul tombol back to top.

sekian semoga bermanfaat