Cara Membuat Tombol Kembali ke ATAS Dengan Mudah di Blog (Button to TOP UP with jquery)

 Imajinasi | Selamat siang sobat....saya membawa oleh-oleh hasil dari jalan-jalan di Blognya Mas Jalupangna yaitu tentang Cara Membuat Tombol Kembali ke ATAS (Button to TOP UP with jquery). Simak tutorial singkat dan sederhana di bawah ini :

Tombol back to top berfungsi untuk mengembalikan posisi dari bawah kembali lagi ke atas dalam sebuah website / blog. Sehingga memudahkan pengunjung suatu website / blog untuk kembali ke atas tanpa menggunakan scroll. Saya juga menerapkannya di blog saya ini, karena simple, cantik dan keren. Lihat screen shot nya di bawah ini (ini blognya Mas Jalupangna)

Langsung saja tanpa basa basi menuju TKP :)

1. Login ke blog kamu.
2. Pilih Tata Letak > Add Gadget > HTML/JavaScript > Copy kode 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. Simpan dan lihat hasilnya.

Selamat mencoba, semoga bermanfa'at...

Sumber : Jalupangna

Baca juga :
~ Cara Membuat Tulisan Mengikuti Kursor di Blog
~ Cara Agar Gambar di Postingan Blog Tidak Bisa Dicopy
~ Cara Promosi Buat Blog Baru