Cara membuat/memasang tombol back to top/go top di
blogger, tombol back to top adalah sebuah tombol yang berfungsi untuk
membuat/mempercepat scrolling dari bawah keatas di sebuah web page
ataupun blog page sehingga akan mempermudah reader ataupun visitor untuk
kembali´pada bagian atas dari blog/website dengan cepat ketika berada
dibagian bawah halaman dengan hanya sekali klik pada tombol back to top
tersebut. Sebagai contoh sobat bisa melihat pada bagian kanan bawah dari
blog saya ini
Fitur back to top
yang kita buat/bahas sekarang ini adalah fitur tombol back to top
menggunakan jQuery. Efek jQuery ini sedikit lebih lembut dan smooth
daripada efek javascript lainnya seperti pada animasi bintang jatuh dari kursor yang menggunakan javascript biasa. Kelebihan nya juga adalah efek back to top
ini sangat ringan ketika di loading dan sangat cocok digunakan didalam
blog tentunya bagi yang suka me-modifikasi blog-nya dengan sesuatu yang
unik, indah dan bermanfaat. Untuk membuat nya silahkan ikuti tips & tricks blogger berikut.
Cara Membuat/Memasang Tombol Back To Top Dengan jQuery di Blogger
- Silahkan login di Blogger
- Pilih Template > Edit HTML > klik Expand Widget Template
- Cari kode </body> (gunakan CTRL+F)
- Copy kode dibawah ini dan Paste tepat diatas kode </body> (jika kode dibawah sudah ada di template sobat, kode dibawah tidak usah dipasang lagi)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
- Kemudian Copy lagi kode dibawah ini dan kemudian Paste tepat dibawah kode diatas
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMMh3hlqq7RbQpgAjmd8rxRzSAA3sliWyp61_oXYaS_eprSaWzj5ajjiQWkXth-zAp0dlEd-Tp-E_i0YfQD9Vxa7ssbJS8JrqsLkz_OMwpJ7a4_9tUcUvHFpDGIm_tIqHzKnpzmAbntXE/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>
- Terakhir simpan template sobat dan tombol back to top sudah bisa dipakai.
☻
URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXAN5eB_rV_Cpzs6b2Ny3D152BKhgWArq-VoLP4nGeSRN1TZCQ_VaQb6c2hzCKhyphenhyphenZGBvX3o6ML6WOrBpuB7mctjUFJCvNUB3sv-jtFMUMljLk0H6l905s380PxtVHm2gFN_yAk5uoXJ9c/s1600/back+to+top1.png
☻
URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR_lUl65_QsUx68lSzAYPU6C03pgAceEKLcFhPlhcM0OnWPzpFOvqIh5TsD6LczUO2vw8yO_JFOqY-gOes-ipATQziULOMc6z5LqHjjgWoyBFF6WMM9ox7l9h35_LJIHssf9zymFfSt_w/s1600/back+to+top2.png
☻
URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsz9ThRxp1eeeIToOa8cKk_5NLPCyUXE6vtFE3T4PZt0ExOo3fSyLnSyV-SzbWUcgBLr8FIMz_x0ykcddR14vP1mW9FuxVcP3iWQk8VPgpggh_mGvtMGGVB9L7QJoE-N-4iIzsQbc46W4/s1600/back+to+top3.png
☻
URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLnfV5t_811iM70gSxSKIgpokrqGbYdHiu95Jjo2_ySPCRaOx_tNcvMXuOAmK8FTX0CHUx10ZVgHGo7JbzypsxK1P8ufWF8ZzvSElO-3BEubjd2eVJhLoUSvx8cwwtERziGGekt-E23LA/s1600/back+to+top4.png
☻
URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuRfwKjxFHKI2YbHvr5vjx1qLI0khYZL1qXiz7K7u1zlY4ggzHcHifhZYR0rUtsAx536ZUcT6K9PTWES8W6AT7BCDI0ZfD-rSQ1AeKs3U3XwJbMTyhGCum8LivheBpGTIDPfRWuhwL9Gg/s1600/back+to+top+animasi+1.gif
☻
URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguJvV3suFWKyQeC-ZaNEO9-s-_bosWI451X8XbyD_u6DDRzqWWfutC4v8Yk9avio95slwwjxKQ3Rdmepx3XSKsV9KnjdPZVzZuNfe9CbF4kW19uahVjsnG-CI_z9BhMDM2fV9ld45nHog/s1600/back+to+top+animasi2.gif
☻
URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZn9mGYt4ztVl1i60hgTNOY2Hjyd_XW5teVWrxi4ahjfpEDh6SvERslQE3QYHU4an5gEkHZTOe2z1fH3InvNgM_YjKRB-rgIBzHEufH8rGh5U3N7Ctt4rVXvSPj5Nw6y8KJCpUDFywVh8/s1600/back+to+top+animasi3.gif
☻
URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCqdn6NcdoflDHL6fxA4GArrhQD_rmcLzuVd6wab8OJL3FGPnYGzkxpNmHBR1GNm2GFBQ33ATcJ4Y0iPLL6XlYQ0oSqwDEK3DaLumNl8ydtj9V8mY-8bcQxNNhMoACqpaAGBcxo-SjSYY/s1600/back+to+top+animasi4.gif
Good Luck!!!
Comments
Post a Comment
Syarat-syarat Berkomentar:
☻) Berkomentarlah Dengan Bahasa Yang Sopan;
☻) Berkomentarlah Dengan Bijak;
☻) Berkomentarlah Dengan Komentar Yang Berhubungan Dengan Postingan Ini;
☻) Dilarang Berkomentar Yang Berhunbungan Dengan PORNO/SARA
☻) Dilarang Berkomentar SPAM
NB: Jika sahabat melanggar syarat-syarat diatas maka Komentar sahabat akan dihapus.
Terima Kasih.