Mar 17, 2011

tutorial buat back to top

Button back to top ni sangat bagus untuk para blogger sebab tak payah nak susah- susah scroll, lebih- lebih lagi kalau entry owner tu panjang sampai nak buat orang tercirit- birit menunggu! Bila dah ada gadget ni, korang tak payahlah lagi susah-susah,just klik button back to top tu, ianya akan scroll dengan sendirinya. Hebat?

Baik, macam mana nak buat?


Sila log in ke dashboard korang k. Pastu pergi ke design--> add a gadget--> javascript/html.

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Top"><img src="url gambar korang" /></a>


Copy code kat atas ni dan paste kat kotak gadget korang. Url gambar tu, korang letaklah url gambar korang nak. Boleh design sendiri dan ambil code url tu atau boleh jugak cari kat mana- mana sites yang ada cute icon.

*************************************************************************  

Yang ni pulak, nampak lebih semat dan eleganse. Woah, gittttuuuu..!! Nak tahu kenapa aku cakap macam tu? Kalau korang prasan, bila korang scroll page blog ni, akan muncul arrow back to top kan? Bila page tu still kat atas, takde pun kan? 



Akey, benda ni dah lama kot aku pakai. Tak ingat since when, kuikuikui. Sehinggalah ada satu kenalan ni tanya macam mana nak buat, baru aku share. Bwaahaha!

Benda ni senang je. Tak nak cakap banyak, korang just copy dan paste kat kotak gadget korang kat page element korang tu k.

Nak yang mana? Pilih je.. Amboi, macam pilih sayur pulak dah.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/
1.3.2/jquery.min.js" type="text/javascript">
60768/ black.js" type"text/javascript"></script&
</script> <script src="http://dl.dropbox.com/u/1
9gt;


<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script> <script src="http://dl.dropbox.com/u/1960768/blue.js" 
type"text/javascript"></script>





<script src="http://ajax.googleapis.com/ajax/libs/
jquery/1.3.2/jquery.min.js" type="text/javascript">
</script> <script src="http://dl.dropbox.com/u/1960768/pink.js"
 type"text/javascript"></script>





<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script> <script src="http://dl.dropbox.com/u/1960768/
white.js" type"text/javascript"></script>



Akey, itu aje kot. Selamat mencuba k! ^^

credit to mr.piratz

15 comments: