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

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


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 karena simple, cantik dan keren. Lihat screen shot nya di bawah ini:


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.

Semoga bermanfa'at......

kometarnya ditinggalkan iya......hehe

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot Ebook Dan Game Dll

Christian angkouw Sobat sedang membaca artikel tentang Cara membuat tombol kembali keatas dengan mudah di blog (button to top up with jquery). Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

:: Get this widget ! ::

No comments:

Post a Comment