Cara Mudah Memasang Back To Top Di Blog


Tombol icon back to top disini yang saya maksudkan adalah Jalan pintas scroll / navigasi dengan sekali klik logo gambar icon yang langsung memerintah halaman kembali ke atas. biasanya tampilnya/letaknya icon back to top ini di bawah kanan halaman. hanya dengan sekali klik, halaman langsung meluncur ke atas lagi.

Pada fungsi ini jelas membantu serta memudahkan pengunjung untuk kembali ke bagian atas halaman dengan cepat. tidak perlu scroll mouse ataupun gesek gesek layar sreen. jika halaman di scroll ke bawah, icon back to top ini baru muncul, pada sebelah kanan bawah dan siap di klik untuk meluncur ke atas lagi.

Cara pasangnya simple gampang mudah banget, tidak perlu edit html pada template. hanya menambahkan gadget widget pada bagian layout tata letak. jadi scroll back to top ini menjadi ringan.

Berikut di bawah cara membuat/memasangnya :

➪ Login blog
➪ Pada dashboard klik Layout (Tata letak)
➪ Add Gadget (Tambahkan Gadget)
➪ Pilh HTML/JavaScript
➪ Kosongkan saja judulnya
➪ Copas code script dibawah.

<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={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="https://1.bp.blogspot.com/-sb1y7ErUHps/V5r7Y4jYvbI/AAAAAAAACi0/ZQOqoBKmAoAKTrIyPFNiEkenPmd6LYWMACLcB/s1600/back%2Bto%2Btop.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            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()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}

scrolltotop.init()
</script>

URL gambar yang berwarna merah silahkan kalau di ganti dengan URL gambar icon sobat,
➪ Save.
➪ Pindahkan/posisikan  widget yang barusan di buat tadi itu ke bagian paling bawah.
➪ Save.

Berikut Contoh icon back to top beserta URL gambarnya :

back to top 1

https://1.bp.blogspot.com/-V8_l01DxBjU/V6SX0wQ1uVI/AAAAAAAAC0Y/iYL2AESC6z8-HkgxCSd9-iuxFD0ryXTYwCLcB/s1600/back%2Bto%2Btop%2B%25281%2529%2B%25281%2529.png

back to top 2

https://2.bp.blogspot.com/-yAv1iygw7-c/V6SX1eEV80I/AAAAAAAAC0c/q_tKgkq3VgE-61hQl4BYDkDltoTBghZYQCLcB/s1600/back%2Bto%2Btop%2B%25281%2529.png

back to top 3

https://2.bp.blogspot.com/-483Ku4cxreg/V6SX1lnCPFI/AAAAAAAAC0g/iCOiPigNRiI_OBRNnwQH5EYssa7rcEJXACLcB/s1600/back%2Bto%2Btop%2B%25282%2529.png

back to top 4

https://4.bp.blogspot.com/-RusZvsgu05g/V6SX1plpqqI/AAAAAAAAC0k/q2Sx-Z8qLdwzQHcVMhCoapehjHLndxfNwCLcB/s1600/back%2Bto%2Btop%2B%25283%2529.png

back to top 5

https://4.bp.blogspot.com/-Z0DWHcMDcFE/V6SX15nTPMI/AAAAAAAAC0o/ZSkUZCbDCfgOn-ptcklGS-Bn23aAwMWJwCLcB/s1600/back%2Bto%2Btop%2B%25284%2529.png

back to top 6

https://1.bp.blogspot.com/-Jje0UaYSmeI/V6SX2KW-g-I/AAAAAAAAC0s/gW5Wy44Y5OUAvMKmh3357p5BoUAdaeMYwCLcB/s1600/back%2Bto%2Btop%2Bbutton%2B%25281%2529.png

back to top 7

https://2.bp.blogspot.com/-hGA-ZffpkjA/V6SX2fiNkQI/AAAAAAAAC0w/l5BcMXnzX0o9OrjRIbrGYZ3lk4h_DHtYQCLcB/s1600/back%2Bto%2Btop%2Bbutton%2Bred.gif

back to top 8

https://1.bp.blogspot.com/-U_bw5PhsqDU/V6SX2RvhQkI/AAAAAAAAC00/TeIo9Z72iQs7BkkHMs0NGK5cK6X1ypgkQCLcB/s1600/back%2Bto%2Btop%2Bbutton.gif

back to top 9

https://1.bp.blogspot.com/-baOrVBQvUVo/V6SX2uIJAqI/AAAAAAAAC08/xGv4Ywe9_JcvLnknaHOPSE8FRye_eSyQgCLcB/s1600/back%2Bto%2Btop%2Bbutton.png

back to top 10

https://1.bp.blogspot.com/-YOGjC1ZkYnI/V6SX23fVzRI/AAAAAAAAC04/Wimc1iwgBGMtMEV7TgvfphR5zdJ0mBqowCLcB/s1600/back%2Bto%2Btop.png

back to top 11

https://1.bp.blogspot.com/-dziX32zcybw/V6SX05TZ3oI/AAAAAAAAC0Q/CEeRQmgK-t4rmfda5cQ5xIo-T04oUupUQCLcB/s1600/Back-To-Top%2B%25281%2529.png

back to top 12

https://4.bp.blogspot.com/-VE_CoBJ8MB4/V6SX3PC9zJI/AAAAAAAAC1A/MRYvZeWE5549juuifyw2I1ntFhasQ-DUACLcB/s1600/back-to-top-button%2B%25281%2529.png

back to top 13

https://4.bp.blogspot.com/-ZQ6nN_0x74E/V6SX3c4fEcI/AAAAAAAAC1E/A8S1D3j6jdQx5pgsKFM1jcUijIuqLkX3ACLcB/s1600/back-to-top-button%2B%25282%2529.png

back to top 14

https://4.bp.blogspot.com/-rqk_fi4vvo0/V6SX3V2-rOI/AAAAAAAAC1I/UUAH2rQ3djoiX71teg7RrgS3p1-ytI9UQCLcB/s1600/back-to-top-button.png

back to top 15

https://3.bp.blogspot.com/-BleUdOQGpNU/V6SX0_R8MpI/AAAAAAAAC0U/2EffD_9GAZYIFuq4kG5NY1oBdKxa7Y1LQCLcB/s1600/Back-To-Top.png

back to top 16

https://3.bp.blogspot.com/-Wl9DPIBRj0w/V6SX3pcwR9I/AAAAAAAAC1M/G6v6e0POzkUmHz5v6k4XZCj-35Xr7V9fgCLcB/s1600/back_to_top_button.png

back to top 17

https://3.bp.blogspot.com/-d6cP6gf8tyw/V6SX3_m_myI/AAAAAAAAC1Q/oJ65CHiGp9A-N3O0P9YdbfJnGdTOBuHTgCLcB/s1600/tombol%2BBack%2Bto%2BTop.jpg

Silakan anda cek dengan membuka blog, Jika belum muncul, ada kemungkinan template blog sobat belum terpasang code jQuery.

Kalau belum ada code jQuery lakukan langkah ini :
➪ Masuk Template
➪ Pilih Edit HTML
➪ Cari kode </head> biar mudah cari otomatis dengan (Ctrl+F) isikan </head> dan enter.
➪ Copas salah satu code jQuery di bawah dan paste di atas kode </head> tadi.
➪ Save!

Code jQuery :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

Atau ini :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Good Night.
Note : Jika ada masalah terkait content di blog ini, Silahkan anda menghubungi kami Di Contact ini.