Cara Membuat Tombol Back to Top Pada Blog

Tombol “Back to Top” merupakan tombol dengan fungsi yang menarik pada blog, ini memudahkan pembaca untuk kembali ke atas halaman tanpa b...

Tombol “Back to Top” merupakan tombol dengan fungsi yang menarik pada blog, ini memudahkan pembaca untuk kembali ke atas halaman tanpa bersusah payah menggeser scroll di samping kanan. Dan hampir semua blog dan web memasang tombol seperti ini, Anda mungkin sudah melihat tombol seperti ini di berbagai situs.

Anda juga bisa mencari tutorial tentang cara pembuatan tombol “Back to Top” di blog lain. Tetapi, kebanyakan dari mereka menggunakan kode HTML yang bisa langsung di pasang di “Add Gadget” atau pada widget blog. Tetapi sayangnya, tidak semua template blog support atau mendukung dengan cara seperti itu. Maksud saya, ada beberapa versi template yang tidak cocok untuk penggunaan kode HTML sesuai dengan beberapa tutorial pembuatan tombol “Back to Top” di blog lain. 

Nah, di sini saya juga ingin berbagi tentang tutorial untuk membuat tombol “Back to Top”, dan saya pikir tutorial ini sesuai atau cocok digunakan pada semua versi template blog :

1. Masuk ke akun blogger Anda, lalu masuk ke Dashboard

2. Klik “Template” lalu klik “Edit HTML”

3. Pertama, cari kode </head> (Gunakan CTRL + F untuk memudahkan pencarian)

4. Letakkan kode script di bawah ini, tepat di atas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/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>

Catatan :
Angka warna merah menunjukkan jarak tombol “Back to Top” muncul dan bersembunyi, Anda bisa menggantinya.
Angka warna biru menunjukkan kecepatan saat mengarak ke atas, Anda juga bisa menggantinya.

5. Kemudian cari kode ]]></b:skin>

6. Letakkan kode CSS di bawah ini, tepat di atas kode ]]></b:skin>

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

7. Kemudian cari kode </body>

8. Letakkan kode di bawah ini, tepat di atas kode </body>

<div id='ScrollToTop'><img alt='Back to top' src='http://4.bp.blogspot.com/-Izmqq2QVcY8/UmMQyNKbhYI/AAAAAAAABcI/a28qtFC2uto/s1600/backtotop.png'/></div>

Catatan :
Kode warna orange menunjukkan link yang menjadi gambar tombol “Back to Top”, Anda bisa mengganti link tersebut. Anda juga bisa mencari gambar-gambar yang menarik di internet.

9. Langkah terakhir adalah “Simpan Template”