OmahBengongBlog - Pasang Tombol Back To Top Mudah Di Blog, Hallo gais bertemu lagi dengan mimin yang baik dan imut. tombol back to top ini gais, dia memiliki fungsi untuk memudahkan pengunjung blog kalian untuk melakukan scrol otomatis ke atas. agar pengunjung blog kalian tidak kerepotan melakukan scrol manual pada mouse mereka, penampakan tombol back to top bisa kalian lihat pada gambar diatas ya gais.
Mengapa kalian harus memasang tombol back to top???sebenarnya tidak mengharuskan untuk memasang tombol back to top ini ya gais, karena ini hanya widget tambahan. kalian bisa memasangnya dan juga tidak memasang-nya, semua terserah kalian ya gais. kan disini mimin cuma memberikan informasi kepada kalian gais, oke kalau kalian berminat untuk memasangnya silahkan kalian baca postingan ini sampai selesai.
Langkahnya cukup mudah kok gais, pertama kalian harus masuk terlebih dahulu ke dasbor blog kalian gais. kemudian gais copy kode yang ada di bawah ini ya gais.
Kode Yang Nanti Kalian Pastekan Gais
<!-- 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://i1329.photobucket.com/albums/w558/Putra_Ndableg_Cah_Ndesa/Screenshot_15_zpstdqhimrr.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>
<!-- End Gadget -->
Kemudian masuk ke menu tata letak, tambahkan widget Html-nya dan pastekan kode yang tadi sudah kalian copy pada postingan ini.penampakan-nya seperti ini gais.
Ganti tulisan yang mimin beri warna merah dengan url image yang akan kalian gunakan, kalau sudah tekan simpan dan lihat perubahan-nya gais. image-nya bebas gais kalian mau memakai format file jpg atau png juga bisa.
Terimakasih gais kalian sudah mau berkunjung ke blog sederhana OmahBengongBlog, semoga apa yang mimin bagikan dapat bermanfaat bagi kita semua. dan jangan lupa like fanspage kami agar kalian dapat postingan-postingan terbaru dari blog sederhana ini.
