JeritanBlog telah ditukar nama BelajarBlogs...
Home » » Button back to top (versi 3)

Button back to top (versi 3)



Back to top button versi 3 seperti gambar diatas.Apabila anda klik padanya dan page akan scroll secara automatik ke atas.

Untuk memasang button back to top ini, sila ikut beberapa langkah yang mudah dibawah ini.

Langkah 1
Copy 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="#">Scroll to top</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>
Info Penting:

1.Warna button boleh di edit dengan menukar kod warna bagi background-color: #000;

2.Kedudukan boleh di edit dengan mengubah nilai margin-left: -150px;


Langkah 2

Cara Pemasangan.
1. Login ke Blogger, Klik Design :
2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;

3. Pilih HTML/Javascript;
4. Copy paste code HTML diatas ke dalam Content yang telah tersedia;

Semoga Berjaya :)

0 comments:

Blogger Tricks And TipsComment here