cara menembahkan Smooth Scroll

 

Apa kabar semua.... Sehat semua ya!! Ijinkan pada kesempatan kali ini saya ingin membagi sedikit trik yang saya punya ini.... Mungkin sudah banyak yang tahu cara membuat Smooth Scrolling Page.... Apa tuh?? (>yang belum tahu<).....

Smooth Scrolling Page adalah salah satu tools blog yang berfungsi sama dengan back to top dan back to bottom, tools tersebut bermanfaat untuk mempercantik blog dan membuat kenyamanan kepada pengunjung. Biar jelasnya lihat pojok kiri BOOK ONLINE...

Perbedaan dari Smooth Scrolling Page dengan back to top dan back to bottom adalah scrolingnya artinya Smooth Scrolling Page kembali ke atas atau kebawah dengan perlahan-lahan tidak dengan back to top dan back to bottom kembali dengan cepat.

Trik ini saya dapatkan dari blog OKETRIK yang dia dapat dari dkwny2031. Dalam pemasanggannya sangat mudah dan simple, hanya memasukan kodenya kedalam tag penutup body. Bila anda  menginginkanya?? Langsung ikuti saja langkah-langkah di bawah ini :

1. Masuk ke account blogger anda
2. Terus menuju Tata letak ==>> Edit HTML
3. Jangan lupa centang Expand Template Widget.
4. Cari kode </body>  lalu taruh kode di bawah ini tepat di bawahnya :
<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> //Page Scroller (aka custom scrollbar)- By Dynamic Drive //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com //This credit MUST stay intact for use var Hoffset=90 //Enter buttons' offset from right edge of window (adjust depending on images width) var Voffset=100 //Enter buttons' offset from bottom edge of window (adjust depending on images height) var thespeed=20 //Enter scroll speed in integer (Advised: 1-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> Penjelasan :
• Hoffset=90 adalah untuk menentukan penempatan gambar secara Horizontal, makin kecil ukurannya makin ke kanan
• Voffset=100 adalah untuk menentukan penempatan gambar secara Vertical, makin kecil ukurannya makin ke bawah
• thespeed=20 adalah untuk menentukan kecepatan Scrooling (bergerak), makin besar makin kencang
5. Apabila kode diatas tidak berfungsi atau bermasalah, anda harus meng-Encode terlebih dahulu untuk di pasang di bawah tag </body> 
6. Lihat dengan pratinjau dulu... Kalau sudah sip... 
7. Langsung simpan..... 

http://www.zimbio.com/member/atanbungas/articles/R0oUOLQQQK9/CARA+MEMBUAT+SMOOTH+SCROLLING+PAGE

 

Read More