Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Kamis, 14 Januari 2010

Memasang Smooth Scrolling Page

Kategori :
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.

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 tidak dengan back to top dan back to bottom kembali dengan cepat.

Trik ini saya dapatkan dari blog dkwny2031 yang dia dapat dari Dynamic Drive. dalam pemasanggannya sangat mudah dan simple, hanya memasukan kodenya kedalam tag penutup body. Sobat ingin tools ini?? ikuti saja langkah-langkah di bawah ini :
  1. Masuk ke blogger
  2. Mari kita menuju Tata letak ==>> Edit HTML
  3. Jangan lupa Backup Template sobat agar tidak terjadi hal yang tidak di inginkan
  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=70 adalah untuk menentukan penempatan gambar secara Horizontal, makin kecil ukurannya makin ke kanan
    • Voffset=80 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, sobat harus meng-Encode terlebih dahulu untuk di pasang di bawah tag </body>
  6. Simpan dech dan lihat hasilnya
Mudah bukan Memasang Smooth Scrolling Page di blog?? dan gimana hasilnya berhasil?? Bagaimana trik blog yang ini?? Tinggalkan pesan y untuk artikel ini.
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

33 Komentar untuk Memasang Smooth Scrolling Page

Assalamualaikum. Bisa lihat contohnya ga? :-/

wa'alaikumsalam, contohnya di pojok kanan blog saya mas yang berbentuk panah...

tapi yg lembut pasti tambah berat :)

wah mantap juga artikelnya nie...

tanda scrollingnya juga keren..

mantaf sob, nice artikel...

salam kenal.

@mas doyok

tapi tidak mempengaruhi juga mas, ini kan cuma buat page scrolling doank...

Blognya keren bro, keep posting yaa
www.sampara.com

mantap. banyak juga ya tip n trik untuk mempercantik blog.:D

wah artikelnya bagus,,, patut di coba nih...

ternyata suka maen kesana juga yah, dynamicdrive...wekekekkkk :D

iya nie kang Beben, biar tambah pinter :D
makasih kang Beben sudah berkomentar....

oh iyah satu lagih...
jgn di dekodein, coba taruh ini sebelum
<script>

//<![CDATA[

ISI SCRIPT

//]]>

</script>
semoga berfungsi ;)
sama-sama Juan :X :D
kalo butuh2 tools/aplikasi http://ben-tools.blogspot.com/ ekekekekkk

kunjungan lagi sob..
mencari inspirasi blog..

bagus ni tutorialnya, tapi belum mau pake...

Wah mantap nih sob , postingannya , akan aku coba ah , terima kasih

makin canggih saja sekarang tips2nya , lanjutkan!!

terima kasih semuanya telah berkomentar.... :X

yg mana yah demo nya?

demonya di blog saya yang letaknya di kanan bawah blog saya....

Makasih infonya ya sob...Tapi bikin loading blog lambat ga??

g terlalu sob, yang jelas g bikin berat dech....

Ga bisa di pasang gan !!!

@Jajang ==>> masa sich sob?? pasti bisa qo coba di coba lagi klo g bisa juga bisa tanya gw lewat YM....

Sebelumnya saya minta maaf, tapi alangkah baiknya jika aku bertanya. . . bagaimana caranya sich bikin blogumus yang bisa muter muter itu. . .?

@Wong tanjung pura ==>> maksudnya yang mana y?? Blogumu?? mungkin label y yang letaknya di atas buku tamu, kalau memang benar saya akan share kawan.

Iya tepatnya di atas buku tamu, memang saya dari dulu kepengen bikin, tapi sampai sekarang yach... gitu dech gak bisa.
memang sudah banyak tutorial tip & trik yang sudah aku coba, tapi hasilnya NOL.
tapi setelah aku baca dan mempraktekan tutorial anda, emang hasilnya jempolan
Terimakasih

saya udah cba di blog sya, tp kok g bsa y?? bsa bantu g mslahnya dmn??
krn aq bru bgt ngebuat blog

@akane => ada permasalahan dimana sob? sudah mengikuti caranya dengan benar?? oiya untuk meng encode kode di atas sobat bisa mengunjungi ini http://centricle.com/tools/html-entities/ lalu klik encode, setelah itu masukan kode yang telah di encode di bawah body yg paling bawah/kedua. Terima Kasih ^_^

tks infonya.., perlu dicoba nich..!

maksudnya encode tu gimana yah ?
mohon bantuan !

@Wildan Amstrong => maksud dari encode itu sama dengan merubah kode-kode html agar dapat di tampilkan apabila kode html asli tidak dapat di tampilkan

Mungkin ada baiknya jika di kasih demo-nya...
thanks...