Cara Membuat Tombol Panah Kembali Ke Atas Back To Top Pada Blog

HELLO FLEN - Pada informasi tutorial blogging kali ini, saya akan memberikan tutorial mengenai Cara Membuat Tombol Panah Kembali Ke Atas Back To Top Pada Blog. Mungkin cara ini sama dengan yang lain, namun disini saya akan menjelaskan kembali secara detail/ terperinci. Dari sebagian orang mungkin malas untuk menscroll/ menggulirkan halaman blognya keatas dengan cara manual menggunakan mouse atau pad pada laptopnya.

Nah dengan begitu, saya disini akan membuatkan langkah-langkah cara otomatis untuk bisa kembali keatas dengan tidak perlu menscroll halaman dengan mouse atau pad pada laptop, jadi hanya dengan menekan atau mengklik gambar panah (top) bisa kembali keatas/ tampilan awal halaman. Tombol scrolling back to top panah ini juga sangat membantu, yakni ketika Anda membuka tampilan halaman blog dan menggulirkan halaman tersebut kebawah namun malas untuk scroll kembali halaman tersebut keatas, Anda hanya tinggal menekan tombol panah (top) tersebut.

Dengan begitu, Anda tidak perlu repot-repot menscroll dengan jari Anda, sehingga cara ini sangat friendly untuk pengguna blog maupun visitor yang mengunjungi blog Anda. Untuk caranya, bisa lihat langkahnya dibawah ini:



Pertama

Buka blog Anda lalu klik Template dan Edit HTML.

Kedua

Pada kolom script/coding klik sembarang lalu tekan CTRL + F dan lalu ketikan </head>.

Ketiga

Simpan atau copykan kode dibawah ini tepat pada atas tag </head>.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript">
<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>

Keempat
Klik tata letak lalu tambahkan Gadget dan akan muncul browser baru ada pilihan HTML/JavaScript klik itu lalu copykan script/coding dibawah ini dan simpan:

<style type='text/css' scoped='scoped'>
#ScrollToTop{position:fixed; bottom:53px; right:10px; cursor:pointer;display:none}
</style>
<div id='ScrollToTop'><img alt='Back to top' src='https://s20.postimg.org/3qsefxz65/back to top.jpg'/></div>

Kelima
Pada langkah ini, Anda dapat mengedit sesuai kemauan/ selera Anda tepat pada gambar dibawah ini yang sudah saya beri tanda garis bawah merah.

Keterangan:

1. bottom:53px; right:10px; : Untuk mengatur tata letak/ penempatan tombol panah (top) tepat pada bawah tampilan blog.
2. https://s20.postimg.org/3qsefxz65/back to top.jpg : Untuk menentukan/ mengganti gambar tombol panah sesuai selera Anda.

Keenam
Cek tampilan blog Anda lalu buka untuk mencoba testing script atau coding yang telah saya berikan. Bila terdapat kegagalan/ tidak mengerti silahkan hubungi kontak Admin. Sekian informasi tutorial blogging tentang Cara Membuat Tombol Panah Kembali Ke Atas Back To Top Pada Blog, semoga bisa membantu Anda apalagi untuk para pemula blogger.