Memasang Back To Top Button Pada Blog

Memasang Back To Top Button Pada Blog

Memasang back to top button sangat penting agar memudahkan pengunjung, bila sebelumnya Saya share tentang Membuat Back To Top Unik Dengan Cacing. Kali ini saya share back to top button sederhana. Pada versi ada agak sedikit berbeda, yaitu ada penambahan efek smoothing.

Cara Memasang Back To Top

1. Template Anda harus sudah terpasang jQuery Libary, jika belum pasang jQuery ini diatas kode </head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
2. Simpan kode ini diatas kode ]]></b:skin> atau </style>

/*Back To Top*/
#top{background-color:#444;margin:0;padding:10px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;position:fixed;bottom:10px;right:10px;cursor:pointer;display:none;}
#top:hover{background-color:#E73138}
3. Kemudian simpan kode ini diatas kode </body>

<a href='#' id='top'><img alt='Back To Top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMzKb9dvv6Pnp7TV39mMbR3MmyDnX49ULqCwFD6b08oLfZ2Is30_LWWJRNwCAj1CAAwUH8MdYBXwhfundPHqESeaEZ2TvmAac55szK4K7VwaGD4A-wF1Ry_dwReeIaVltGVG8uBCdO331f/s1600/btp.png'/></a>
<script type='text/javascript'>
//<![CDATA[
//Scroll Top
(function(a){a(window).scroll(function(){if(a(this).scrollTop()>280){a("#top").removeAttr("href");a("#top").fadeIn()}else{a("#top").fadeOut()}});a(function(){a("#top").click(function(){a("html, body").animate({scrollTop:0},"slow");return false})})})(jQuery);
//]]>
</script>

Artikel Terkait

Komentar

Unknown
oke mantap gan.....
ijin copas yah
Unknown
Guud bro :D ane pakai ya ;) oh iya, kan kalo sebelum di klik warna merah tuh, diganti kodenya yang mana ya buat ganti warna ?thx

Silakan berkomentar sesuai dengan topik. Jangan menyisipkan link pada komentar dan jangan sampai komentar Anda masuk komentar SPAM.

Jangan salahkan Saya bila komentar Anda dihapus !

Batal