Wednesday, January 13, 2010

Smooth Scrolling Page

Postingan kali ini mungkin bagi para master sudah kadaluarsa tetapi bagi yang masih pemula semoga bisa membantu. Anda mungkin ingin ketika kita melihat sebuah blog apalagi yang isi blognya sampai panjang bisa menuju ke paling bawah dari blog itu (bisa discroll) secara perlahan lalu kembali lagi keatas , nah kali ini saya ingin berbagi trik bagai mana membuat smooth scrooling page. Ga usah panjang lebar lagi langsung ajah ya, ikuti triknya berikut ini :
  • Masuk ke Tata Letak/Edit Html.
  • Backup terlebih dahulu template anda.
  • Cari </body> Lalu letakkan Script di bawah ini tepat dibawahnya.
    <div id="staticbuttons" style="position:absolute;"> <a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0"><img src="http://www.sigmirror.com/files/51707_ytmap/up.png" border="0"></a><br> <a href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0"><img src="http://www.sigmirror.com/files/51708_mtjpd/down.png" border="0"></a> </div> <script> var Hoffset=70 var Voffset=80 var thespeed=3 var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1 var myspeed=0 var ieHoffset_extra=document.all? 15 : 0 var cross_obj=document.all? document.all.staticbuttons : document.getElementById? document.getElementById("staticbuttons") : document.staticbuttons function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function positionit(){ var dsocleft=document.all? iecompattest().scrollLeft : pageXOffset var dsoctop=document.all? iecompattest().scrollTop : pageYOffset var window_width=ieNOTopera? iecompattest().clientWidth+ieHoffset_extra : window.innerWidth+ieHoffset_extra var window_height=ieNOTopera? iecompattest().clientHeight : window.innerHeight if (document.all||document.getElementById){ cross_obj.style.left=parseInt(dsocleft)+parseInt(window_width)-Hoffset+"px" cross_obj.style.top=dsoctop+parseInt(window_height)-Voffset+"px" } else if (document.layers){ cross_obj.left=dsocleft+window_width-Hoffset cross_obj.top=dsoctop+window_height-Voffset } } function scrollwindow(){ window.scrollBy(0,myspeed) } function initializeIT(){ positionit() if (myspeed!=0){ scrollwindow() } } if (document.all||document.getElementById||document.layers) setInterval("initializeIT()",20) </script>
  • Ganti tulisan yang berwarna merah dengan gambar anda sendiri. Tulisan yang berwarna hijau untuk menyesuaikan secara horizontal. Tulisan yang berwarna biru untuk menyesuaikan secara horizontal. Tulisan yang berwarna orange kecepatan scrollnya (semakin besar nilainya semakin cepat).
  • Simpan Template anda, lalu saksikan apa yang terjadi.
nah semoga bermanfaat ya.. selamat mencoba..

0 komentar:

Post a Comment

saran, komentar dan kritikan anda sangat berharga buat saya, terima kasih.