Cara membuat tombol kembali keatas dengan mudah di blog (back to top button with jquery)

Barusan saya dapat tutorial menarik nih bro dari blog para sahabat, ya cara membuat tombol kembali keatas atau biasa dipanggil back to top button, menariknya lagi tombol akan tampil setelah blog berada di daerah hampir bawah karena menggunakan jquery.

untuk contoh lebih nyatanya lihat di blog ini...

Langsung saja deh kita cek idot :

Langkah Pertama

Login ke blogger dulu ya

Langkah Kedua

Pilih tata letak

Langkah Ketiga

Pilih tombol tambahkan gedget

Langkah keempat

Cari HTML/Java Script kemudian tambahkan

Langakah kelimah

1. Isi nama judul terserah anda atau tidak juga gak apa apa
2. Di dalam kotak konten isi kan scrip di bawah ini

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#noop-top").fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a id='noop-top' style='display: none; position: fixed; bottom: 1px; right:1%; cursor:pointer;font:12px arial;'><span>^</span></a><style type="text/css">#noop-top span{-moz-transition:all .3s ease-in 0s;-webkit-transition:all .3s;-o-transition:all .3s;background-color:#1e5799;background:-moz-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#1e5799),color-stop(50%,#2989d8),color-stop(51%,#207cca),color-stop(100%,#7db9e8));background:-webkit-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-o-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-ms-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);border:3px solid #fff;border-radius:14px 14px 14px 14px;color:#fff;font:bold 56px cursive;height:50px;left:3px;display:block;text-align:center;text-shadow:1px 1px 0 #000;top:-56px;width:50px}#noop-top:hover span{box-shadow:0 0 49px #207cca;height:70px}#noop-top{color:#000;text-shadow:1px 1px 0 #fff;text-decoration:none}</style>

3. Kemudian save dalam gadget
4. Jangan lupa save juga ya dilaman tata letak

Oke semoga bermanfaat tutorial kali ini

Wasalam mu’alaikum wr. wb