Search JavaScript Kit:

This free script provided by
JavaScript Kit

Cara Mudah Membuat Tombol Back to Top Tanpa Edit HTML

Berbagai pernak-pernik widget dalam mempercantik tampilan Blog tidak akan habisnya seiring dengan kreatifitas para ahli dibidangnya. Walaupun resikonya terhadap kinerja blog seperti loading menjadi berat artinya memerlukan waktu lama untuk loading saja apabila terlalu banyak memasang atau menanam script HTML dalam tubuh Blog/ website seperti kalender, jam, tag cloud, dll sepertinya tidak menyurutkan niat untuk memasangnya demi mempercantik blog.

Maka, berikut ini saya akan sedikit memberikan tutorial tentang membuat dan memasang tombol " Back to Top " itupun bagi sobat yang suka dan yang masih minim widget, silahkan ikuti langkahnya dibawah ini :

  • Login ke akun Blogger.com
  • Pilih Elemen Rancangan ( edit design )
  • Pilih Tata Letak >> Pilih Add Gadget
  • Copy dan Paste-kan kode dibawah ini :

<style type="text/css">
#scrolltotop a
{
display: block;
display: none;
z-index: 999;
opacity: .6;
position: fixed;
top: 100%;
margin-top: -20px;
left: 50%;
margin-left: -150px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
width: 68px;
line-height: 1px;
height: 15px;
padding: 10px 3px;
background-color: #000;
font-size: 12px;
font-weight: bold;
text-align: left;
color: #fff;
}
</style>
<div id="scrolltotop"><a href="#">Ke atas</a></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var scroll_timer;
var displayed = false;
var $scrolltotop = $('#scrolltotop a');
var $window = $(window);
var top = $(document.body).children(0).position().top;
$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () {
if($window.scrollTop() <= top)
{
displayed = false;
$scrolltotop.fadeOut(500);
}
else if(displayed == false)
{
displayed = true;
$scrolltotop.stop(true, true).show().click(function () { $scrolltotop.fadeOut(500);
});
}
}, 100);
});
});
</script>

Keterangan kode HTML :

  1. 68px              : Untuk lebar gadget dan bisa diganti
  2. #000          : Untuk Background gadget, dan bisa diganti
  3. #fff            : Untuk warna text, bisa di ubah sesuai selera
  4. Dan yang lainya juga sama bisa di ganti
  • Simpan Gadget
  • Selesai dan lihat hasilnya.
Cukup sekian dulu cara membuat dan memasang tombol " Back to Top " di blog  dengan mudah dan semoga menjadi bermanfaat.

1 komentar:

  1. makasih banyak buat infonya,, nice post

    http://goo.gl/3QkpC3

    ReplyDelete

No spam...