COPAD | Cara Simple Menambahkan Tombol Back To Top Pada Blog - Pada artikel kali ini, mimin akan memberikan tutorial mengenai pembuatan ...
Cara Simple Menambahkan Tombol Back To Top Pada Blog
August 04, 2018
Daftar Isi [Tampil]
1. Pastikan terlebih dahulu pada template blog agan sudah terdapat kode jquery. Dengan cara, masuk ke blog lalu klik Tema / Theme kemudian klik Edit HTML. Letakkan kursor di salah satu tempat di mana saja pada kolom kode HTML yang ada lalu tekan Ctrl + F pada keyboard. Selanjutnya, ketik jquery pada kolom pencarian lalu tekan Enter. Contoh kodenya sebagai berikut.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
Jika kode tersebut tidak ditemukan, silahkan copy kode tersebut kemudian paste di atas kode </head>. Cara menemukan kode </head> sama dengan langkah pada nomor satu mulai dari letakkan kursor dan seterusnya. Jangan lupa untuk menyimpan perubahan.
2. Selanjutnya, klik menu Tata Letak / Layout kemudian tambahkan gadget HTML/Javascript. Copy kode di bawah lalu paste pada kolom gadget HTML tadi.
<style>
.mbw-back-to-top {
position: fixed;
bottom: 2em;
right: 10px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="https://dabuttonfactory.com/button.png?t=%E2%88%86&f=Calibri-Bold&ts=45&tc=fff&hp=14&vp=5&c=5&bgt=gradient&bgc=00f0ff&ebgc=5f5fed" />
<script type="text/javascript">
/*****mybloggersworld.com***/
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.mbw-back-to-top').fadeIn(duration);
} else { //www.mybloggersworld.com
jQuery('.mbw-back-to-top').fadeOut(duration);
}
});
jQuery('.mbw-back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
Catatan:
Pada kode yang berwarna merah merupakan model atau desain dari tombol Back to Up nya nanti. Kalian dapat menggantinya sesuai dengan keinginan masing-masing atau kalian dapat membuatnya langsung dengan mengunjungi link berikut. Klik Di Sini.
Caranya:
1. Masuk ke situs lalu buat tombol.
2. Jika sudah selesai, klik </> Embed. Copy link pada kolom Link to the current button image kemudian parse kode tersebut pada link berikut. Klik Di Sini.
3. Selanjutnya, copy link yang telah diparse kemudian ganti dengan kode berwarna merah di atas.
4. Jangan lupa untuk menyimpan perubahan.
Perhatian!
Jika kalian ingin meng-Copy kode-kode html seperti di atas lebih baik Copy lalu Paste-kan dulu di Notepad ataupun Microsoft Word.
#Kode Alternatif Jika Kode Sebelumnya Tidak Berhasil
<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://dabuttonfactory.com/button.png?t=+%E2%86%91+&f=Calibri-Bold&ts=33&tc=fff&hp=6&vp=8&c=5&bgt=gradient&bgc=ccc&ebgc=000" />', //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>
Berikut, beberapa desain tombol yang sudah mimin siapkan dan tinggal kalian yang mengganti kode berwarna merah tersebut.
#Style 1
https://dabuttonfactory.com/button.png?t=%E2%88%86&f=Calibri-Bold&ts=45&tc=fff&hp=14&vp=5&c=round&bgt=gradient&bgc=0ff&ebgc=5f5fed
#Style 2
https://dabuttonfactory.com/button.png?t=%E2%88%86&f=Calibri-Bold&ts=45&tc=fff&hp=14&vp=5&c=round&bgt=gradient&bgc=f00&ebgc=c00
#Style 3
https://dabuttonfactory.com/button.png?t=%E2%88%86&f=Calibri-Bold&ts=45&tc=fff&hp=14&vp=5&c=round&bgt=gradient&bgc=ccc&ebgc=000
#Style 4
https://dabuttonfactory.com/button.png?t=%E2%88%86&f=Calibri-Bold&ts=45&tc=fff&hp=14&vp=5&c=5&bgt=gradient&bgc=00f0ff&ebgc=5f5fed
#Style 5
https://dabuttonfactory.com/button.png?t=%E2%88%86&f=Calibri-Bold&ts=45&tc=fff&hp=14&vp=5&c=5&bgt=gradient&bgc=f90&ebgc=f00
#Style 6
https://dabuttonfactory.com/button.png?t=%E2%88%86&f=Calibri-Bold&ts=45&tc=fff&hp=14&vp=5&c=5&bgt=gradient&bgc=ccc&ebgc=444
#Style 7
https://dabuttonfactory.com/button.png?t=+%E2%86%91+&f=Calibri-Bold&ts=33&tc=fff&hp=6&vp=8&c=5&bgt=gradient&bgc=00fff4&ebgc=0064ff
#Style 8
https://dabuttonfactory.com/button.png?t=+%E2%86%91+&f=Calibri-Bold&ts=33&tc=fff&hp=6&vp=8&c=5&bgt=gradient&bgc=ffb800&ebgc=f00
#Style 9
https://dabuttonfactory.com/button.png?t=+%E2%86%91+&f=Calibri-Bold&ts=33&tc=fff&hp=6&vp=8&c=5&bgt=gradient&bgc=ccc&ebgc=000
Akhir Kata
Sekian untuk tutorial pada artikel Cara Simple Menambahkan Tombol Back To Top Pada Blog kali ini, semoga yang mimin berikan dapat bermanfaat. Terus kunjungi blog COPAD atau langsung Subscribe untuk berlangganan artikel terbaru dan bermanfaat lainnya secara gratis. Untuk perhatiannya mimin ucapkan terima kasih dan mohon maaf untuk segala keterbatasan serta kesalahan dalam penulisan ataupun kata-kata yang kurang berkenan.
Bantu Apresiasi Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.