Cara Dan Metode Cepat Dan Gampang \ Memasang Tombol Back To Top Fast Loading & Responsive

cara Dan Teknik gampang dan cepat\ Membuat / Memasang Tombol Back to Top Fast Loading & Responsive di Blogger.

TOMBOL Back to Top / Scroll to Top atau Kembali ke Atas ialah semacam sajian navigasi yang memudahkan pengunjung untuk kembali ke bab atas halaman blog secara cepat, tanpa perlu scroll mouse atau "usap-usap" screen.

Jika halaman discroll ke bawah, tombol Back to Top ini gres muncul. Begitu diklik, maka halaman yang sedang dibuka akan otomatis bergerak ke bab teratas.

Contoh lengkap nya ada di sebelah kanan bawah halaman blog CB ini.

Banyak sekali tips cara membuat atau memasang tombol Back to Top ini. CB juga kalo tidak salah sudah beberapa kali share tips dan kodenya.

Namun, kali ini mempertegas dan memberi pilihan terbaik isyarat Back to Top yang SEO Friendly, User Friendly, Fast Loading, dan Responsive. Kodenya dari Dynamic Drive.

cara Dan Teknik memasangnya juga gak ribet, tidak perlu edit HTML, namun Istimewa untuk dengan menambahkan widget di bab Layout (Tata Letak). Ini yang membuat tombol Back to Top menjadi ringan.

cara Dan Teknik Termudah Pasang Tombol Back to Top

1. Di dashboard blog Anda, klik Layout > Add a Gadget > Pilih HTML/JavaScript
2. Judul Kosongkan!
3. Copas isyarat berikut ini di kolom Content:

<script type="text/javascript" >
var scrolltotop={
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
    controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgakiz6cy05ybU6nEG3_OcIV85tQ6Qkdoq4ev5hojcP6ueRwvrdxXF1WJhVHUqDbzk2QSurE7pYPPvw0_oac9prYPdA_rROzJYWPyCaIAcvBE76nrbowWZwwpwMDrMGiZUcJXzD_jzSPMQ/s50/back+to+top+button.gif" />',
    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 terang semoga 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()
</script>

4. Anda dapat ganti icon panah atau gambar back to top-nya di bab URL Gambar yang warna merah. Koleksi gambar panahnya dapat dipilih di Gambar Tombol Back to Top Blogger.

5. Save!
6. Pindahkan widget di sideba blog yang gres terpasang itu ke bab paling bawah!
7. Save Arrangement!

Silakan cek, buka blog Anda, refresh (F5). Jika tidak muncul, kemungkinan besar template blog Anda belum dipasang link ke isyarat jQuery. Silakan pasang jQuery. Umumnya template blog seo friendly terbaru sudah dipasang jQuery.

Demikian cara Dan Teknik gampang dan cepat\ Memasang Tombol Back to Top Fast Loading & Responsive. Good Luck & Happy Blogging! (http://www.contohblog.com).*


Sumber http://www.contohblog.com/

Artikel Terkait

Cara Dan Metode Cepat Dan Gampang \ Memasang Tombol Back To Top Fast Loading & Responsive

4/ 5

Oleh Unknown

Unknown Juli 24, 2016