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

Termulia - Hai teman semua, pada kesempatan kali ini saya membagikan sebuah artikel yang saya beri judul Cara Membuat Tombol Back to Top - Kembali ke Atas Responsive Fast Loading Di Blog, saya coba mempersiapkan artikel ini dengan baik dan ringkas agar mudah di pahami untuk anda baca dan dapat di ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Dunia Blogger, yang saya tulis ini memberikan banyak bermanfaat bagi kita semua. Selamat membaca dan dapat memahaminya.

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

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

Sekian posting saya tentang Cara Membuat Tombol Back to Top - Kembali ke Atas Responsive Fast Loading Di Blog, mudah-mudahan bisa memberi manfaat untuk anda semua. Sampai jumpa di postingan artikel lainnya.

Bagikan link untuk teman https://termul1a.blogspot.com/2017/11/cara-membuat-tombol-back-to-top-kembali.html