Tips Biar Ngeblog Lebih Serius Dan Konsisten
Tapi, sobat jangan salah sangka dulu ya, saya lama ngak menulis, bukan karena saya ngak ada lihat ngotak-ngatik atau buka blog.
Saya juga masih sering buka blog ini, tapi belum dapat ide untuk menulis, lagian saya juga di sibukan dengan desain blog ini sob.
Selain itu, saya juga sibuk mengurus blog saya yang sedang dalam proses lounching. Tapi saya sendiri masih bingung sob.
soalnya banyak sekali yang harus saya setting, maklumlah karena saya pakai self hosting jadi saya pengennya tu tampilannya sempurna.
Ok lah sob, dari pada panjang lebar ceritanya, langsung aja ke topik kita ya. Kali ini saya mau share tentang Cara Mudah Memasang Tombol Back to Top Responsive Di Blog
Mungkin artikel ini sudah banyak di postingan blog lain, namun kali ini saya mau share berdasarkan ilmu dan pengalaman saya sendiri, dan juga dengan gaya saya.
Sebelum kita mulai, kita harus tau apa itu tombol back to top . ?
TOMBOL Back to Top atau yang biasa disebut Scroll to Top adalah semacam menu navigasi yang memudahkan pengunjung untuk kembali ke bagian awal atas halaman blog atau postingan secara cepat, tanpa perlu harus mengscroll mouse atau usap-usap screen blog.
Nah untu melihatnya, kita harus mengscroll ke bawah dahulu, baru kemudian munculah tombol Back to Top ini.
Dan apabila sobat klik tombol tersebut, maka tampilan postingan atau halaman yang sedang sobat buka akan otomatis bergerak ke bagian teratas ke halaman menu.
Sobat bisa melihatnya di sisi kanan bawah blog ini. Tombol ini baru saya buat barusan dengan searching di google dan membaca banyak panduan.
Lalu bagaimana cara memasangnya. ?
Untuk tips yang kali ini, kita tidak akan atau tidak perlu masuk ke edit HTML, kita hanya akan menambahkan widget saja.
mengapa. ?
Karena menurut saya, dengan hanya menggunakan widget html, ini akan menjadi lebih responsive dan ringan. Hal ini menurut saya dikarenakan kita hanya menempelkan saja di bagian luar, tanpa harus mengabungkan dengan html template.
Langsung saja sobat, kita bahas langkah-langkah Cara Mudah Memasang Tombol Back to Top Responsive Di Blog
2. klik Layout/Tata letak
3. kemudian Add a Gadget dan Pilih HTML/JavaScript
4. Biarkan judul kosong, letakan kode berikut ini di kolom konten:
<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/AVvXsEhf7a2PzQwUnJ7cLD48iBQdKC9U6_lGdWNnFqQ4KRr32TqMowZcbBZo0T4LdX3Zi4TQidaR-q17_3cXxsdY0fI5gCK-ct-qUkBpxJQPhWJR4UR01X9GbpKuD8DwzvHyDxuqfX3JVEJdlO8/s50/back+to+top+button.gif" />',
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()
</script>
var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf7a2PzQwUnJ7cLD48iBQdKC9U6_lGdWNnFqQ4KRr32TqMowZcbBZo0T4LdX3Zi4TQidaR-q17_3cXxsdY0fI5gCK-ct-qUkBpxJQPhWJR4UR01X9GbpKuD8DwzvHyDxuqfX3JVEJdlO8/s50/back+to+top+button.gif" />',
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()
</script>
5. kemudian Klik Simpan.
Silahkan sobat lihat di salah satu postingan sobat, Sudah muncul atau belum.
Nah bagi sobat yang ingin menganti Gambar Tombol Back to Top itu, sobat bisa menganti tulisan berwarna merah itu dengan kode berikut :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXTEldAAuo_eprHtEk9RQuGOFh4sJ8C7ncafDEqbMchzqfevchnp6IJToHT4TpGN3VGfb4F-a65Lu-qusJZ_6fq2ztatcL2DXlAAMVsUUMNiWljm8P7g1TNsDtvqUa9a4SVlCAf4fu8K0/s1600/back+to+top.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXWeBo5NagnbJ1RYJSwwoXlcRzj1VEcHTHJZyaf3Y0HJ8nr1s6gNv-EI9yEy0Qg4pYAZP73ShFJT2KyhTIGojUmTi8A6sHBC1nbprohWefzfmACqoWvP7858Nuz-vcLByc5dendGVHE6Q/s1600/back+to+top.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigfoiFBml6bmb9LRS93OWTrei4yr-miejnzb0BLJSzYJm4UU1BTr0BQJocXbJrcF8J2GW-udxxwfr0AeH3aI20GeqeHzhM4phLSX18pe2WzKPyKXca2kRsRtyjC4muwS2VQbDeEXu5CTI/s1600/back+to+top.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU7NjRAavyKuC_XkHioSV3tkRwacTd5Ddcg1xtYL001soJGcMBJm-XJsCY9lMCrg4KjbKj7zMqGLsQrVKZ-YGoaLq0V7szUqGJSxDbV6bM8t3CVTmAz2ErE2LEvjJep70hzsXqJ1mUH-s/s1600/back+to+top.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFzHodLSDj88TVWHtdakeN7yJ2hZYfAsVToDfv4R7Cfxq_MMUKO1afWzI6J_3ERCmGkYgQ9zZYuDWWsp9oo0y0FKgxGg_P4FE6kOjcId8ATe79RJmtmjJIwCyRpA5rzo_L7FL3_393h08/s1600/back+to+top+button.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGxDJ2H9-evIJj0nNEhzy-ZDGEPHksctO_ylBK3i6X3wW0p1WFyVsu9sbk2QDnqt7KLjZt5gsLnC1Ob5gGYjYj_YfsFUjLkB1oAmBZwvYZ6idl3rc5dWSDrYZBQsXqH2vP8fnkUyaH2Kg/s1600/back+to+top+button.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1NunvZc3A-n9uWriOrV6dxx4SdeUeToJJXeHPvglCpaymk67gLmJ8ECiogIZKfwD7DPoHnXOORjcs9ij06IJmUeEz837RzBzDBoTiD6fTA9OQjzNe2NbrcBeB0lWFxannNYW5rM3BOiQ/s1600/back+to+top+button.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp_w93Vx9FN4Ww4_8tiYLejvoQeobiySwJk0zymdT32laRHL6I04FqX80bQRgsz1vvBE8xlcBRP697rxRzNL7UxY0iSGghKWd8-JOnG6P3FMXQ4yCmx89QJwrgk7REbGQoxM24xVwfgYU/s1600/back+to+top+button.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0G9gIOfAjgeYCbxjDd4KJgAAOnZIkVW3ndoHvyqKpnvlZFsl2u9L4WIdnzHc7nxPqYxPH75o-D6HMhuyb-0m8ParrQkQ0M5Pq7ctN0ngjbdlsqE9oqQZBT0mI6-kj7M1cUat5EiwKn94/s1600/back+to+top.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Yz_FeAr2lTiTU4OiTKWsCphA3DZLgCyu2CwBUrlB3T-8sh6F_qIAyJ6S_OULzLmG5W1BF4LFxKnr-ZAEurHWnyWxA55b8eKfsTlrCgxqU_o8adawtL0453ax6HzBXEoYyWds-IOmn4c/s1600/Back-To-Top.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivAKgl5BiifKnHlc0rjlaJHweh8ajW6svbvBcKOUlYjFfkSplEbx1L-c0q9bAJffyZKycDz6ijMoHIEQQrjHhY88Pidj3uzhKKDN2XpdRBdWWoCQl2xx2kU5JuexsrufoZ1Pjl2zB2bfg/s1600/back-to-top-button.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8osg5dE-u1bUTHejCdxs9FWpdbMme0WAIfuPtMQ0AFrbGfPm6JjLuDVjWjdaNNu05oYOqxr01OAOJvxYLvEIn5OTQwUiqBKCkpIooodg8PQWSs-ewux9Jbb1m5wRcmbPZfYxLn22Yznc/s1600/back-to-top-button.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb9oc0L5iHVLlTnPByGYNrtWOvwOkQ9QvvBOHjk_fEyLnBC4aM9AuAiLsa3LTo6W0pPlDzp1DzwxM_YgVg1IHPk4hzDQMdQy34DH0oFw9g_bkgEy-S3-jP22soft_E_54g4gVAAbvJ81k/s1600/back-to-top-button.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT1uYXXf7vt_SBgs7uJShrC-SdKdvmqGNotVh-ZPbkGR7R0LKl9q7DU6wusjdwbPHU5j14oqYEsS97HD27_olY1SoyOuCzsuACg_cZWkSepWVm5iwvPjW15K0r_HQf6O6WUykMraFH8fY/s1600/Back-To-Top.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO7xykwgWNRc4Ny7cE8jItrQ7GnaamvsNY4vwGhBbYCcPvb034TtzTJ8-9qpPI1gt9SQQohX-VqXYzwhlatgMWqb37P5xG9MYKppVZlpvDHlCkDRAYgJc_r-IrD2h8JrziQLokiEx-G8Y/s1600/back_to_top_button.png
Gambar diatas saya dapat dari salah satu blog terkenal di indonesia yaitu Contoh Blog.
Silahkan sobat pilih mana yang sesuai dengan selera sobat.
Oh ya, jangan lupa untuk memindahkan kode tadi di sidebar paling bawah sobat. Ini agar tampilannya lebih sempurna sobat.
Ok itu saja dari saya tentang Cara Mudah Memasang Tombol Back to Top Responsive Di Blog.
Semoga Bermanfaat....