Cara Membuat Tombol Back To Top di Blog

mohhammadnoer.com - Ada beberapa alasan sehingga banyak Blogger memasang tombol back to top ini ke blog mereka. Yah untuk mempermudah pengunjung blog dan mempercantik tampilan blog mereka.

Kenapa tombol ini dapat mempermudah pengunjung blog? Ketika blog memposting artikel yang panjang, tombol ini dapat membantu pengunjung untuk mempermudah kembali ke halaman atas pada awal artilel tanpa perlu menggeser scroll ke atas.

Ok, berikut ini adalah cara membuat dan memasangnya ke dalam Blog anda.

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

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

<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh8tryVazk1lPSFmuhe7-GZ-vqlLVtNyf4IzdUq4oelA-h6RGuGWaT1gnn83PlSd_IDrZSzVBneeqAcpLvymE1kxyJkk0vc16uVfo_LGN2MA5X-RY9ExFCs38cFqb2MQGkFOH5EL1V6wQ/s1600/backtotop.png'/></div>

13. Save Template dan lihat hasilnya.

Berbagi :