Cara Membuat Tombol Back To Top Keren Di Blogger

"Cara Membuat Tombol Back To Top Keren Di Blogger" - Back to top atau lebih mudahnya kembali ke atas adalah salah satu widget yang dapat membantu pengunjung untuk lebih mudah kembali keatas halaman page. itu singkatnya namun sebenarnya widget back to top itu apa?? Nah,,Back to top adalah sebuah fungsi tombol yang biasanya terletak di bagian bawah yang berfungsi untuk meng scrool untuk kembali menuju ke artikel Atas sehingga kita sudah tidak perlu lagi menggunakan fungsi mouse secara manual untuk kembali menuju ke atas.

Dengan pengertian diatas tentunya sudah pada mengerti fungsi dari tombol back to top. widget ini sangat dianjurkan untuk dipasang diblog. karena sangat membantu untuk bergerak cepat kembali pada artikel yang diatas. kalau artikel kita cukup pendek mungkin ini sedikit tidak berlaku, namun jika kadang artikel yang ada di blog kita puanjang tentu sangat membantu. 

Tombol Back To Top Keren di blog sekarang banyak ditambah dengan gambar yang keren, sudah pasti juga bisa dijadikan langkah untuk modifikasi blog. widget ini dengan efek auto hide, jadi setiap ddiarahkan kebawah maka secara otomatis akan muncul dibagian bawah dan sebaliknya jika posisi diatas bagian halaman maka tombol Back To Top tidak kelihatan.

Jika sobat tertarik untuk memasang Tombol Back To Top Keren Di blog sobat, silahkan simak tutorial dibawah ini: Cekidot!!!!

1. Seperti biasa, Sobat masuk ke akun Blogger

2. Pilih Layout/Tata letak >>> Pilih Add a Gadget 

3. Sobat pilih HTML/JavaScript . Jika sudah sekarang coy dan pastekan kode dibawah ini dalam kotak HTML/JavaScript :

<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={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFGRIvYgBqrOjDW6pXR-X5mREsmAbdpI4h_aH1OtI6FbjGKWkxL8FV6edDgP9A8IdBIBRI9D7FcT-3iO5J1rzf0iwjV_mp8HtLWOtqz0bSLSmJke_RC-mbv9OP-_vU2EoiCVC2RDWgNfM/s1600/TO-TOP.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
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()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

4. Simpan dan lihat hasilnya.

Keterangan:

Sobat Blogger bisa mengganti URL gambar Back To Top

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFGRIvYgBqrOjDW6pXR-X5mREsmAbdpI4h_aH1OtI6FbjGKWkxL8FV6edDgP9A8IdBIBRI9D7FcT-3iO5J1rzf0iwjV_mp8HtLWOtqz0bSLSmJke_RC-mbv9OP-_vU2EoiCVC2RDWgNfM/s1600/TO-TOP.png

dengan pilihan gambar di bawah ini:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieraYnLrbhZ4FeyMq5V18pyhb95UNP0cbjdO3VWb90vz7rtHqq_r9NLoqidlIC3WvCRBn8G1FS4zTgemn8ZN5Xh6Jj9wDSEzevbrEXJZlNCi6KguGG59YsevwTFbd-gfx8Wodc3_H5eO7n/s1600/back+to+top10.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiugzOsVOSBLHm5a2mQ7BNeY7dggd0K4X6oh_OGM7BZZPVTzC6zinqrPGaSjdAJyvKSYOph1fEFOPTaBkD_snzeTMRoEDJoAnjpMaRpGCBs7Qj0mwACa5Qc6sH4h4LvrB7nE1ax8yuGg3HR/s1600/back+to+top14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkNtCC_B8ry6IrYTaAMgozFhmYZ-Bt-GKeEq2PVu3Rj_I4VDvEY7OJ_oUtJXjhdAGDhLZsbguxo5xz8kYFFpF7bOpN_rvXRUWxywe-FZT0vgrWdMcZepzNtPbUDEYhTpyuOABo9ZWQ43-8/s1600/back+to+top15.png

Sekian tutorial Cara Membuat Tombol Back To Top Keren Di Blogger. Semoga dapat bermanfaat. Sampai jumpa dengan tutorial-tutorial lainnya..