CARA MEMBUAT TOMBOL KEMBALI KE ATAS HALAMAN BLOG atau yang sering di sebut juga dengan Tombol back to top tombol ini sangat lah berguna,gunanya untuk memudahkan pengunjung atau pembaca blog anda untuk kembali ke halaman atas blog anda,hanya cukup dengan klik tombol tersebut dan akan langsung menuju ke halaman atas blog mungkin langsung saja deh tidak usah berlama-lama sembari menikmati hidangan berpuka puasa,silahkan di simak saja bagaimana cara membuat Tombol back to top di blog
- Pilih Tata Letak
- Add Gadget
- HTML/JavaScript
- Copy kode di bawah:
<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>
Jika sudah silahkan anda simpan dan lihat hasilnya.
Mungkin cukup itu saja yang saya bisa tuliskan tentang CARA MEMBUAT TOMBOL KEMBALI KE ATAS HALAMAN BLOG mohon maaf jika artikel ini banyak sekali kekurangan nya.
Terimakasih dan sampai jumpa lagi di blog saya.
0 komentar:
Post a Comment