Ad Code

Ticker

6/recent/ticker-posts

Cara membuat tombol kembali keatas di blog

Cara membuat tombol kembali keatas di blog

Teknisi-Dadakan.com - 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 :

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

  • Lalu klik save/simpan

Nah, teman-teman, sudah sedikit pahamkan, cukup mudah bukan, tinggal kita tambah widget -> lalu paste -> Save/Simpan, jadi tidak perlu repot.

Selamat mencoba,
semoga bermanfaat.
Salam-satu aliran.
Teknisi-Dadakan.

Posting Komentar

0 Komentar