-->
» » » Membuat Tombol Back To Top Dengan JQuery

Membuat Tombol Back To Top Dengan JQuery

on


Cara Membuat Tombol Back To Top Dengan JQuery
Cara Membuat Tombol Back To Top Dengan JQuery - Hai sahabat blogger yang budiman, yang tidak budiman tidak hai.. hehe,, becanda sob. Oke baiklah pada postingan sebelumnya bang dadan telah membuat artikel tentang Cara Posting Artikel Power Point di Blog. Nah, untuk kesempatan kali ini bang dadan akan membuat artikel tentang Cara Membuat Tombol Back To Top Dengan JQuery. Mungkin sahabat blogger semua sudah pada tahu dengan fungsi daripada tombol back to top ini. untuk yang belu tahu bang dadan akan coba sampaikan sedikit penjelasan fungsi daripada tombol back to top ini.

Menurut bang dadan senidiri memaknai fungsi daripada tombol back to top ini ialah sebagai alat untuk mempermudah para pengunjung kembali pada halaman atas blog kita. misalkan ketika kita mempunyai sebuah artikel yang pangjang banget, kira-kira mencapai 500M kebawah.. hehe becanda sob. misalkan artikel sobat ada yang banyak kata-katanya sehingga menjadi panjang kebawah, nah mungkin bagi pengunjung yang ingin kembali ke halaman atas blog akan terasa malas bila harus memutarkan scroll kursornya, apalagi yang menggunakan Laptop atau Notebook, iya kan. jadi ribet gitu kalau pengen ke atas.

Maka dari itu, alangkah baiknya sobat bisa menggunakan Tombol Back to Top ini untuk memudahkan para pengunjung ketika sedang berada di blog kita. oh iya kalau sobat ingin melihat DEMO-nya silahkan perhatikan pada kanan bawah blog ini. amaka ada tombol itu yang berwarna hitam.

Oke langsung saja ya, jika sobat ingin menerapkan Tombol Back to Top ini di blognya, silahkan ikuti panduan berikut ini:
  • Pertama seperti biasa Login pada akun Blognya masing-masing jangan ke akun blog orang lain ya.. ヅ ヅ 
  • Selanjutnya menuju Dasbor/Rancangan
  • Pilih Tata Letak dan klik tambahkan Gadget HTML/Javascript
  • Setelah itu silahkan sobat copy koe dibawah ini pada HTML/Javascript
Membuat Tombol Back To Top Dengan JQuery
✥ Berikut kodenya :

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

  • Selesai deh...!!

Simpel - simpelkan tutorial yang ada diblog ini..  ヅ  ヅ 
Mungkin cukup sekian pembahasan kita kali ini tentang Cara Membuat Tombol Back To Top Dengan JQuery di Blog. Semoga artikel ini bermanfaat. Selamat mencoba dan tetap semangat sob..!!!
Labels: blogger tutorial, Widget

Thanks for reading Membuat Tombol Back To Top Dengan JQuery. Please share...!

0 Komentar untuk "Membuat Tombol Back To Top Dengan JQuery"

Back To Top