-->






Iklan

Cara memasang tombol kembali ke atas atau back to top

Cara memasang tombol kembali ke atas atau cara membuat tombol kembali ke atas atau cara membuat tombol back to top
Tombol kembali ketas atau tombol back to top adalah termasuk tombol navigasi dalam sebuah website atau blog , dan tombol kembali ke atas ini fungsinya untuk mempermudah bagi pengguna atau pengunjung serta kita sendiri untuk dengan cepat sekali klik langsung menuju halaman blog bagian atas atau bagian header.

Tombol-tombol navigasi untuk perlengkapan dalam web atau blog ini juga sebuah tombol yang penting artinya sebaiknya jika anda mempunyai blog atau website harus di lengkapi dengan tombol-tombol navigasi, untuk mau bergabung kedalam jasa periklanan di internet misalnya Google adsense pun sebuah blog yang di daftarkan untuk menjadi publizer harus menyertakan tombol-tombol navigasi Termasuk tombol kembali ke atas atau dalam bahasa inggrisnya back to top.
seperti yang akan saya akan sampaikan dalam postingan kali ini yaitu cara memasang tombol kembali ke atas

Tombol kembali keatas atau back to top sangat banyak macam nya dan juga banyak cara pemasanganya bisa melalui widget dan juga bisa memasang tombol kembali keatas lewat Html.
pada panduan jasa setting blog kali ini saya akan memberikan beberapa macam cara memasang tombol kembali ke atas dan cara selengkapnya silahkan simak panduan cara membuat tombol back to top di bawah ini

Cara membuat dan memasang tombol kembali ke atas
1.buka blog anda lalu login
2.dan dalam menu dashboard blog pilih Tata letak , lalu klik Tambahkan gadged dan pilih gadged Html/javascript
3.lalu pilih salah satu dari kode di bawah ini

kode pertama
Tombol kembali ke atas nya tombolnya seperti gambar di bawah ini

cara memasang tombol kembali ke atas

<a href='#' style='display:scroll;position:fixed;bottom:15px;right:15px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTSjmqtdzg5F3X7ufabZGkag0h4aYyEs6THG84qm8i1sW_9i9kmc01JIf-ibaiTvmeDOy3KVJufEXeh_leBXB5UNnqYxR9pT5V0DUpQFgjzCP5xJ4l3DS2qnLO5lZJUa0q8yfy0u6QxoYZ/s1600/navigate-up-icon.png'/></a>

Kode ke dua ( 2)
Tombol kembali ketas nya  seperti gambar di bawah ini

cara memasang tombol kembali ketas atau back to top

<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/AVvXsEifbLCi54-x97tdZbreA58DNpdZr02gR2hHG1JNyw-iHSYUHduwmifcNvLa2C1IqxonSqrDSROK5-hs2L-pjpHSO5Lxc6f1RV9XKM5zkHUfOw2eye_LtGrf9wn4y3n666NvjaBufGKyJXkq/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);
},
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>


Kode ketiga ( 3 )
Tombol back to top nya seperti gambar di bawah ini

cara memasang tombol back to top atau kembali ke atas

 <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>


4.Jika sudah memilih salah satu dari ke tiga ( 3 ) kode tombol kembali ke atas lalu pastekan kedalam gadged Html/javascript dan selanjutnya simpan gadged nya
5.selesai

dan untuk melihat hasil dari pembuatan tombol kembali ke atas nya silahkan buka ulang beranda atau postingan anda

Sampai disini panduan dari jasa setting blog dan website tentang cara memasang tombol kembali ke atas atau cara membuat tombol kembali keatas ( back to top ) semoga panduan ini bisa bermanfaat buat sahabat blogger semuanya , amin

Komentar

Tampilkan

1 comment:

  1. Terimakasih Postingannya gan, ini sangat membantu dan izin copas

    ReplyDelete

Terimakasih sudah mengunjungi jasa setting Website / Jasa Pembuatan Website www.jasa-website.web.id semoga bermanfaat , kontak 081399167240

Komputer

+