Cara Membuat Widget Back To Top pada Template Blogspot (Blogger). Tombol back to top merupakan salah satu fitur yang untuk memberi kemudahan bagi para pengguna blog atau pengunjung blog. Pada kesempatan ini mari kita pelajari script Widget Back To Top pada Template Blogspot (Blogger).
Bagaimana script Widget Back To Top pada Template
Blogspot (Blogger) dan Cara Membuat Widget Back To Top pada Template
Blogspot (Blogger)
Sebelum Anda memasang script Widget Back To Top di halaman dengan
Template Blogspot (Blogger) terlebih dahulu pastikan bahwa pada template
blog Anda sudah terpasang script 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'.
Jika belum silahkan Copy (Salin) salah satu kode yang ada di bawah ini kemudian
Letakkan di atas kode </head>.
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'
type='text/javascript'/>
Atau kode ini:
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Setelah memasang kode
jQuery, Cara Membuat Widget Back To Top
Atau Tombol Kembali Ke Home pada Template Blogspot (Blogger) selanjutnya adalah
dengan menyalin salah satu kode script back to top yang ada di bawah ini
kemudian tempatkan pada widget atau agdget blog Anda dengan cara masuk ke dashboard
Blogger > Kemudian buka bagian Layout
(Tata Letak), setelah itu klik tombol Add a Gadget (Tambahkan Gadget)
A.
Kode atau Script ke-2 Widget Back To Top
pada Template Blogspot
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
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>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color:transparent;
font-size: 12px;
padding: 1em;
display: none;
z-index:9999;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#"
class="back-to-top"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn_jwLVPd80AZMDqwEw0-CDcBMgSfaYym4hjQo-gWmEDMPpz7WBVDq3iIj6MJaULasBmXt2Vs1U6PB20dCxTxCNW9a7QygsoEj5Du0N9fKm2oT7oWwXG176paiKqUN1EI6zA4MLX0KL8V42JXZYthsVW1RP2TQgESUx4_WcfUF-FfHV7aTndDub92Zh0o/s1600/TOP.png"
alt="Back to Top" / /></a>
2. Kode atau Script ke-2 Widget Back To Top pada Template Blogspot
<style>
.mbw-back-to-top {
position: fixed;
bottom: 2em;
right: 10px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;
}
</style>
<img
class="mbw-back-to-top" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn_jwLVPd80AZMDqwEw0-CDcBMgSfaYym4hjQo-gWmEDMPpz7WBVDq3iIj6MJaULasBmXt2Vs1U6PB20dCxTxCNW9a7QygsoEj5Du0N9fKm2oT7oWwXG176paiKqUN1EI6zA4MLX0KL8V42JXZYthsVW1RP2TQgESUx4_WcfUF-FfHV7aTndDub92Zh0o/s1600/TOP.png"
/>
<script
type="text/javascript">
/*****mybloggersworld.com***/
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() >
offset) {
jQuery('.mbw-back-to-top').fadeIn(duration);
} else { //www.mybloggersworld.com
jQuery('.mbw-back-to-top').fadeOut(duration);
}
});
jQuery('.mbw-back-to-top').click(function(event)
{
event.preventDefault();
jQuery('html,
body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
3. Kode atau Script ke-3 Widget Back To Top pada Template Blogspot
<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="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn_jwLVPd80AZMDqwEw0-CDcBMgSfaYym4hjQo-gWmEDMPpz7WBVDq3iIj6MJaULasBmXt2Vs1U6PB20dCxTxCNW9a7QygsoEj5Du0N9fKm2oT7oWwXG176paiKqUN1EI6zA4MLX0KL8V42JXZYthsVW1RP2TQgESUx4_WcfUF-FfHV7aTndDub92Zh0o/s1600/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>
Demikian informasi tentang script Widget Back To Top pada Template
Blogspot (Blogger) dan Cara Membuat Widget Back To Top pada Template Blogspot
(Blogger). Semoga ada manfaatnya