Totalitas Tanpa Batas !!: button to top up

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

clean-5

clean-5

clean-5

Culture

clean-5

button to top up

Social

Find us

Popular Posts

About Me

39 Kata Kata Mutiara Bahasa Inggris dan Artinya

Kata Kata Bijak Menyetuh Hati

Tutorial Cara Memisahkan Isi Gambar GIF satu persatu Perframe Dengan Photoscape

Pengertian Coding, Indexing, Assembling dan Filling

Siswi SMP di Jakarta Pemeran Video Mesum

Game PES All Version

Cara Membuat Efek Light Brush Dengan Photoshop CS6

Cara Menghilangkan Tanggal, Halaman di dokumen Powerpoint

Cara Membuat Efek 3D di photoshop

Cara Mudah dan Cepat Download Video di youtube lewat HP