Membuat Tombol Back To Top Di Akun Blogger atau Blogspot bagi template blogger yang tidak ada tombil back to top anda bisa menggunkan cara saya ini di Mboton Dev kami jelaskan seditail mungkin untuk membuatnya tersebut.
Table Of Contents
Membuat Tombol Back To Top
Ini sangat berfungsi untuk yang tidak ada tombolnya, atau anda ingin menganti tombol back to top untuk tombol yang baru anda bisa terapkan codenya silakan anda ambil codenya anda juga bisa membuat variasi untuk menganti gambar tombol yang sesuai ke inginan selera anda yang menggunakan gambar yang sesuai bagi anda yang paling bagus untuk anda.
Membuat Tombol Back To Top Code Back To Top ini saya menggunakan JQuery agar membuat halaman website lebih ringan dan lebih cepat untuk nilai speed website anda agar pengujung juga tidak terlalu lama untuk menunggu loading web anda. yang pasti juga tidak baik untuk web anda yang loadingnya lama.
Code Script JQuery cukup di pastekan Di Halaman di bagian
<body> atau sebelum </body>
Anda bisa merubah sesuai gambar anda yang anda ingakan caranya.
- Masuk Akun Blogger.
- Pilih Tema atau Template.
- Edit Tema atau Template Anda.
- Pastekan semua Code di bawah <body> atau sebelum </body>.
- Jika sudah klik Simpan Tema atau Template Blogger.
Membuat Tombol Back To Top Salin kodenya di bawah ini. kemudian letakkan ke dalam di dalam html blogger anda masing-masing.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"/>
<script type="text/javascript">
var scrolltotop={setting:{startline:100,scrollto:0,scrollduration:1e3,fadeduration:[500,100]},controlHTML:'<img src="http://4.bp.blogspot.com/-jqnu-lpoKyw/Tj98e4pj8eI/AAAAAAAAAkI/Idt4nuGUoIs/s1600/arrowTop.png" style="border:0;background:transparent;padding:0;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;" />',controlattrs:{offsetx:5,offsety:5},anchorkeyword:"#top",state:{isvisible:false,shouldvisible:false},scrollup:function(){if(!this.cssfixedsupport)this.$control.css({opacity:0});var a=isNaN(this.setting.scrollto)?this.setting.scrollto:parseInt(this.setting.scrollto);if(typeof a=="string"&&jQuery("#"+a).length==1)a=jQuery("#"+a).offset().top;else a=0;this.$body.animate({scrollTop:a},this.setting.scrollduration)},keepfixed:function(){var a=jQuery(window);var b=a.scrollLeft()+a.width()-this.$control.width()-this.controlattrs.offsetx;var c=a.scrollTop()+a.height()-this.$control.height()-this.controlattrs.offsety;this.$control.css({left:b+"px",top:c+"px"})},togglecontrol:function(){var a=jQuery(window).scrollTop();if(!this.cssfixedsupport)this.keepfixed();this.state.shouldvisible=a>=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(a){var b=scrolltotop;var c=document.all;b.cssfixedsupport=!c||c&&document.compatMode=="CSS1Compat"&&window.XMLHttpRequest;b.$body=window.opera?document.compatMode=="CSS1Compat"?a("html"):a("body"):a("html,body");b.$control=a('<div id="topcontrol">'+b.controlHTML+"</div>").css({position:b.cssfixedsupport?"fixed":"absolute",bottom:b.controlattrs.offsety,right:b.controlattrs.offsetx,opacity:0,cursor:"pointer"}).attr({title:"Kembali ke Atas"}).click(function(){b.scrollup();return false}).appendTo("body");if(document.all&&!window.XMLHttpRequest&&b.$control.text()!="")b.$control.css({width:b.$control.width()});b.togglecontrol();a('a[href="'+b.anchorkeyword+'"]').click(function(){b.scrollup();return false});a(window).bind("scroll resize",function(a){b.togglecontrol()})})}};scrolltotop.init();
</script>
jika sudah Klik Simpan template.
lalu anda klik view blogger anda yang sudah di pastekan code back to top semoga anda berhasil untuk menerapkan ini semua, karena ini cara yang paling mudah untuk para blogger pemula yang sedang belajar mendalam code java script dan lalin anda bisa membaca dari isi conten artikel saya semua. semoga anda bisa mengerti untuk menerapkan code JQuery tombol back to top.
jika anda sudah menggunakan dan berhasil jangan lupa untuk berkomentar di bawah ini jika anda ada kebinggungan untuk menerapkan Tombol Back to top semoga anda berhasil semoga bermanfaat untuk semua Terima Kasih yang sudah berkunjung semua.