Cari Blog Ini

Memuat...

Kamis, 01 Agustus 2013

Cara Memasang Tombol Back To Top di Blog


Cara Memasang Tombol Back To Top di Blog - Salam sejahtera semua, pada kesempatan kali ini gue ingin share Tutorial Blog yaitu Cara Memasang Tombol Back To Top di Blog, sudah tau kan dengan tombol back to top. Tombol Back To Top akan memudahkan para pengunjung blog yang kembali ke bagian teratas blog/header blog, biasanya tombol back to top sangat bermanfaat untuk blog yang memiliki comment yang banyak, sehingga blog pasti akan cukup berat dan akan menyusahkan pengunjung untuk men-scrool kembal ke atas, maka dari itu gue share Tutorial Blog Cara Memasang Tombol Back To Top di Blog. Ok gan silahkan ikuti tutorial Cara Memasang Tombol Back To Top di Blog.

Tutorial:

  • Login Ke Blogger.
  • Masuk ke dashboard, lalu klik Tata Letak, dan pilih tambah gadget.
  • Pilih HTML/Javascript, lalu copy code dibawah ini.

  • <!--Back to top script-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" >

    var scrolltotop={
        setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
        controlHTML: '<img src="http://2.bp.blogspot.com/-5xtKo3sslHs/UPbpgD8LY2I/AAAAAAAACBc/gIQGZ9ZBzDg/s1600/back+to+top13.png" />',
        controlattrs: {offsetx:5, offsety:5},
        anchorkeyword: '#top',
        state: {isvisible:false, shouldvisible:false},
        scrollup:function(){
            if (!this.cssfixedsupport)
                this.$control.css({opacity:0})
            var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
            if (typeof dest=="string" && jQuery('#'+dest).length==1)
                dest=jQuery('#'+dest).offset().top
            else
                dest=0
            this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
        },
        keepfixed:function(){
            var $window=jQuery(window)
            var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
            var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
            this.$control.css({left:controlx+'px', top:controly+'px'})
        },
        togglecontrol:function(){
            var scrolltop=jQuery(window).scrollTop()
            if (!this.cssfixedsupport)
                this.keepfixed()
            this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
            if (this.state.shouldvisible && !this.state.isvisible){
                this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
                this.state.isvisible=true
            }
            else if (this.state.shouldvisible==false && this.state.isvisible){
                this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
                this.state.isvisible=false
            }
        },

        init:function(){
            jQuery(document).ready(function($){
                var mainobj=scrolltotop
                var iebrws=document.all
                mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
                mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
                mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                    .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                    .attr({title:'Scroll Back to Top'})
                    .click(function(){mainobj.scrollup(); return false})
                    .appendTo('body')
                if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //khusus versi IE6 ke bawah untuk loose check, juga untuk melihat apakah control mengandung teks
                    mainobj.$control.css({width:mainobj.$control.width()}) //IE6- perlu diset witdh yang jelas agar kontainer text terbentuk dengan rapi
                mainobj.togglecontrol()
                $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                    mainobj.scrollup()
                    return false
                })
                $(window).bind('scroll resize', function(e){
                    mainobj.togglecontrol()
                })
            })
        }
    }
    scrolltotop.init()

    <!--Back to top script end--></script>
    * Kode yang berwarna hijau, bisa agan ubah sesuka hati:
      - Starline: Ukuran tinggi dalam pixel setelah halaman digulir kebawah dimana Tombol Back To Top akan muncul.
      - Scrollto: Posisi tujuan tombol back to top, dihitung dari paling atas. 0 artinya 0 pixel dari atas halaman.
      - Scrollduration: Kecepatan atau durasi scroll, semakin ditambah nilainya maka semakin lambat.
      - Fadeduration: Kecepatan atau durasi fade, fade adalah gerakan muncul. Yang pertama nilai fade in, dan yang kedua nilai fade out.
      - Offsetx: Posisi tombol back to top, semakin ditambah maka akan semakin merapat ke dalam.
      - Scroll Back To Top: title pada tombol
  • Untuk kode yang berwana merah, bisa agan rubah sesuka hati.
  • Kalau sudah klik Simpan, dan lihat hasilnya.

Demikian post hari ini dengan judul - Cara Memasang Tombol Back To Top di Blog - semoga bermanfaat.
Description: Cara Memasang Tombol Back To Top di Blog Rating: 4.5 Reviewer: Dwiky Putra - ItemReviewed: Cara Memasang Tombol Back To Top di Blog
Suka Dengan Artikel Ini ?

Poskan Komentar

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

ATTENTION
1. Komentar SPAM atau yang mengandung unsur porno atau kata kata kasar akan dihapus segera setelah saya review.
2. Dilarang promosi blog atau barang dagangan.
3. Silahkan klik Like untuk Blog ini, agar blog ini tetap bisa berkarya.
4. Dilarang menyertakan link aktif karena blog ini, kecuali untuk yang hal penting saja.
5. Jika ingin menyertakan Link Blog, lebih baik melakukan Link Exchange dengan Blog.
6. Jika Anda memiliki masalah cek dulu komentar, mungkin Anda akan menemukan solusi di sana.
7. Dilarang menshare ulang/copas artikel tanpa persetujuan dari saya.
8. Untuk pertanyaan diluar artikel, bisa Contact Me melalui Facebook atau E-mail.

 
 
Copyright © 2013. Kirizaki Blog - All Rights Reserved
Design by Luhur Muhammad Fatah | Powered By Blogger.com