Cara Memasang Tombol Back To Top Ringan Dan Responsive 2016

Fungsi Dari Back To Top ini untuk kembali ke halaman atas. kita tidak perlu lagi menggullirkan scroll pada mouse berkali kali. begitu juga smartphone, tidak perlu lagi mengusap usap layarnya, tapi dengan dengan menekan satu klik saja pada Back To Top ini, akan secara singkat kembali ke menu atas.

Dengan memasang Back To Top ini, akan membuat Blog kita User Friendly. Biasanya tombol ini berada disudut kanan bawah pada tampilan blog kamu.

Banyak cara memasang back top top ini. Kita akan membuat Back To Top yang Responsive, Ringan, Smooth dan cepat dengan Font Awesome.

Cara Pemasangannya

Cara Memasang Back To Top

1. Login ke Blogger
2. Dashboar Blog >> Template >> Edit HTML
3. Cari </head> dengan CTRL + F (untuk mempercepat pencarian) dan letakkan Bootstrap Font Awesome ini diatas </head>

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

4. Pastekan CSS dibawah diatas ]]></b:skin

/* Back To Top */
#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}

5. Kemudian, Cari kode </body> dan letakkan Jquery dibawah tepat diatas </body>

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

6. Simpan Template

Sekarang coba lihat blog kamu, apakah sudah ada atau belum tombol Back To Top nyaa.

Note : Jika kode </head> dan </link> nya berubah jadi warna merah, itu tidak masalah. Contohnya

Yang saya tandai, itu terjadi saat kamu ingin meletakkan Font Awesomenya. maka setelah meletakkannya diatas </head> akan berubah menjadi warna merah.

Cukup dulu pembahasan kita. semoga artikel ini membantu. Terimaksih sudah berkunjung.

Tweet

Postingan terkait:

Ditulis Unknown — Sunday, October 23, 2016 — Add Comment — Tutorial Blog