Rabu, 09 September 2009

Cara Membuat Back to Top Melayang

. Rabu, 09 September 2009

Yah lama tak posting gara-gara pulsa IM2 habis, payah juga ah. Ini adalah postingan yang di request oleh Mas Qucluk, yaitu Cara Membuat Back to Top Melayang. Caranya mudah kok Mas Qucluk tinggal kita menambah di Widget blog kita tanpa harus mengutak-atik di dalam Edit HTML. Berikut adalah caranya :
  1. Login ke Blogger

  2. Masuk Tata Letak --> Tambah Widget --> HTML/Javascript

  3. Masukkan kode di bawah ini ke dalam HTML/Javascript

    <script type="text/JavaScript">
    var topMargin = 300
    var slideTime = 1200
    var ns6 = (!document.all && document.getElementById);
    var ie4 = (document.all);
    var ns4 = (document.layers);
    window.setInterval("main()", 10)

    function floatObject() {
    if (ns4 || ns6) {
    findHt = window.innerHeight;
    } else if(ie4) {
    findHt = document.body.clientHeight;
    }
    }

    function main() {
    if (ns4) {
    this.currentY = document.floatLayer.top;
    this.scrollTop = window.pageYOffset;
    mainTrigger();
    } else if(ns6) {
    this.currentY = parseInt(document.getElementById('floatLayer').style.top);
    this.scrollTop = scrollY;
    mainTrigger();
    } else if(ie4) {
    this.currentY = floatLayer.style.pixelTop;
    this.scrollTop = document.body.scrollTop;
    mainTrigger();
    }

    }
    function mainTrigger() {
    var newTargetY = this.scrollTop + this.topMargin
    if ( this.currentY != newTargetY ) {
    if ( newTargetY != this.targetY ) {
    this.targetY = newTargetY
    floatStart();
    }
    animator();
    }


    }
    function floatStart() {
    var now = new Date()
    this.A = this.targetY - this.currentY
    this.B = Math.PI / ( 2 * this.slideTime )
    this.C = now.getTime()
    if (Math.abs(this.A) > this.findHt) {
    this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt
    this.A = this.A > 0 ? this.findHt : -this.findHt
    } else {
    this.D = this.currentY
    }
    }
    function animator() {
    var now = new Date()
    var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D
    newY = Math.round(newY)
    if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
    if ( ie4 )floatLayer.style.pixelTop = newY
    if ( ns4 )document.floatLayer.top = newY
    if ( ns6 )document.getElementById('floatLayer').style.top = newY + "px"
    }
    }
    //-->
    </script>
    <div id="floatLayer" style="position: absolute; height:20px; width:15; left:650px; top:400px; z-index: 100"><a href="#"><img vspace="0" border="0" hspace="0" alt="Back to Top" width="15" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUbWq6EjQHT2U5Wt154bGXBkmBGKYnAJCSAI9K72OjCwnaAFU19UAFqd41D-Fu8LjyPKSm4S-bytAs2y7nEe-ClyepZaycIVa3e-FNcr7rdCfWyid9cnIW9BqrElCMvB0I7-YEX829_ebU/s320/up_out.gif" height="25"/></a></div>


    <a name="top"></a>
  4.  Klik Simpan, dan lihat hasilnya. Selamat mencoba . . .  :D

10 komentar:

Qucluk mengatakan...

Thank's om kempul request q dah di bahas. dah tak coba dan hasilnya mantaf.... thank's ya om....

belajar blog mengatakan...

Wah bisa terima rekues toh kang
mantab ahh

koleksi mainan mengatakan...

Kalo sembunyiin komentar gimana kang..??
biar ga numpuk gitu

berita unik mengatakan...

saya juga mao coba pasang ahh

om kempul mengatakan...

@ Belajar Blog : iya mas insyaallah jika saya bisa request pertanyaannya akan saya posting selama ilmunya saya mengerti... maklum masih sama2 belajar... hahahaha

@ Koleksi Mainan : pertanyaannya akan segera saya jawab dalam postingan berikutnya mas.... :D


@ Berita Unik : Thank's mas kunjungannya... :D

Oktri darmadi mengatakan...

terima kasih infonyya
ditunggu kunjugan balik
terima kasih

Anonim mengatakan...

thanks gan

Virgo traits mengatakan...

This post was very well written, and it also contains many useful facts. I appreciated your professional manner of writing this post. You have made it very easy for me to understand.

Counseling mengatakan...

I like your post “wrap-up”. I got chance, a geek’s blog so well that I like this wither it would be specifically for me or not, but over all a nice blog as post,

Apply Kartu Kredit Mandiri mengatakan...

Boleh dicoba ya om..

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Posting Komentar

 

Recent Comment

Sahabat Setia

Recent Post

Related Websites

This Blog is proudly powered by Blogger.com | Template by miscah.blogspot.com