Cara Simple Menambahkan Tombol Back To Top Pada Blog

Pada artikel kali ini, mimin akan memperlihatkan tutorial mengenai pembuatan Tombol Back to Top yang akan sangat mempunyai kegunaan bagi kita para blogger dan juga bagi para pengunjung. Tombol Back to Top ini akan memudahkan pengunjung supaya sanggup kembali ke bab atas dari blog kita dalam satu klik, tanpa harus menscroll ataupun mengusap layar smartphone lagi. Apalagi kalau kita para blogger mempunyai sebuah goresan pena artikel yang sangat panjang. Tanpa basa-basi lagi, berikut langkah-langkahnya.

1. Pastikan terlebih dahulu pada template blog agan sudah terdapat instruksi jquery. Dengan cara, masuk ke blog kemudian klik Tema / Theme kemudian klik Edit HTML. Letakkan kursor di salah satu daerah di mana saja pada kolom instruksi HTML yang ada kemudian tekan Ctrl + F pada keyboard. Selanjutnya, ketik jquery pada kolom pencarian kemudian 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 instruksi tersebut tidak ditemukan, silahkan copy instruksi tersebut kemudian paste di atas instruksi </head>. Cara menemukan instruksi </head> sama dengan langkah pada nomor satu mulai dari letakkan kursor dan seterusnya. Jangan lupa untuk menyimpan perubahan.

2. Selanjutnya, klik sajian Tata Letak / Layout kemudian tambahkan gadget HTML/Javascript. Copy instruksi di bawah kemudian 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 instruksi yang berwarna merah merupakan model atau desain dari tombol Back to Up nya nanti. Kalian sanggup menggantinya sesuai dengan harapan masing-masing atau kalian sanggup membuatnya eksklusif dengan mengunjungi link berikut. Klik Di Sini.

Caranya:
1. Masuk ke situs kemudian buat tombol.
2. Jika sudah selesai, klik </> Embed. Copy link pada kolom Link to the current button image kemudian parse instruksi tersebut pada link berikut. Klik Di Sini.
3. Selanjutnya, copy link yang telah diparse kemudian ganti dengan instruksi berwarna merah di atas.
4. Jangan lupa untuk menyimpan perubahan.

Perhatian!
Jika kalian ingin meng-Copy kode-kode html ibarat di atas lebih baik Copy kemudian 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 instruksi 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

Main Menu

Info Populer 2022

Cara Simple Menambahkan Tombol Back To Top Pada Blog

Iklan Sidebar