Tombol back to top memiliki peranan sangat penting bagi sebuah blog atau website tersebut dengan konten yang berat dan memiliki halaman yang panjang. Untuk website yang memiliki banyak informasi pada halamannya, akan membuat konten-konten lain terlewati, tanpa disadari menggulir jauh ke bawah halaman, maka solusi terbaik adalah dengan membuat tombol tersebut di blog kita. Adapun caranya sebagai berikut:
Banyak tutorial diluar cara membuat tombol back to top. Para master-master blog pasti sudah banyak membagikannya mulai dari kode dan serta cara memasangnya. Dari cara yang instan sampai cara yang agak rumit.
Mulai dari cara membuat tombol back to top hanya dengan html, ada juga yang membuat back to top dilengkapi dengan Jquery maupun CSS.
Tapi pada dasarnya semua sama yaitu fungsinya adalah untuk menggulir tombol dari bawah ke atas halaman. jadi dengan adanya tombol back to top ini memudahkan pengunjung atau pembaca blog mengulang artikel yang ingin dibacanya.
Apa harus ada pada blog?
Tidak harus, jika dirasa dengan memasang tombol back to top ini kecepatan loading blog semakin lambat langkah yang tepat jika tidak memasang tombol ini.
Namun jika artikel anda panjang-pangjang lebih dari 500 kata atau bahkan lebih dari 2000 kata maka hal yang patut dipertimbangkan untuk memasang tombol back to top ini.
Tapi jika blog anda hanya berisi lirik lagu contohnya mungkin memasang tombol back to top tidak harus dilakukan. Bahkan lebih baik menghilangkannya.
Banyak tutorial diluar cara membuat tombol back to top. Para master-master blog pasti sudah banyak membagikannya mulai dari kode dan serta cara memasangnya. Dari cara yang instan sampai cara yang agak rumit.
Mulai dari cara membuat tombol back to top hanya dengan html, ada juga yang membuat back to top dilengkapi dengan Jquery maupun CSS.
Tapi pada dasarnya semua sama yaitu fungsinya adalah untuk menggulir tombol dari bawah ke atas halaman. jadi dengan adanya tombol back to top ini memudahkan pengunjung atau pembaca blog mengulang artikel yang ingin dibacanya.
Apa harus ada pada blog?
Tidak harus, jika dirasa dengan memasang tombol back to top ini kecepatan loading blog semakin lambat langkah yang tepat jika tidak memasang tombol ini.
Namun jika artikel anda panjang-pangjang lebih dari 500 kata atau bahkan lebih dari 2000 kata maka hal yang patut dipertimbangkan untuk memasang tombol back to top ini.
Tapi jika blog anda hanya berisi lirik lagu contohnya mungkin memasang tombol back to top tidak harus dilakukan. Bahkan lebih baik menghilangkannya.
Sebelum mempraktekkan cara yang saya tulis dibawah alangkah baiknya anda memback up dahulu template anda untuk menghindari error pemasangan template.
Jika hal tersebut memang dibutuhkan. Namun jika tidak silahkan anda coba cara dibawah ini untuk anda terapkan diblog anda.
Kode ini merupakan kode yang simple untuk memasang kode tombol back to top blog, tidak harus mengoprek kode di dalam html.
Cara Membuat Back to Top Responsive :
1. Login Blogger anda
2. Pilih Layout / Tata Letak
3. Klik Add Gadget
4. Pilih HLML/Javascript
5. Kopas kode berikut dibawah ini dan simpan :
Jika template anda sudah ada kode yang bertanda merah maka kode tersebut tidak usah di kopi
<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/AVvXsEh3YVEru6s4HB3XcriRE5MyjBMfMNhqzjgGk2_wPfvayNJ8dOMldS9i5HrAiM3v-WKaSG64Lgftyz6RIgJ5xgn_v1GmB1vsiTY5xk8HL3_dUjrJhR6g8NALY0FBvswJKMH0tsgw0KO7g-gT/s1600/Backto+top0.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:'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>
<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/AVvXsEh3YVEru6s4HB3XcriRE5MyjBMfMNhqzjgGk2_wPfvayNJ8dOMldS9i5HrAiM3v-WKaSG64Lgftyz6RIgJ5xgn_v1GmB1vsiTY5xk8HL3_dUjrJhR6g8NALY0FBvswJKMH0tsgw0KO7g-gT/s1600/Backto+top0.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:'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>
Lalu lihatlah blog anda apa sudah tampil tombol back to topnya?
Jika sudah maka template anda cocok dipasangi tombol back to top dengan kode ini. Karena ada beberapa template kadang tidak muncul atau tampak tombol tersebut.
Jadi tidak semua template itu bisa dipasangi kode seperti yang dicontohkan para master-master blog kadang kita harus mencari cara sendiri. atau menemukan problem errornya.
Demikianlah tutorial membuat back to top simple dan mudah. Selamat mencoba semoga berhasil. Jika tidak berhasil silahkan berkomentar dibawah ini.
Tags:
Tutorial Blog