Cara membuat tombol kembali keatas di blog - Saya lupa script ini dapet dari mana, tapi yang pasti bukan saya yang buat. Salah satu fitur di
blog yang berfungsi memudahkan
pengunjung blog kita agar lebih mudah kembali ke atas di sebuah halaman pada
blog kita, tanpa harus menggunakan scroll pada mousenya. Terlihat seperti gambar diatas, dimana fungsi tombol tersebut sangat membatu untuk
pengunjung yang ingin kembali membaca pada pada paragraf teratas. Kepingin tau cara pasang scriptnya? monggo
ikutin-tutorial berikut :
Berikut cara membuat tombol kembali keatas di blog :
- Login ke blogger sobat http://www.blogger.com
- Setelah masuk di Dashboard blogger, pilih tata letak
- Lalu pilih tambah widget/add widget, pilih JavaScript/ HTML
- Setelah keluar Popup widget baru, pastekan kode berikut didalamnya :
<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>
Bagaimana sobat, sudah pahamkan, cukup mudah koq, tinggal tambah widget -> paste -> Simpan, ga perlu repot.
Selamat mencoba semoga bermanfaat.
