Cara Membuat Navigasi Tombol Back to Top Blog

Salah satu filture penting yang direkomendasikan ada dalam tampilan sebuah halaman utama dan postingan blog adalah adanya Tombol Navigasi Back to Top (Kembali ke Halaman paling Atas). Karena tidak semua themplate yang ada sudah menyertakan filture ini. Blog dengan Artikel atau postingan dengan pembahasan yang panjang lebar sangat direkomendasikan untuk menerapkan Tombol Navigasi Back to Top ini. Karena dengan adanya Tombol Navigasi ini pembaca akan lebih mudah mengulang kembali membaca isi dari postingan blog. Dengan adanya Tombol Navigasi ini pembaca akan semakin dipermudah dalam mengakses keseluruhan isi dari postingan yang panjang lebar.  



Bagi sobat blogger yang kebetulan template yang dipakai untuk blog kesayangan belum memiliki filture ini dan ingin mencoba menerapkannya dapat mengikuti tutorial berikut ini: 
DOWNLOAD SOURCE CODE Navigasi Tombol Back to Top

Pertama-tama akses halaman Dasboard Blogger,  pilih menu Tema kemudian pilih Edit HTML. Cari kode </head> agar lebih mudah gunakan filture pencarian dengan cara menekan kombinasi tombol CTRL + F. 

Setelah Kode </head> kalian temukan, pastekan code scrip HTML berikut ini diatas kode </head>

 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/> 
<script type='text/javascript'> $(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) 
{ $(&#39;#ScrollToTop&#39;).fadeIn()} else { $(&#39;#ScrollToTop&#39;).fadeOut();}});
$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700); 
return false})}); 
</script>

Keterangan :
Angka 500 = Letak atau Posisi tombol yang kalian inginkan
Angka 700 = Kecepatan untuk kembali keatas

Klick Save untuk Menerapkan dan menyimpan kode di atas ke dalam HTML Themplate
Setelah itu buatlah Widget HTML/JavaScript melalui menu Tata Letak Dasboard Blogger

 
<style type='text/css' scoped='scoped'>
#ScrollToTop{position:fixed; 
bottom:0px; right:3px; 
cursor:pointer;display:none} 
</style> 
<div id='ScrollToTop'>
<img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGiZtCcJADkNtQk0BEsQ9PKDkUHrfaLLsbbvQhs6BzMNuaA9j0oWrj8aiDduuWudruHsmT3UDSZQM7Pv1Ob1gK5S7NTQTRaj2avCn3jIx2iknwFP_G7Pqd2omSsBG0uU2ShwW7VscZK8vX/s1600/arrow-up_basic_blue.png'/></div> 

Pastekan Code Scrip berikut ini pada kolom input HTML/JavaCrip, untuk judul widget abaikan kosongkan saja.

Klick Save untuk menyimpan Add Widget. 

Sekarang coba kalian test buka halaman Blog kalian, Tombol Navigasi Back to Top sudah muncul di sudut kanan bawah.

Demikianlah Tutorial Cara Membuat Tombol Navigasi Back to Top pada halaman utama dan halaman postingan Blog, semoga bermanfaat dan terima kasih telah berkunjung.