Cara Membuat Tombol Kembali ke Atas (Back to Top) di Blogger

Follow @romel_tea
Cara Membuat Tombol Kembali ke Atas (Back to Top) di Blogger
Tips Blogging berikut ini tentang cara memasang atau membuat tombol kembali ke atas (Back to Top Button).

Tombol Kembali ke Atas ini sudah menjadi trending design.

Fungsinya untuk memudahkan pembaca kembali ke bagian atas halaman blog yang sedang dibuka dengan mudah. Dengan ekali klik atau tap (sentuh) saja, halaman akan scroll otomatis ke bagian atas.

Template bawaan blogger belum dipasangi tombil back to top ini. Karenanya, kita harus memasang sendri.

Cara Membuat Tombol Kembali ke Atas (Back to Top) di Blogger

Berikut ini cara memasang kode tombol kembali ke atas.

1. Klik Tema > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>

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

3. Copas kode JavaScript Back to Top berikut ini di atas kode </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>

4.  Copas kode berikut ini di atas kode </head> 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Catatan:
- Kode nomor 4 biasanya sudah ada di template blog Anda. Kalau sudah ada, abaikan kode nomor 4, yaitu link ke kode jQuery dan link ke Awesomefont.

5. Save! Simpan template.

Demikian Cara Memasang Back to Top untuk Blogger. (www.romelteamedia.com).

Thanks for reading Cara Membuat Tombol Kembali ke Atas (Back to Top) di Blogger | Tags:

Next Article
« Prev Post
Previous Article
Next Post »

Related Posts

Your Comments

0 komentar on Cara Membuat Tombol Kembali ke Atas (Back to Top) di Blogger

Post a Comment

Komentar SPAM dan LINK AKTIF tidak akan muncul.