Sebuah artikel blog tentunya sangat membutuhkan alat untuk kembali dengan cepat ke posisi atas atau posisi judul artikel tersebut, apalagi artikel itu yang panjang jadi sangat di butuhkan alat tombol back to top / tombol kembali keatas hanya dengan satu klik saja,hal ini tujuanya untuk memberikan kemudahan dan kenyamanan bagi para pembaca.
untuk mendaftar jasa periklanan ppc seperti google adsense pun memberikan sebuah situs atau blog harus menyediakan tombol navigasi seperti misalnya tombol kemabli keatas , jika ingin mendalami bisnis ppc murni dari google.com bisa di kunjungi syarat supaya diterima Google Adsense
pada kesempatan ini saya akan memberikan cara membuat tombol back to top ( kembali ke atas ), dengan tiga ( 3 ) jenis tapi semuanya tujuan nya sama yaitu tombol kembali ke atas hanya cara-cara nya dan tampilan tombolnya yang berbeda.
Berikut langkah-langkahnya :
1.tombol pertama
keterangan :
tombol anak panah menunjuk keatas warna biru muda tersemat di pojok kiri bawah , kodenya di bawah ini silahkan simpan atau copy kodenya
<a href='#' style='display:scroll;position:fixed;bottom:15px;right:15px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7fbezQ-m9WmsozIvZL5WX00zllk19BsjuQzigKGFUvc1BzyoGMRcxZkH6YkbANl-HPH_UcxgkD14R5LvcuK_G-loBDjmF2gk1W_ndLIM-YtZ6h2w7kdS2DXVPFIkcv8NRIs2-JLe2ywWF/s1600/navigate-up-icon.png'/></a>
keterangan :
lihat tulisan di dalam kode yang warna merah ( Back to top ) tulisan itu bisa kalian ganti menurut apa yang kalian suka misaalnya di ganti dengan tulisan kembali keatas , karena tulisan ini nanti yang akan muncul di tombol tersebut yang berupa tombol anak panah
cara memasangnya ke dalam blog :
- buka blog kalian masuka ke dashboard lalu tata letak dan klik tambahkan gadged, lalu pilih gadged HTML/javascript dan pastekan kode di atas kedalam gadged tersebut tidak usah di kasih judul gadgednya lalu simpan gadgednya
- selesai...
dan silahkan cek tombol tersebut sudah muncul atau belum di jamin sudah hehe..
2.tombol kedua
keterangan :
tombol anak panah sedikit kecil tapi sedikit panjang warna item dan ada sinyal atau cahaya naik turun nya lumayan deh... di bawah ini kodenya
untuk mendaftar jasa periklanan ppc seperti google adsense pun memberikan sebuah situs atau blog harus menyediakan tombol navigasi seperti misalnya tombol kemabli keatas , jika ingin mendalami bisnis ppc murni dari google.com bisa di kunjungi syarat supaya diterima Google Adsense
pada kesempatan ini saya akan memberikan cara membuat tombol back to top ( kembali ke atas ), dengan tiga ( 3 ) jenis tapi semuanya tujuan nya sama yaitu tombol kembali ke atas hanya cara-cara nya dan tampilan tombolnya yang berbeda.
Berikut langkah-langkahnya :
1.tombol pertama
keterangan :
tombol anak panah menunjuk keatas warna biru muda tersemat di pojok kiri bawah , kodenya di bawah ini silahkan simpan atau copy kodenya
<a href='#' style='display:scroll;position:fixed;bottom:15px;right:15px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7fbezQ-m9WmsozIvZL5WX00zllk19BsjuQzigKGFUvc1BzyoGMRcxZkH6YkbANl-HPH_UcxgkD14R5LvcuK_G-loBDjmF2gk1W_ndLIM-YtZ6h2w7kdS2DXVPFIkcv8NRIs2-JLe2ywWF/s1600/navigate-up-icon.png'/></a>
keterangan :
lihat tulisan di dalam kode yang warna merah ( Back to top ) tulisan itu bisa kalian ganti menurut apa yang kalian suka misaalnya di ganti dengan tulisan kembali keatas , karena tulisan ini nanti yang akan muncul di tombol tersebut yang berupa tombol anak panah
cara memasangnya ke dalam blog :
- buka blog kalian masuka ke dashboard lalu tata letak dan klik tambahkan gadged, lalu pilih gadged HTML/javascript dan pastekan kode di atas kedalam gadged tersebut tidak usah di kasih judul gadgednya lalu simpan gadgednya
- selesai...
dan silahkan cek tombol tersebut sudah muncul atau belum di jamin sudah hehe..
2.tombol kedua
keterangan :
tombol anak panah sedikit kecil tapi sedikit panjang warna item dan ada sinyal atau cahaya naik turun nya lumayan deh... di bawah ini kodenya
<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/AVvXsEiCyOXLn_A-aGTGoh5Xo5eUMiqSm2JVDR-wYCiPLIenniup0hMZwuiUhmiNBKPILA63VsrRihhy73qsy3xho8FKBv1GklNbj4-ReDNgIvApVr0ZiEujmeGv8F_dwXjAbeF5Pi7K82ByBYHZ/s1600/back+to+top10.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
//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/AVvXsEiCyOXLn_A-aGTGoh5Xo5eUMiqSm2JVDR-wYCiPLIenniup0hMZwuiUhmiNBKPILA63VsrRihhy73qsy3xho8FKBv1GklNbj4-ReDNgIvApVr0ZiEujmeGv8F_dwXjAbeF5Pi7K82ByBYHZ/s1600/back+to+top10.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);
},
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'})
},
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
}
},
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()
})
})
}
}
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>
keterangan :
lihat di kode di atas tulisan yang warna merah bisa di ganti dengan sesuka kalian misalnya di ganti dengan tulisan kembali keatas karena nanti tulisan tersebut yang akan muncul di dalam tombol jika mouse di letakan di atas kode tersebut ( tidak di ganti tulisannya juga tidak apa-apa )
lihat di kode di atas tulisan yang warna merah bisa di ganti dengan sesuka kalian misalnya di ganti dengan tulisan kembali keatas karena nanti tulisan tersebut yang akan muncul di dalam tombol jika mouse di letakan di atas kode tersebut ( tidak di ganti tulisannya juga tidak apa-apa )
- cara memasukan nya ke dalam blog sama seperti cara tombol pertama , masukan kedalam gadged HTML/javascript
3. tombol ke tiga
keterangan :
tombol ini bisa di letahkan di pojok kiri atau kanan atau tengah tapi cara memasukan nya yang sedikit hati-hati, di bawah ini kodenya
tombol ini bisa di letahkan di pojok kiri atau kanan atau tengah tapi cara memasukan nya yang sedikit hati-hati, di bawah ini kodenya
<script src='http://bloggerpeer.googlecode.com/files/backtotop.js' type='text/javascript'/>
<!-- Back to top designed by Mazinu Mazure - mazinubersahabat.blogspot.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='http://png-1.findicons.com//oxyfiles/icons/2166gen/48/arrow_up.png'/></a>
<!-- Back to top designed by Mazinu Mazure - mazinubersahabat.blogspot.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='http://png-1.findicons.com//oxyfiles/icons/2166gen/48/arrow_up.png'/></a>
keterangan :
- copy kode di atas lalu masukan ke dalam HTML template
- tulisan warna merah bisa di ganti dengan tulisan kembali ke atas
Tombol back to top ke 4
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#noop-top").fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a id='noop-top' style='display: none; position: fixed; bottom: 1px; left:1%; cursor:pointer;font:12px arial;'><span>^</span></a><style type="text/css">#noop-top span{-moz-transition:all .3s ease-in 0s;-webkit-transition:all .3s;-o-transition:all .3s;background-color:#000;background:-moz-linear-gradient(top,#000 0,#000 50%,#000 51%,#000 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#000),color-stop(50%,#fff),color-stop(51%,#000),color-stop(100%,#000));background:-webkit-linear-gradient(top,#000 0,#000 50%,#000 51%,#000 100%);background:-o-linear-gradient(top,#000 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-ms-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);border:3px solid #fff;border-radius:14px 14px 14px 14px;color:#fff;font:bold 56px cursive;height:50px;left:3px;display:block;text-align:center;text-shadow:1px 1px 0 #000;top:-56px;width:50px}#noop-top:hover span{box-shadow:0 0 49px #207cca;height:70px}#noop-top{color:#000;text-shadow:1px 1px 0 #fff;text-decoration:none}</style>
- copy kode di atas lalu masukan ke dalam HTML template
- tulisan warna merah bisa di ganti dengan tulisan kembali ke atas
Tombol back to top ke 4
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#noop-top").fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a id='noop-top' style='display: none; position: fixed; bottom: 1px; left:1%; cursor:pointer;font:12px arial;'><span>^</span></a><style type="text/css">#noop-top span{-moz-transition:all .3s ease-in 0s;-webkit-transition:all .3s;-o-transition:all .3s;background-color:#000;background:-moz-linear-gradient(top,#000 0,#000 50%,#000 51%,#000 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#000),color-stop(50%,#fff),color-stop(51%,#000),color-stop(100%,#000));background:-webkit-linear-gradient(top,#000 0,#000 50%,#000 51%,#000 100%);background:-o-linear-gradient(top,#000 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-ms-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);border:3px solid #fff;border-radius:14px 14px 14px 14px;color:#fff;font:bold 56px cursive;height:50px;left:3px;display:block;text-align:center;text-shadow:1px 1px 0 #000;top:-56px;width:50px}#noop-top:hover span{box-shadow:0 0 49px #207cca;height:70px}#noop-top{color:#000;text-shadow:1px 1px 0 #fff;text-decoration:none}</style>
caranya :
buka blog kalian masuk ke dashboard pilih template lalu klik edit HTML dan pastekan kode di atas kedalam <body> ( ini sedikit rumit jadi saran saya hati-hati dan jangan langsung menyimpan nya tapi anda klik pratinjau dulu jika ada kesalahan bisa di kembalikan keperubahan yang sebelumnya )
buka blog kalian masuk ke dashboard pilih template lalu klik edit HTML dan pastekan kode di atas kedalam <body> ( ini sedikit rumit jadi saran saya hati-hati dan jangan langsung menyimpan nya tapi anda klik pratinjau dulu jika ada kesalahan bisa di kembalikan keperubahan yang sebelumnya )
Demikianlah panduan Blogger tentang cara memasang tombol navigasi kembali keatas semoga berguna buat kalian