Cara Memasang Tombol Back to Top / Kembali Keatas Pada Blog dan Website

Cara Memasang Tombol Back to Top atau Tombol Kembali keatas Pada Blog dan Website

Tombol Back to Top jika diartikan dalam bahasa Indonesia yaitu tombol kembali keatas. Tombol Back to Top ini sendiri adalah sebuah fasilitas yang bisa teman-teman blogger pasang pada halaman situs atau blog
yang teman-teman kelola seperti yang telah saya terapkan sendiri pada blog gudang-pengetahuanmu.blogspot.com dan dapat teman-teman lihat pada bagian kanan-bawah blog saat tampilan halaman digeser kebagian bawah. Tombol Back to Top dipasang pada blog dalam bentuk seperti sebuah tombol panah atas yang berfungsi untuk kembali ke halaman blog paling atas ketika tombol tersebut diklik. Tujuannya tidak lain adalah untuk memudahkan pengunjung apabila mereka memutuskan untuk kembali melihat atau menuju ke titik awal halaman, tentunya dengan penambahan fasilitas tombol back to top / tombol kembali keatas akan mempermudah para pengunjung blog jika ingin kembali melihat ke titik awal halaman secara otomatis (halaman akan bergulir sendiri ke bagian atas) dan akan sangat efektif jika dibandingkan halaman tersebut harus di scroll atau digulir secara manual.

Cara kerja tombol back to top atau tombol kembali keatas pada suatu blog sebenarnya sangatlah sederhana yaitu tombol back to top atau tombol kembali keatas akan otomatis muncul untuk diklik ketika isi artikel sudah digulir kebawah melebihi batas tinggi layar monitor. Tetapi yang perlu diketahui oleh teman-teman blogger yaitu untuk halaman blog yang pendek dan kurang dari ukuran tinggi layar maka tombol back to top atau tombol kembali keatas tidak akan muncul, selain itu tombol back to top / tombol kembali keatas ini biasanya berada dan akan muncul di bagian sudut kanan batas bawah halaman blog.

Tanpa basa-basi lagi langsung saja kita masuk kepada tahap memasang tombol back to top atau tombol kembali keatas seperti yang ada pada blog gudang-pengetahuanmu.blogspot.com dan yang dapat teman-teman lihat sendiri pada bagian kanan-bawah blog saat tampilan halaman digeser kebagian bawah. Silahkan teman-teman blogger mengikuti langkah-langkah berikut ini :


Cara Memasang Tombol Back to Top atau Tombol Kembali keatas Pada Blog

1. Silahkan teman-teman blogger Log In terlebih dahulu di www.blogger.com
2. Selanjutnya klik Menu Template pada blog dan pilih Edit HTML, cari kode penutup </head> bisa dengan cara pintas klik dan letakkan kursor pada kotak Edit HTML kemudian tekan tombol shortcut CTRL+F untuk menampilkan kotak pencarian dan masukkan kode penutup yang dicari yaitu </head>
3. Copy dan paste kode berikut ini tepat diatas kode penutup </head> yang telah dicari sebelumnya
   
   
   <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
   
   
4. Masih diatas kode penutup </head> selanjutnya letakkan juga kode berikut ini tepat diatasnya, sebagai catatan pada kode dibawah ini teman-teman bisa mengubah angka 500 untuk letak tombol dan angka 700 teman-teman juga bisa menggantinya untuk mengatur kecepatan
   
   
   <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. Setelah menyelesaikan tahap langkah diatas jangan lupa klik Simpan Template untuk menyimpan barisan kode yang telah diletakkan pada kode penutup </head> tadi.
6. Sekarang saatnya teman-teman menampilkan Tombol Back to Top / Tombol Kembali Keatas tadi pada blog, caranya klik Menu Tata Letak yang ada pada blog kemudian teman-teman buat Widget Baru dengan klik pilihan Menu Tambahkan Gadget >>> Pilih HTML/JavaScript kemudian Copy dan Paste kode yang ada dibawah ini pada kotak HTML/JavaScript yang tampil dan pilih Simpan
   
   
   <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/AVvXsEhtk4_fXaHu94VicNz9SJIN_fCIYRyD_pxP7_HNqyqXkzE-gwWEZu2jF67NIXDyyTh1XQjbAAgwO3QNDJhyW1aK2ANvmu10buaLPSl5pfm7hxmMCXyJV-cCGRxUu6sNZRrRJ4BjSQB4Jtxd/s1600/arrow-up_basic_blue.png'/></div>

Selanjutnya tinggal teman-teman lihat hasilnya pada blog yang teman-teman telah pasang fitur atau Tombol Back to Top ini dengan klik pilihan Lihat Blog atau dengan mengunjungi langsung halaman blog teman-teman.

Sekian artikel blogging tentang "Cara Memasang Tombol Back to Top atau Tombol Kembali keatas Pada Blog dan Website, semoga dapat bermanfaat dan bisa menambah pengetahuan blogging teman-teman semua. Selamat mencoba dan semoga berhasil (^-^)

Tweet