Cara Membuat dan Memasang Tombol 'Back To Top' di blog

Ketika blog memposting artikel yang panjang misalnya, tombol inilah yang akan di gunakan pengunjung untuk mempermudah kembali ke halaman atas pada sebuah blog tersebut tanpa perlu menggeser scroll ke atas. Tombol back to top memiliki peranan cukup penting bagi sebuah blog atau website dengan konten yang berat dan memiliki halaman yang panjang. Untuk website yang memiliki banyak informasi pada halamannya, akan membuat konten-konten lain terlewati, tanpa disadari menggulir jauh ke bawah halaman.

Tombol back to top ini memberikan fungsi baik cara untuk melompat ke atas dengan mudah dan singkat, daripada menggerakannya dengan mouse. Ini adalah salah satu cara untuk mendorong pengguna menelusuri lebih banyak konten-konten yang lainnya. Nah kita sebagai pemilik blog harus cari cara buat mengatasi masalah itu, biar pengunjung blog betah baca postingan kita gan. Caranya ya kita pasang tombol back to top, jadi pengunjung tinggal ngeklik tombol aja

Cara Memasang Tombol 'Back To Top'

1. Login ke Blogger.
2. Klik Template kemudian Edit HTML.
3. Klik kiri 1 kali di kotak template.
4. Tekan Ctrl+F untuk pencarian cepat.
5. Cari kode </head> menggunakan kotak pencarian, kemudian enter.
6. Masukan kode di bawah ini diatas kode </head> (Tapi jika sudah ada kode ini di template anda, maka lewati langkah ini.)


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

7. Masih di tempat yang sama - Cari kode </head>
8. Masukan script dibawah ini diatas </head>

'Script'


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

9. Cari kode ]]></b:skin>
10. Masukan kode CSS dibawah ini diatas ]]></b:skin>

'CSS'


#ScrollToTop{text-align:center;z-index:9999;position:fixed;bottom:40px; right:30px;cursor:pointer;display:none;opacity:0.7;}
#ScrollToTop:hover{opacity:1;}

11. Cari kode </body>
12. Masukan kode di bawah ini di atas </body>

'Script'


<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL35wFR0HU6v3WVLdAQVuq67dNyGag_ziJxgHGFIew-FZvTgj406JwhpAubcziH0vlGZzKNJWadCGPJf5KklmB-I8O7HcksL1xJv-hnxVIypnq-cX4UMo8hU0bHepA9vKPskOlJwNhZxU/s1600/backtotop.png'/></div>

Warna ijo adalah link dari gambar tombol back to top, sebaiknya diganti / disave dan upload menggunakan tempat upload gambar masing-masing.

13. Simpan Template dan lihat hasilnya.