Cara Membuat Tombol Back To Top pada Blogger


     Hey sob? kali ini saya akan memberikan cara bagimana membuat sebuah widget tombol back to top pada blogger atau tombol panah ke atas agar setiap kita klik tombol tersebut kita dapat kembali ke pada halaman teratas pada sebuah blog atau website. Mungkin bagi sebagian blogger tidak menggunakan fitur ini namun tidak ada salahnya untuk mencoba dan tombol ini juag dapat mempermudah para pengunjung untuk kembali ketampilan atas tanpa harus scroll ke atas kembali.

Tombol Back To Top atau yang di artikan kedalam bahasa indonesia ialah Kembali ke Atas adalah sebuah gadget yang berbentuk tombol panah atas yang jika di klik akan membawa viewer ke tampilan paling atas sebuah halaman blog, oke bagi anda yang ingin mencoba gadget fotur yang satu ini bisa lihat cara mudah berikut ini.

Cara Mudah Membuat Tombol Back to Top

1. Login ke blogger anda.

2. Masuk ke "Tata Letak" dan klik "Tambah Gadget".

3. Pilih menu "HTML/Javacript".

4. Copy code di bawah ini dan paste kan ke halaman "HTML/Javascript". Judul di kosongkan saja.

<!-- Start Gadget -->
<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="http://3.bp.blogspot.com/-b1hw2cqey60/TfzE0oLSFkI/AAAAAAAAD3w/FpMh-mdf7rA/s400/Back-to-top.png" />', //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>
<a href="www.blogsejutaumat.com"/>
<!-- End Gadget -->

5. Terakhir anda "Simpan" dan lihat hasilnya.

Screenshot :



Keterangan : Warna biru adalah gambar tombolnya, anda bisa ganti dengan gambar yang lain dengan mengganti link gambar tersebut.

Oke mudah kan untuk membuat fitur gadget tombol kembali keatas?

Oke mungkin itu saja yang bisa saya berikan mengenai artikel ini, semoga dengan apa yang sudah saya berikan ini dapat bermanfaat bagi Anda. Jangan lupa untuk like dan follow akun kami untuk mendapatkan info serta update terbaru dari kami. Jika ada Kesalahan atau ada Pertanyaan serta Tambahan bisa isi pada kolom komentar anda. Terimakasih.

Previous
Next Post »

2 komentar

Click here for komentar
July 17, 2015 at 6:35 PM ×

ga bisa ngopy sourchnya gan, l pake autoblock ya...

Balas
avatar
admin

► Dilarang meninggalkan link aktif
► Dilarang komentar yang mengandung sara, pornografi dsb.
► Semoga artikel bermafaat
► Terimakasih sudah berkomentar :)
Out Of Topic Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon

Powered by Blogger.