Cara Memasang Back to Top di Blog Tanpa Edit HTML

 Print This Page

Tombol Back to Top pada template Blog khususnya Template Blog yang belum ada sangat dianjurkan, Tombol ini akan memudahkan pengunjung bila mendapatkan postingan yang panjang, dengan menekannya maka kita akan mudah kembali keatas tanpa mengulir roll mouse. Cara memasang back to top yang Admin berikan ini tanpa Edit HTML, sangat mudah dan sudah Admin praktekkan seperti yang Sobat lihat.

Langkah-langkahnya :

• Masuk ke Akun Blogger Sobat
• Dari Tata Letak ==> Tambah Gadget ==> HTML/JavaScript

• Copy dan Paste kan script dibawah ini di kolom yang tersedia

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

• Tekan Simpan dan Simpan sekali lagi untuk menerapkan di Blog.

Sekarang lihat Blog Sobat sudah ada tombol Back to Top, menarik kan Sob.

Demikian Cara mamasang Back to Top di Blog Tanpa Edit HTML, mudah-mudahan bermanfaat.
Semangat mencoba.

Berbagi :