Assalamu'alaikum, wr.wb
Cara Membuat Tombol Back To Top Keren di Blog - Kembali kita berjumpa sobat walau hanya lewat kata. Tutorial blogging kali ini tentang cara membuat tombol back to top di blog. Apa sih tombol back to top itu dan kegunaannya untuk sebuah blog. Tomblol back to top adalah sebuah navigasi untuk kembali kebagian atas dari sebuah blog seperti yang terdapat pada blog saya ini, jadi sangat berguna sekali apabila kita membaca sebuah artikel yang sangat panjang atau mungkin artikel yang disertai dengan coment yang sangat banyak (biasanya pada blog dofollow) dan kita ingin kembali kebagian atas blog maka kita cukup mengklik tombol back to top pada blog tersebut.
Nah jadi sangat berguna bukan membuat tombol back to top (kembali keatas) pada blog, sehingga kita tidak perlu menggunakan fasilitas scroll pada browser atau tombol scroll mouse untuk kembali bagian atas blog untuk mengakses menu-menu blog yang disediakan. Disamping itu tombol back to top di blog juga menambah faktor estetika (keindahan) sebuah blog.
Oke tutorial membuat tombol back to top keren di blog ini sangat mudah sekali.
1. Masuk keakun blogger sobat
2. Pilih tata letak atau layout untuk yang bahasa inggris kemudian tambah widget/ gadget HTML
3. Copy code dibawah ini
<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="Letakan URL Gambar Disini " />', //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>
Untuk URL gambar silahkan coba pilihan dibawah ini :
http://1.bp.blogspot.com/gISRgZA4hnY/UPblPTIT1pI/AAAAAAAACAU/w9eLeowmJZE/s1600/back+to+top10.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDsKOidp6uGX2bdk-wWVM4pLMXRS1P7Zzxdmag3iEx8Wpdr2CNkIWuQstoAEthFKiRU85_Wcr1NQlOxHJslGztXUsjHMF7Azc4nwhlP1LyWl0JsjWGD1cl8GhxzrfPf_p_4Y1Hxb8eMIyA/s1600/back+to+top13.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja-47HTcadGnlFtUCrx0y2qNdTr3Q9K35zSLvQNs_2_9a29e_33eQ9B6nfsZPgme-BXZPQuSNU-sIGU3Cvinhiwy6XNteBtNf3JFsMp7Jb0Ki1fQ-EcDlbeDaK2tc2Nc9AMJK37HWo9uMR/s1600/back+to+top14.png
Nah mudah bukan membuat tombol back to top di blog itu. Untuk mengatur kecepatan scroll sobat bisa menggati anggka pada kode scrolldurasi. Moga bermanfaat ya. baca juga cara membuat related post di blog.
thanks gan :) membantu . komenya di tunggu ya www.masbimo.com
ReplyDeletesama-sama om. segera TKP
Deletemakasih gan infonya langsung saya pasang ya di blog saya
ReplyDeleteSilahkan mas. moga bermanfaat
Deletewww.ygame.96.lt
ReplyDeletegame online gratis
Sip banget, izin pake. singgah jg ke http://dtimebaksobakar-batam.blogspot.com/
ReplyDeletedtgu
gan, pastenya disebelah mana?
ReplyDeletepaste kodenya di widget. tambahkan dulu widget html
DeleteTerima kasih gan inforasinya .. Sangat bermanfaat
ReplyDelete