Javascript Auto Page Scroller

Seperti halnya scroll to top controll, page scroller juga berfungsi sebagai penggulung halaman web/blog. Kalau scroll to top controll hanya berfungsi menggulung halaman ke bagian atas, page scroller berguna untuk menggulung halaman ke atas dan ke bawah, sehinngga contoll auto scroll juga menggunakan 2 buah image yang disusun secara berurutan. Untuk menggulung halaman ke atas atau ke bawah dilakukan dengan cara meletakkan cursor di atas auto scroll controll.

Untuk menggunakan auto page scroller anda harus menambah xHTML dan javascript di atas tag penutup body (</body>).

D E M O

xHTML :

<div id="staticbuttons" style="position:absolute;">
<a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0" style="width:40px;height:40px;padding:80px 0 0 0;"><img src="https://lh5.googleusercontent.com/-f6o-2nvzN_s/T2h9Gz6J9qI/AAAAAAAAAc8/qSYxVe863rg/h120/green-circle-arrow-up-40x40.png.png" style="border:0 solid;padding:0;margin:0;box-shadow:0 0 0 #fff;"></a>
<a href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0" style="width:40px;height:40px;padding:0 0 40px 0;"><img src="https://lh4.googleusercontent.com/-iOtX-VEfSPU/T2h9HeSOUoI/AAAAAAAAAdA/KzaDBjZxbZM/h120/green-circle-arrow-down-40x40.png" style="border:0 solid;padding:0;margin:0;box-shadow:0 0 0 #fff;"></a>
</div>

Javascript :

<script type="text/javascript">
//<![CDATA[
var Hoffset = 70
var Voffset = 80
var thespeed = 20
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>

Cara membuat Auto Page Scroller :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode </body> pada "Box Edit Template".
6. Copy xHTML dan javascript dan letakkan di atas </body> secara berurutan.
7. Klik "Simpan Template (Save Template)".
8. Buka Blog dan lihat Auto Page scroller anda di pojok kanan-bawah halaman.

Catatan/Keterangan :

1. Image yang digunakan sebagai controll berukuran 40 x 40 pixel. Untuk mengganti image controll lakukan perubahan pada xHTML.
2. Bagi yang membutuhkan panduan untuk backup/restore template, cara cari kode dan berbagai cara menyimpan kode di template, silahkan buka Special Tutorials di menu sebelah kiri.
3. Jika anda ingin menggunakan javascript yang sudah berupa link dan terupload di google code, gunakan kode berikut :
   

   xHTML & Javascript Auto Page Scroller :

   <div id="staticbuttons" style="position:absolute;">
   <a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0" style="width:40px;height:40px;padding:80px 0 0 0;"><img src="https://lh5.googleusercontent.com/-f6o-2nvzN_s/T2h9Gz6J9qI/AAAAAAAAAc8/qSYxVe863rg/h120/green-circle-arrow-up-40x40.png.png" style="border:0 solid;padding:0;margin:0;box-shadow:0 0 0 #fff;"></a>
   <a href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0" style="width:40px;height:40px;padding:0 0 40px 0;"><img src="https://lh4.googleusercontent.com/-iOtX-VEfSPU/T2h9HeSOUoI/AAAAAAAAAdA/KzaDBjZxbZM/h120/green-circle-arrow-down-40x40.png" style="border:0 solid;padding:0;margin:0;box-shadow:0 0 0 #fff;"></a>
   </div>
   <script src="http://gubhugreyotprojects.googlecode.com/svn/tools/GRautopagescroller.js" type="text/javascript"></script>

4. Bagi yang tertarik menggunakan jQuery - css3 Scroll to top controll, sebuah scroll to top controll yang dibuat menggunakan jQuery dan beberapa efek css3, anda dapat membuka panduan cara membuatnya di sini

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Rebo   WAGE,Maret,20,2012

» Happy Blogging - gubhugreyot «