Dalam menciptakan tombol back to top pada blog ada beberapa cara alternatif yang mungkin sudah banyak tutorialnya pada pencarian google. Namun disini saya akan menunjukkan dua alternatif yang keduanya dengan cara menambahkan pada widget blog. Sebenarnya sanggup dimasukan pada HTML namun untuk menyimpannya cukup rumit maaf untuk seorang pemula. Maka dari itu saya akan menunjukkan cara dengan hanya menambahkan script pada widget blog.
Membuat Tombol Back To Top di Widget Blog
Sesuai yang saya jelaskan dalam membuatnya ada dua alternatif yang akan saya jelaskan disini dan perbendaanya hanya pada script jQuerinya saja. Disini pun saya akan menjelaskan cara menggunakan dengan menggunakan gambar atau icon awesome untuk menjadi tombol pada back to top tersebut. Langsung saja simak klarifikasi berikut. Baca juga "Cara Menyembunyikan Gambar pada Postingan Blog"
Sebelum masuk ke cara pertama dalam menciptakan back to top, pastikan terlebih dahulu apakah template blog Anda sudah terdapat javascript jQueri ibarat berikut. Apabila belum maka simpan script dibawah arahan <head>, kemudian Simpan template.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'/>
#1 Membuat Tombol Back To Top di Blog
- Pertama Anda harus dalam keadaan login pada Blogger.
- Pada Dashboard Blogger Anda masuk ke "Tata Letak" kemudian klik "Tambahkan Gadget" > "HTML/JavaScript".
- Kemudian masukanlah arahan script berikut tanpa menggunakan judul pada "HTML/JavaScript" tersebut pada widget sidebar ataupun dimanapun.
- Klik "Simpan" apabila Anda sudah memasukan untuk tombol yang diinginkan.
Script 1#
<style type="text/css">
.back-to-top{background:#ff6550 none repeat scroll 0 0;border:medium none;border-radius:50%;bottom:10px;cursor:pointer;display:none;height:50px;opacity:1;position:fixed;right:10px;text-align:center;width:50px;}
.back-to-top:hover{box-shadow:1px 2px 3px 0 #666;}
</style>
<div class="back-to-top">Ganti Dengan Tombol Back To Top yang Anda Inginkan</div>
<script type="text/javascript">
/***www.bloggars.com-style***/
jQuery(document).ready(function() {
var offset = 1000;
var duration = 700;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
.back-to-top{background:#ff6550 none repeat scroll 0 0;border:medium none;border-radius:50%;bottom:10px;cursor:pointer;display:none;height:50px;opacity:1;position:fixed;right:10px;text-align:center;width:50px;}
.back-to-top:hover{box-shadow:1px 2px 3px 0 #666;}
</style>
<div class="back-to-top">Ganti Dengan Tombol Back To Top yang Anda Inginkan</div>
<script type="text/javascript">
/***www.bloggars.com-style***/
jQuery(document).ready(function() {
var offset = 1000;
var duration = 700;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
Catatan: Ganti kata yang berwarna merah dengan tombol yang Anda inginkan yang akan diberikan dalam artikel ini di klarifikasi bawah.
#2 Membuat Tombol Back To Top di Blog
Alternatif kedua ini sanggup Anda lakukan apabila script diatas tidak berhasil. Sama halnya ibarat cara pertama diatas namun perbedaanya hanya pada scriptnya saja.- Anda harus dalam keadaan login pada Blogger.
- Pada Dashboard Blogger Anda masuk ke "Tata Letak" kemudian klik "Tambahkan Gadget" > "HTML/JavaScript".
- Setelah itu masukan arahan script berikut.
- Kemudian klik "Simpan" apabila sudah menentukan tombol yang Anda inginkan.
Script 2#
<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:1000, scrollto: 0, scrollduration:700, fadeduration:[500, 100]},
controlHTML: 'Ganti Dengan Tombol Back To Top yang Anda Inginkan', //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>
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:1000, scrollto: 0, scrollduration:700, fadeduration:[500, 100]},
controlHTML: 'Ganti Dengan Tombol Back To Top yang Anda Inginkan', //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>
Catatan: Ganti kata yang berwarna merah dengan tombol yang Anda inginkan yang akan diberikan dalam artikel ini di klarifikasi bawah.
Kumpulan Tombol Back To Top Design
Seperti yang saya jelaskan pada catatan kedua script diatas yaitu mengenai tombol yang akan Anda pasang pada blog sebagai tombol back to top. Ada dua alternatif juga yang akan saya berikan dalam tombol back to top ini antara lain sebagai berikut.1. Tombol Back To Top Menggunakan Icon Awesome
Saya akan menunjukkan beberapa tombol kembali keatas dengan memanfaatkan icon awesome. Namun sebelumnya pada blog Anda harus terdapat stylesheet css font awesome dengan disimpan pada HTML blog, simpanlah script berikut dibawah arahan <head>.Setelah terdapat stylesheet css font awesome diatas, pilihlah beberapa icon dibawah untuk dijadikan tombol back to top dengan meyimpan scriptnya untuk menggantikan pada kata yang berwarna merah.<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
#1 Icon
| Icon | Script Icon |
|---|---|
| <i aria-hidden="true" class="fa fa-arrow-circle-up" style="color: #fff; font-size:36px; padding-top:7px;"></i> | |
| <i aria-hidden="true" class="fa fa-arrow-up" style="color: #fff; font-size:30px; padding-top:9px;"></i> | |
| <i aria-hidden="true" class="fa fa-arrow-circle-o-up" style="color: #fff; font-size:36px; padding-top:7px;"></i> | |
| <i aria-hidden="true" class="fa fa-chevron-circle-up" style="color: #fff; font-size:36px; padding-top:7px;"></i> | |
| <i aria-hidden="true" class="fa fa-chevron-up" style="color: #fff; font-size:30px; padding-top:6px;"></i> |
- Script Icon sangat cocok untuk back to top dengan Script 1#. tetapi tidak salah apabila ingin memasukannya pada Script 2#.
- Masukanlah Script Icon pada Script 1# untuk menggantikan kata yang berwarna merah tersebut.
- Apabila icon ingin kotak (tidak bulat) hapus css dengan nana "border-radius: 50%;" pada Script 1#.
Artikel sebelumnya "Cara Praktis Membuat Daftar Isi Otomatis Super Filter di Blog"
2. Tombol Back To Top Menggunakan Gambar
Dalam menciptakan tombol kembali keatas pada blog, Anda juga sanggup menggunakan gambar yang sesuai dan yang Anda inginkan. Pada kesempatan kali ini pun akan menunjukkan beberapa gambar yang cocok untuk dibentuk tombol back to top yang dibentuk oleh saya sendiri Istimewa buat Anda pembaca artikel di blog saya ini.Kedua script yang saya berikan diatas keduanya sanggup untuk menggunakan gambar sebagai tombolnya. Anda hanya tinggal memasukan script <img .. /> yang saya berikan disini dan menggantikannya kata yang berwarna merah pada script.
#2 Gambar
| Gambar | Script Gambar (<img .. />) |
|---|---|
 | <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeubDqADmZZlHKHQEnrXhaqPH__1LpOjITgs22VWtQz9ufF1IcoOaOEQtT7dObvCTN0Ab-LxPfqHdsQ5kH6bRDq0MRMYQWugFOp8T4RcYCk6Jd0g8kEXqjjhwyZBy51leQVm8S7wzs308/s1600/back+to+top+bloggars+2.png" /> |
 | <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr8dKt3DSuEciT1-sdCYh2YPS2dlreHnTt_PJ3bqlj1VgSe3QAu9gUVvfGhcDeP38KqM27Lr9FNH30ZWt4e7IoHAal2ZHS8dHb2ZqBe7FzlC_JlzQ5Q1lNtrEPh9v6wUPeOtFAIKL2cGk/s1600/back+to+top+bloggars.png" /> |
 | <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmpLtJTLCtF3kCif3B1FSr8GYv1VEBMlK7DqJhBtriQNGgHEUKdhPsi5uCTKml3kBBVTipusA5szDx1M57Fjb3B9S39id0RnSBWQepaNPHCBTRZsPwiMPLoC0ouGrTvtnQXjv49EsDnw0/s1600/back+to+top+bloggars+3.png" /> |
Begitulah yang saya berikan pada Anda pengunjung blog ini untuk menciptakan tombol back to top, apabila Anda kurang suka dengan desain yang saya berikan diatas Anda sanggup untuk mengeditnya sendiri sesuai yang Anda inginkan dan yang harmonis dengan template blog Anda.
Baca juga "Cara Memasang Back To Top pada HTML Blog"
Begitulah artikel kali ini yang membahas mengenai Cara Membuat Tombol Back To Top di Blog Dengan Mudah. Apabila Anda kurang mengerti alasannya yaitu klarifikasi yang saya berikan pada artikel ini cukup rumit, baca kembali dari atas hingga Anda paham dan mengerti alasannya yaitu bahwasanya cukup gampang dalam membuatnya. Anda hanya perlu menyimpan Script 1# atau Script 2# yang sudah diberikan tombol icon awesome maupun gambar dan menyimpannya pada widget blog Anda. Sumber http://www.bloggars.com/
0 Response to "Baca ya : Cara Membuat Tombol Back To Top di Blog Dengan Mudah"
Post a Comment