Cara Membuat Tombol Back To Top Pada Blogspot 2018

Cara membuat tombol back to top pada blospot 2018 - apa itu tombol back to top? bagi sebagian orang mungkin masih ada yang kurang tau tentang tombol back to top, tombol back to top adalah tombol kembali ke atas, biasanya tombol back to top sering kita temukan pada sebuah halaman situs atau blog dalam bentuk sebuah tombol, dan apabila tombol itu kita klik maka otomatis akan scroll ke halaman paling atas atau kembali ke titik awal, tombol back to top memiliki peranan yang cukup penting bagi sebuah blog atau website terutama bagi sebuah website atau blog dengan sebuah konten yang berat dan memiliki halaman yang cukup panjang, sehingga ketika sudah melebihi batas layar, tombol back to top akan muncul secara otomatis dan siap untuk di clik seandainya kita ingin kembali ke halaman atas atau ke titik awal halaman. Tombol back to top biasanya terletak dan muncul di bawah halaman. ada begitu banyak efeck tombol back to top yang bisa kita gunakan dan dapat mempercantik tampilan dari sebuah website atau blog, diantaranya ialah efeck bounce, efeck scroll, efeck geser, efeck padding, efeck smoth dan bahkan ada yang di buat sesederhana mungkin tanfa menggunakan efeck sedikitpun.

Anda bisa menyesuaikan dengan keinginan anda sendiri, manakah yang lebih pas dan lebih menarik, berikut beberapa cara untuk membuat tombol back to top di blog anda :

Cara membuat tombol back to top pada blogspot 2018  

1. Tombol back to top dengan efeck bounch:

a. Masuk ke template blog anda, cari kode </head> simpan kode berikut tepat diatas </head>

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

Untuk kode diatas adalah framework jquery, jika didalam template anda belum dilibatkan kode jquery, silahkan letakan kode diatas, jika sudah anda bisa lewati

b. Buat widget baru, pilih widget untuk HTML/javascript kemudian kopikan kode berikut dan simpan

<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq6ZFdzir1CstU4mCOvyyCzYacnTACNVn3q3sr_swSwqpS4VaGBE7f24cuBKGoBDuN9RpW7w3YQgJmTIJQ6cEQwZBSrBrYFoJIyc0CetV83jwwOqgeFGQEVrqSbKJlBKbFDE1hWV-ziK6W/s1600/arrow-up_basic_blue.png'/></div> 

c. Kopikan kode javascript jquery berikut diatas kode </head> juga

<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>

2. Tombol back to top efek geser

a. Masuk ke template blog anda, cari kode </head> simpan kode berikut tepat diatas </head>

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

b. Masih diatas kode </head> letakan juga kode berikut tepat diatasnya, pada kode dibawah ini anda bisa ubah angka 500 untuk letak tombol dan angka 700 anda bisa ganti untuk kecepatan

<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#ScrollToTop&#39;).fadeIn()}
else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700);
return false})});
</script>

c. Buat widget baru, pilih widget untuk HTML/javascript kemudian kopikan kode berikut dan simpan

<style type='text/css' scoped='scoped'> #ScrollToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq6ZFdzir1CstU4mCOvyyCzYacnTACNVn3q3sr_swSwqpS4VaGBE7f24cuBKGoBDuN9RpW7w3YQgJmTIJQ6cEQwZBSrBrYFoJIyc0CetV83jwwOqgeFGQEVrqSbKJlBKbFDE1hWV-ziK6W/s1600/arrow-up_basic_blue.png'/></div>

3.tombol back to top dengan efek Fading dan efeck smooth

a. Masuk ke template blog anda, cari kode </head> simpan kode berikut tepat diatas </head>

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

anda bisa lewati peletakan kode diatas jika dalam blog anda sudah terdapat  jquery


b. Ggunakan gadget HTML/Javascript lalu kopikan script dibawah ini kemudian jangan lupa untuk disimpan

var scrolltotop={  
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]}, 
    controlHTML: '<img src="URL Gambar Back To Top" />', 
    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()
</script>

Pada script diatas silahkan anda ganti tulisan "URL Gambar Back to Top" dengan lokasi gambar back to top yang anda miliki atau ganti aja dengan url gambar berikut:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq6ZFdzir1CstU4mCOvyyCzYacnTACNVn3q3sr_swSwqpS4VaGBE7f24cuBKGoBDuN9RpW7w3YQgJmTIJQ6cEQwZBSrBrYFoJIyc0CetV83jwwOqgeFGQEVrqSbKJlBKbFDE1hWV-ziK6W/s1600/arrow-up_basic_blue.png

Berikut yang bisa kami jelaskan tentang cara membuat tombol back to top pada blospot 2018
  "Baca artikel berikutnya" Cara membuat blog lewat hp

Share this post