Click Here

Labels

Cara Membuat Page Scroller ( Custom ScrollBar )

Oke...Lama juga ga posting nich...iseng-iseng dech coba posting yang satu ini...
Awalnya mondar-mandir cari-cari artikel, pas ketemu trik ini...kayaknya boleh juga nich buat ngehias blog, trik ini saya dapatkan di Dynamic Drive, namun saya otak-atik sedikit untuk menyesuaikan dengan format pada Blogger, karena trik ini spesialnya ditujukan buat para penggila web.

Tujuan postingan kali ini agar bisa menjadi alternatif dalam arti kata biar bisa membantu para pengunjung blog agar tidak lelah mengunjungi blog kita, apalagi ketika membuka halaman blog yang panjangnya minta ampun sampe puluhan hingga ratusan artikel, sehingga membuat lelah pengunjung blog untuk men-scroll halaman blog kita. ini cuma alternatif looohhh....

Lanjuuutttt...
Nah postingan kali ini mengangkat tentang Cara Membuat Auto Page Scroller di Blog kita. Untuk contohnya anda bisa mengarahkan cursor anda ke gambar seperti tanda panah ke atas dan kebawah di pojok kanan bawah pada halaman blog ini.


Naaahhh...sudah dicoba...???
Jika anda tertarik untuk menggunakannya, anda bisa mencoba cara-caranya dibawah ini :
  • Pertama-tama Login dulu ke Blogger
  • Masuk ke Layout/Tata Letak
  • Terus menuju ke Edit HTML
  • Jangan lupa download dulu templatenya, agar jika terjadi kesalahan bisa diperbaiki.
  • Nah...sekarang cari code </body> , biasanya letaknya paling bawah.
  • Copy code ini sebelum code </body> 

<div id="staticbuttons" style="position:absolute;">
<a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0"><img src="http://2.bp.blogspot.com/_UFijQOegmAQ/S0dcyk7e7II/AAAAAAAAAGY/YuBzUd_sJR0/s320/BUTTONUP.png" border="0"/></a><br/>
<a href="javascript:" onmouseover="myspeed=thespeed"
onmouseout="myspeed=0"><img src="http://2.bp.blogspot.com/_UFijQOegmAQ/S0dc2UprHUI/AAAAAAAAAGg/3udrqU1oQ5g/s320/BUTTONDOWN.png" border="0"/></a>
</div>
<script>
var Hoffset=70
var Voffset=80
var thespeed=3
ieNOTopera=document.all&amp;&amp;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 &amp;&amp;
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 berwarna merah dengan link gambar anda
  • Sesuaikan Angka berwarna biru(kecepatan scroll) dengan selera anda
  • Simpan dech....
  • Coba lihat hasilnya...

Image link :
UP :
http://2.bp.blogspot.com/_UFijQOegmAQ/S0dcyk7e7II/AAAAAAAAAGY/YuBzUd_sJR0/s320/BUTTONUP.png
DOWN :
http://2.bp.blogspot.com/_UFijQOegmAQ/S0dc2UprHUI/AAAAAAAAAGg/3udrqU1oQ5g/s320/BUTTONDOWN.png
    SELAMAT MENCOBA
    SEMOGA BERMANFAAT
    TERIMA KASIH

    (sumber : www.dynamicdrive.com )
    Harga Notebook Acer Aspire S3 Ultrabook

    Sudah 18 Orang Berkomentar, Silakan anda yang selanjutnya :

    Komentar dari Rizky2009 :

    pertamax wah sangat keren.... langsung rizky coba

    Komentar dari Rizky2009 :

    sob kok g kelihatan hasilnya, coba deh lihat blog aq

    Komentar dari Rizky2009 :

    mungkin template q yang g cocok

    Komentar dari G E O R G E O U Z :

    @Rizky2009 : Sorry sob...kemaren lupa ganti konsep link gambarnya...nah...skrg udah di tampilkan tuch...sok silakan di garap....
    Thanx sudah mencobanya....

    Komentar dari Rizky2009 :

    ok sob terima kasih dah berhasil

    Komentar dari anak nelayan :

    ikutan masang ahh hehehe makasih friends

    Komentar dari ahhi82 :

    Thanks sob infona, langsung ane praktekin deh ...

    Komentar dari G E O R G E O U Z :

    Thanx Sobat2 semuanya atas commentnya..
    Thanx juga buat partisipasi untuk mencobanya...
    Moga2 bisa selalu bermanfaat...
    Thanx for all...

    Komentar dari mastergomaster :

    nice posting....tutorialnya mantaab man, tak coba ya

    Komentar dari aan :

    perlu dicoba,,

    slm kenal sob,kunjungan balik nih...
    thanks,

    Komentar dari BimaSakti85 :

    tukeran link sob...
    link sobat sudah saya pasang di blog saya.. thx :D

    Komentar dari mastergomaster :

    teruskan dengan spirit baru...bagus nih ilmunya biar sahabat blogger kita bisa memilih apa yang dia perlukan !

    Komentar dari G E O R G E O U Z :

    Thanx sobat....silahkan dicoba...semua memang dihadirkan untuk sharing saja...semoga bermanfaat...

    Komentar dari Arief :

    wah, G E O R G E O U Z master komeng nich... :-*
    slain itu isi postingannya sangat bermutu... :-*
    ai lop yu G E O R G E O U Z... much3... hohoho :o :D

    MASQULIN.BLOGSPOT.COM

    Komentar dari Iqbal :

    Keren2 bisa dicoba nih, keep posting sob [Tutorial Blogger]

    Komentar dari G E O R G E O U Z :

    @ Arief : wheeee....kl master komeng...ntar uhhuuuyyy dong...thanx ya sob atas supportnya...sama2 belajar sob...tp kl much3-nya...jangan dong...ntar jeruk mamam jeruk tuch....heheheheheeeeee....
    @ Iqbal : thanx banget sob supportnya....

    Komentar dari Bang Jasmin :

    TARARENKYU.....

    Komentar dari Kurnia Septa :

    makasih bung

    Silakan Tulis Komentar Anda di Bawah ini :

    Silahkan tulis komentar anda dibawah ini, namun diharapkan jangan melakukan spamming,hindari komentar yang mengandung unsur SARA, berkata kasar serta hal2 negatif lainnya, Terima Kasih, Semoga bermanfaat