Cara Membuat dan Memodifikasi sendiri Tombol Back To Top

Cara Membuat dan Memodifikasi sendiri Tombol Back To Top -   Hallo, berjumpa kembali dengan saya dikesempatan kali ini, semoga gak bosen ya hehe. Dikesempatan kali ini saya akan berbagi tutorial Cara Membuat dan Memodifikasi sendiri Tombol Back To Top . 

"Apa itu tombol Back To Top?" Tombol Back To Top adalah tombol yang berfungsi untuk mempermudah pengunjung untuk menuju halaman atas Blog dengan sekali klik. 

Menurut saya pribadi, tombol ini sangat berpengaruh dan berperan penting untuk suatu Blog. Khususnya untuk mempermudah pengunjung. Coba anda bayangkan, jika anda sedang membaca artikel  yang sangaaaaat panjang di suatu Blog kemudian anda ingin menuju kehalaman atas Blog tersebut, tanpa perlu ribet mengeser scroll keatas, cukup dengan sekali klik anda sudah berada diatas halaman Blog tersebut.

Cara Membuat  Tombol Back To Top

Seperti disebutkan dijudul, tombol back to top yang akan kita buat bisa dimodifikasi sendiri oleh anda. Tenang saja, caranya tidak sulit kok, tidak perlu jago coding atau HTML. Buktinya pemula seperti saya saja bisa berarti anda juga bisa ! Berikut adalah langkah-langkahnya.

1. Silahkan menuju Dashbor Blogger anda

2. Pilih menu Template lalu klik Edit HTML

3. Jika sudah berada di menu Edit HTML, cari kode </head> kemudian copy script dibawah ini tepat diatasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>

 4. Kemudian masukan script ini dibawah kode </head>

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

5. Next, cari kode ]]></b:skin> lalu masukkan script CSS ini diatasnya

<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7r0ohqsK6Vb0FNSH7eTvmIkUmjWKMR7QedVS1tYAJfMrIltqgaPcX977U1el1lWoN8av5G9AYfSZUIkndeksFMoV7xV9RTrr6W646Z42khGcf83psnhWti8Kyh67t3ywN6IIpY2EdOF0/s1600/backtotop.png'/></div>

6. Okeee finish, klik simpan template kemudian lihat hasilnya.


Nah itulah tutotial singkat yang bisa saya berikan diksesempatan kali ini, semoga bermanfaat. Terimakasih.