Menambahkan Navigasi Back to Top (Kembali Ke-atas) pada Blogspot

Untuk memudahkan para pengunjung Blog/ Website yang ingin membaca artikel di blog Anda dengan tulisan yang panjang sebaiknya Anda memasang Navigasi Back to Top. Navigasi ini berfungsi sebagai alat untuk menggeser artikel pada halaman paling bawah menuju halaman yang paling atas cukup dengan satu klik saja.

Cara menambahkan navigasi back to top :

• Copy kode berikut 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBgxagaJ5VPsP8R6isQG2GQzyv9tfVIb8Wmb5Tp2ZslstvV9m7psmKMxq9kQEbsXREjMdCGKz7uv48w4qcHjgeTIqiUqRam3ZCxejBihSMQnhxqkEoQ5Tco2BhBYY7AHmp_S441PLIKM4E/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>

• Tambahkan Gadged > HTM/ Java Script.

• Save dan lihat hasilnya. 

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Graphic Design By Tara | Free Download Game dan Software . Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Graphic Design By Tara | Free Download Game dan Software dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Unknown pada tanggal Rabu, 28 Mei 2014