Tutorial Blog: Cara Mudah Membuat Tombol Back To Top di Blogger
Tombol Back To Top ini akan bermanfaat bagi pengunjung ketika ia ingin kembali ke bagian paling atas pada halaman web setelah membaca artikel pada Blog sobat yang panjang. Ok, jika sobat ingin membuat Tombol Back To Top ini, silakan simak artikel kali ini tentang Cara Mudah Membuat Tombol Back To Top di Blogger.
Tombol Back To Top ini akan berada di sudut kanan bawah pada halaman web.
Berikut dibawah ini langkah-langkah dalam Membuat Tombol Back To Top di Blogger.
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik tambahkan gadget di posisi mana saja, hasilnya akan tetap berada di sudut kanan bawah.
4. Pilih mode HTML/Javascript.
5. Masukan kode html berikut.
<!--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/AVvXsEhck5PIEGlrbaPnhQA_Rt_M_BeWeNRhs67U1PCuaUbY2YhBVXJGoUoS460RrEetPJvKMgXpad-DSLM4hXp5vjYYqBJjZxCedv-LvzEvWlpUGBK3fdVEdFXjYxCq-amyZbFig61oMUp-M6JN/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>
<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/AVvXsEhck5PIEGlrbaPnhQA_Rt_M_BeWeNRhs67U1PCuaUbY2YhBVXJGoUoS460RrEetPJvKMgXpad-DSLM4hXp5vjYYqBJjZxCedv-LvzEvWlpUGBK3fdVEdFXjYxCq-amyZbFig61oMUp-M6JN/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>
Catatan:
- Jika telah terdapat script berwarna biru pada Template yang sobat miliki, maka hapuslah kode tersebut agar tidak terjadi bentrok antar Javascript.
- Kode-kode berwarna hijau bisa sobat ubah:
- Scrollto: Posisi tujuan tombol back to top, dihitung dari paling atas. 0 artinya 0 pixel dari atas halaman.
- Scrollduration: Kecepatan atau durasi scroll, semakin ditambah nilainya maka semakin lambat.
- Fadeduration: Kecepatan atau durasi fade, fade adalah gerakan muncul. Yang pertama nilai fade in, dan yang kedua nilai fade out.
- Offsetx: Posisi tombol back to top, semakin ditambah maka akan semakin merapat ke dalam.
- Scroll Back To Top: title pada tombol
- Kode berwarna merah bisa sobat ubah dengan gambar Tombol Back To Top yang sobat inginkan. Namun jika tidak diubah maka hasilnya akan seperti berikut.
Ada beberapa pilihan gambar untuk tampilan tombol Back To Top:
6. Setelah selesai, maka klik Simpan.
Discl:
Blog ini berisi Artikel yang merupakan artikel dari Tahun 2013 lalu, namun dalam prakteknya masih dapat digunakan ataupun bisa juga tidak dapat digunakan pada era jaman sekarang Setelah di Perbaharui Kembali. Kalau teman teman blogger penasaran trik dan tips jadul ini, silahkan dicoba.
- Khusus Artikel Game dan Aplikasi, untuk link unduhan/download akan saya perbaharui sesuai yang disarankan oleh peraturan T.O.S Google tahun ini. Dan juga bisa saya link-kan pada situs lain (bisa situs resmi atau situs yang menyediakan) yang berhubungan dengan artikel tersebut. Terimakasih.
- Gambar diambil dari mana saja saat itu.
Demikianlah artikel saya tentang "Cara Mudah Membuat Tombol Back To Top di Blogger" Semoga dapat diambil manfaatnya untuk para pengguna blogger semuanya. Akhir kata saya ucapkan terimakasih telah berkunjung ke Saungjiwa Blog ini, semoga teman teman semua dapat berkreasi dengan tutorial yang saya tampilkan. 🙏
Berkomentarlah dengan Sopan, Sara, SPAM akan dihapus...