Cara Memasang Tombol "Back to Top" SEO Friendly di Blog
November 14, 2015
Cara Memasang Tombol Back to Top (Kembali ke Atas) SEO Friendly di Blogger.
BACK to Top Button (Tombol Kembali ke Atas) merupakan salah satu trending desain blog (website).
Menu, link, atau Tombol Kembali ke Atas ini membuat blog jadi sangat user friendly karena memudahkan pengunjung kembali ke bagian atas halaman dalam satu klik atau "tap".
Demo Tombol Kembali ke Atas bisa dilihat di blog CB ini. Ada di bagian kanan bawah layar komputer Anda. Namun, tombol ini hanya muncul saat halaman sudah sedikit ke bawah atau bagian atas blog mulai tertutup.
1. Layout > Add a Gadget > pilih HTML/Javascript
2. Judul kosongkan
3. Copas kode Tombol Back to Top SEO Friendly berikut ini di kolom "Content":
Pilihan gambar panahnya, bisa dilihat di posting cara pasang back to top sebelumnya.
4. Save!
KODE LEBIH SIMPLE:
Namun kode simple ini selalu muncul, baik saat halaman discroll ke bawah ataupun tidak. Good Luck! (http://www.contohblog.com).*
BACK to Top Button (Tombol Kembali ke Atas) merupakan salah satu trending desain blog (website).
Menu, link, atau Tombol Kembali ke Atas ini membuat blog jadi sangat user friendly karena memudahkan pengunjung kembali ke bagian atas halaman dalam satu klik atau "tap".
Demo Tombol Kembali ke Atas bisa dilihat di blog CB ini. Ada di bagian kanan bawah layar komputer Anda. Namun, tombol ini hanya muncul saat halaman sudah sedikit ke bawah atau bagian atas blog mulai tertutup.
Cara Memasang Tombol Back to Top SEO Friendly
Berikut ini cara memasang kode "back to top" (kembali ke atas) yang hanya muncul saat halaman blog discroll ke bawah.1. Layout > Add a Gadget > pilih HTML/Javascript
2. Judul kosongkan
3. Copas kode Tombol Back to Top SEO Friendly berikut ini di kolom "Content":
<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/AVvXsEjpaE2mGvZqiQxPrv7E_c3lbxyGAZdD-SLemHbQnPrv3jgZS7zFJFaLapeLMgdzh-u0My0az5bewnxx1SxVeCvKtzpIAeuvGTxEjnd6xOHlQnqGfeNpNaSezoNk41Tr8hEwojZQjCP5I2ou/s1600/back+to+top+button+(1).gif" />', //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>
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/AVvXsEjpaE2mGvZqiQxPrv7E_c3lbxyGAZdD-SLemHbQnPrv3jgZS7zFJFaLapeLMgdzh-u0My0az5bewnxx1SxVeCvKtzpIAeuvGTxEjnd6xOHlQnqGfeNpNaSezoNk41Tr8hEwojZQjCP5I2ou/s1600/back+to+top+button+(1).gif" />', //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>
Pilihan gambar panahnya, bisa dilihat di posting cara pasang back to top sebelumnya.
4. Save!
KODE LEBIH SIMPLE:
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img alt="kembali ke atas" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXCc2KQodiLvHik2wAdzdJAYlKIiTVNutCrU9ZLwDlBFfBBF1z6Qy0ds6rLPcFPCzOhyblI7HUA80lxGci_080KtD5UTGIF9KhaHT0ULvOguOZkJedmJtiDOOJYaSQOctgGU9HvFTCoZJz/s1600/back+to+top+(2).png"/></a>
Namun kode simple ini selalu muncul, baik saat halaman discroll ke bawah ataupun tidak. Good Luck! (http://www.contohblog.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
mantap gan
ReplyDelete