Followers

Dapatkan Nisvia Pada RM35


Satu-satunya alternatif kepada penghidap diebetis dan mereka yang mementingkan kesihatan.


Untuk Maklumat Lanjut KLIK DI SINI
Sebarang Pertanyaan, Sila Emel Ke:
real_4gamerz@yahoo.com

Saturday, November 20, 2010

Buat Button Kembali Ke Atas ( Back to Top)

Ni satu lagi kemudahan yang akan memudahkan pengunjung blog anda nk main-main dalam blog anda. Benda ni lagi berpekdah diletak terutamanya pada blogger2 yang selalu duk karang panjang2 entry dorang. Hahaha..


Jeng.. Jeng.. Jeng... Memperkenalkan.. 




Back to top button. Hanya perlu klik button tersebut, dan page akan scroll secara automatik ke atas.

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

Langkah 1

Log in blog => Dashboard => Design => Add A Gadget=>HTML/Javascript=>

Langkah 2

Salin kod di bawah dan paste pada ruang content HTML/Javascript (rujuk langkah 1) dan Save.



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

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;

Akhir sekali, klik Preview. Jika tiada mesej Error terpapar, klik saja Save.

3 comments:

Nuff4u said...

singgah pagi..ye...tuliskan penulisan mu

zmah said...

Dah baca beberapa kali mengenai artikel ini tapi masih belum tergerak hati nak buat dalam blog.

Penggoreng said...

zmah: sebenarnya bukan menyusahkan pun kak benda ni. lgpun die duk kecik je kt ujung blog hee

Nuff4u: orait beb