Jadi, buat memenuhi janjiku semalam, kalo udah bisa buat tombol Back to Top, aku bakal kasi tahu cara bikinnya.
Semalam, setelah ngutak-atik selama 1 jam, akhirnya tombolku jadi juga. Nggak tahu kenapa juga bisa selama itu. Padahal waktu pertama kali bikin buat blog penjelajahseru, nggak selama itu.
Aku buka banyak tutorial. Coba pake cara yang ini, cara yang itu ... tapi nggak bisa-bisa. Salahku apa coba?
Akhirnya, aku menemukan satu tutorial yang ternyata caranya praktis banget. Tapi sayang, aku nggak ingat nama web-nya. Pikirku mau aku kasih tautan di tulisan ini.
Maaf banget, ya, Kak, aku bener-bener minta maaf. Ntar kalo nemu, insyaallah aku masukin sini.
Oke, lanjut, ya!
Jadi gini, cara pertama yang aku lakukan adalah ngecek koding yang ada di Tema. Punyaku pake bahasa Indonesia, kalo yang masih English berarti Theme, ya. Masih ingat nggak itu letaknya di mana? Coba aku ingetin.
- Buka dashboard blogger.
- Pilih Tema.
- Klik tanda segitiga di sebelah kiri tulisan Sesuaikan.
- Terus klik yang Edit HTML.
- Cek apakah ada koding ini di atas <head>. Pake Ctrl + F biar cepet. Kalo belum ada, copy paste terus klik Simpan.
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
Oh, ya, karena blogspotku masih asli, kodingnya masih dikit. Nggak perlu nyari <head> lama-lama, masih ada di nomer 4. Hehe.
Cara pertama selesai, lanjut cara kedua.
- Buka Tata Letak / Layout.
- Klik tanda + Tambahkan Gadget di Bilah Sisi.
- Pilih yang HTML/JavaScript.
- Isi koding di bagian Konten. Untuk Judul dikosongin aja.
<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/AVvXsEh2frmoyxPqZZ62vuPAJNQQKdhZJDsO4sWG78hnXnEGa25kM_JdEKJiYQ0pHff0CH36K1e-fCMLqSEH27aVojs_4QNOsLqL8Gwy1aP8d_ILpYVRHPv6wy0IckCFdfX8ekaW7RklWcfJ4Mk/s1600/back-to-top-button.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()
</script>
- Klik Simpan.
Selesai! 😍
Itu nanti gambar tombol Back to Top-nya kayak punyaku, ya. Dan itu aku nggak perlu nyimpen gambarnya di draft dulu, lho. Heran juga, sih, tapi nyatanya bisa jalan kok tombolnya kalo pas di-klik. Iya, 'kan?
Buat contoh gambar tombol lain, bisa ambil di blog ini. Yang kemarin aku contek hampir kayak gitu juga, tapi bukan itu, beneran, aku lupa.
Alhamdulillah, janjiku udah lunas, ya. Aku cuma pake dua cara itu dan selesai.
Posting Komentar
Posting Komentar