Tutorial: Buat Button Back To Top

WRITTEN BY : Arep Skema TIME : 9:23 PM TOTAL COMMENTS : 2

Okay,, rasa tak best sebab dah tak banyak buat tutorial, so sekarang tengah nak berjinak jinak balik lah nak buat tutorial untuk blogger ni.kan. Tutorial ni tak ada direquest oleh siapa siapa, aku je yang nak buat,untuk korang semua jugak(bagi yang belum tahu)
Untuk tutorial yang ni, saya nak ajar pasal buat button back to top. Yayaa, saya tahu dah ramai bloggers yang tahu nak buat benda alah ni. *lantak lah kan,blog aku* . Sebelum ni saya ada pakai button back to top yang biasa,kalau klik button tu,dia terus auto naik ke atas, tapi yang ni versi Jquery, yang ni kalau kita klik,dia akan naik secara smooth. Cantik jee.. Kalau nak tengok demo, tekan jelah button back to top kat blog saya ni. 

Okay lets start!


1. Pergi 'Dashboard'
2. Buka ruangan 'Template
-Lagi baik 'Backup Template' blog kauorang dulu. Kalau tak tahu caranya. Tengok Tutorial : Cara Backup/Restore Template Blog
3. Klik 'Edit HTML'
4. Tekan Ctrl+F  dekat keyboard kauorang [serentak]

5. Cari kod dekat bawah ni :

</head>
6. Salin / Copy kod dekat bawah ni, lepas tu paste kod tu dekat atas atau sebelum kod </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
//]]>
</script>
<!-- end scrolltop -->


7. Lepas tu, cari kod ni pulak
<body>
8. Padam kod <body> tu, lepas tu gantikan dengan kod ni 
<body id='top'>
9. Lepas tu, cari kod ni pulak
</body> 
10. Salin / Copy kod dekat bawah ni, then paste kan dekat atas atau sebelum kod </body>

<div id='goingtop'>
<a href='#top' title='Top'><img src='http://i627.photobucket.com/albums/tt351/testemplates/goto_top.gif' style='right:40px; bottom:30px; width:49px; height:49px; position: fixed;'/></a></div> 

PENGUBAHSUAIAN :
-Korang boleh tukar 'http://i627.photobucket.com/albums/tt351/testemplates/goto_top.gif' dengan URL gambar yang korang suka.
-Tukar Width:49 untuk lebar gambar tu. Tukar Height:49 untuk tinggi gambar tu.
-Tukar 40 dan 30 tu untuk posisi gambar korang tu.
-Boleh dapatkan icon arrow (anak panah) dekat sini - http://www.iconfinder.com/


11. Paste kan kod yang kauorang copy tadi dekat atas atau sebelum kod </head>
12. Klik 'Preview Template'
13. Kalau tiada error, klik 'Save'

Sila bagitahu kalau menjadi dan bagitahu juga kalau tak menjadi. ;)



Related Posts Plugin for WordPress, Blogger...

2 comments:

  1. xpena buat button bck to top.mls nk usik edit html tu..hehe

    ReplyDelete
  2. @mia.lia
    alah,,bukan nye susa n akan rosak kod kod tu,, kalau ikut stepbystep InsyaAllah akan jadi,, :)

    ReplyDelete

Dah baca kan? Komen lah sikit. Sikit pun jadilah.
Fikir sebelum menaip. ;)