Post Game

Cara Membuat Tombol Back To Top Part2

Pada Posting sebelumnya saya pernah membahas tentang cara Cara Membuat Tombol Back To Top Menggunakan Javascript, tapi di postingan tersebut banyak yang tidak berhasil menggunakan cara tersebut jadi kali ini saya akan Cara Membuat Tombol Back To Top Part2, mudah-mudahan dengan cara yang kedua ini banyak yang berhasil :D

#toTop {
display:none;
text-decoration:none;
position:fixed;
top:420px;
left:5px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6N4b6HnCpCmO74vV296-gPPI3HX9ji1KHP48go_vZ3F1NOeZ851L16yeMv_wQxBPs_DUNRnkRZuhPWxQgkDAdGmfNf0IEW7dXF1QU4FLYlHoKYfel0AoeHKocuK8_A-0jpUBqro-hWR4/s1600/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6N4b6HnCpCmO74vV296-gPPI3HX9ji1KHP48go_vZ3F1NOeZ851L16yeMv_wQxBPs_DUNRnkRZuhPWxQgkDAdGmfNf0IEW7dXF1QU4FLYlHoKYfel0AoeHKocuK8_A-0jpUBqro-hWR4/s1600/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;
}

 <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js type=text/javascript/>
<script type=text/javascript>
//<![CDATA[
$(function(){
$(a[href*=#top]).click(function() {
if (location.pathname.replace(/^//,) == this.pathname.replace(/^//,)
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $([name= + this.hash.slice(1) +]);
if ($target.length) {
var targetOffset = $target.offset().top;
$(html,body).animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
//]]>
</script>

-Semoga Bermanfaat  ting-

Go to link Download

Cara Membuat Tombol Back To Top Keren Di Blog

• Pertama masuk ke Blogger lalu pilih Layout terus Add a Gadget dan tambahin HTML/JavaScript gan. Terus tinggal loe pastein kode di bawah ini di kotak kosongnya.

<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="URL Gambar Back To Top" />, //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>

• Kalo udah di pastein sekarang tinggal di ganti URL Gambar Back To Top sama url gambar punya loe gan lalu di Save. Coba sekarang buka blog loe pasti udah ada tombol back to topnya gan.

Animasi :

Standar

Go to link Download

Cara Membuat Tombol Back To Top di Blog

Selamat malam sobat !!! Kali ini aq akan berbagi cara untuk membuat tombol Back to Top. Tombol Back To Top ini akan bermanfaat bagi pengunjung ketika ia ingin kembali ke bagian paling atas pada halaman web setelah membaca artikel pada Blog sobat yang panjang. Ok, jika sobat ingin membuat Tombol Back To Top ini, silakan simak artikel kali ini tentang Cara Membuat Tombol Back To Top di Blog.
Tombol Back To Top ini akan berada di sudut kanan bawah pada halaman web.

Berikut langkah-langkah dalam Membuat Tombol Back To Top di Blog.

1. Login ke akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik tambahkan gadget di posisi mana saja, hasilnya akan tetap berada di sudut kanan bawah.
4. Pilih mode HTML/Javascript.
5. Masukan kode html berikut.

<!--Back to top script-->
<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={
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
    controlHTML: <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT_b8ITnDhovsysmKd_jDt7eJY1SxS7AdY9PPcRHIZ1yTKWH57aTpusVZjwQYuA4M1d002xRpfiVCxKKv5i3JIaC-LdFFR1WWsUkdH7tJj8Bjz9-uUVGgHxvEpWE57jzTBC7rsgUo5ikBk/s1600/back+to+top13.png" />,
    controlattrs: {offsetx:5, offsety:5},
    anchorkeyword: #top,
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
        if (!this.cssfixedsupport)
            this.$control.css({opacity:0})
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery(#+dest).length==1)
            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()!=) //khusus versi IE6 ke bawah untuk loose check, juga untuk melihat apakah control mengandung teks
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- perlu diset witdh yang jelas agar kontainer text terbentuk dengan rapi
            mainobj.togglecontrol()
            $(a[href=" + mainobj.anchorkeyword +"]).click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind(scroll resize, function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()

<!--Back to top script end--></script>

Catatan:

• Jika telah terdapat script berwarna biru pada Template yang sobat miliki, maka hapuslah kode tersebut agar tidak terjadi bentrok antar Javascript.
• Kode-kode berwarna hijau bisa sobat ubah:

- Starline: Ukuran tinggi dalam pixel setelah halaman digulir kebawah dimana Tombol Back To Top akan muncul.

- Scroll Back To Top: title pada tombol

• Kode berwarna merah bisa sobat ubah dengan gambar Tombol Back To Top yang sobat inginkan. Namun jika tidak diubah maka hasilnya akan seperti berikut.

 

Ada beberapa pilihan gambar untuk tampilan tombol Back To Top, sobat bisa cari sendiri pilihan-pilihan nya di Google.

Go to link Download

Cara Membuat Tombol Back To Top pada Blog dengan Mudah

Go to link Download

Cara Membuat Tombol Back to Top dengan Efek Bounce

<script type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js/>

<script type=text/javascript>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $(#BounceToTop).fadeIn(); } else { $(#BounceToTop).fadeOut(); } });
$(#BounceToTop).click(function() { $(body,html).animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>

<style type=text/css scoped=scoped>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id=BounceToTop><img alt=Back to top src=http://2.bp.blogspot.com/-MFhU3vLp5ho/UiaBZeA1McI/AAAAAAAAAQs/MrzW2ljP5mA/s1600/arrow-up_basic_blue.png/></div> 

<script type=text/javascript>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $(#BounceToTop).slideDown(200); } else { $(#BounceToTop).slideUp(300); } });
$(#BounceToTop).click(function() { $(body,html).animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>

Go to link Download

Cara membuat Tombol Back to Top dengan mudah

•  Login ke Blogger, Klik Design/Rancangan > Edit HTML .
  
• Beri tanda centang pada Expand Template Widget.
  
  Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
• Copy kode berikut dan pastekan di atas ]]></b:skin>
  #floating-up {
  position:fixed;_position:absolute;top:280px; right:0px; clip:inherit;
  _bottom:expression(document.documentElement.scrollTop+
  document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
  #floating-up a
  {
  filter:alpha(opacity=65);
  -moz-opacity:0.65;
  opacity:0.65;
  border:0;
  }
  #floating-up img
  {
  border:0;
  }
  #floating-up a:hover
  {
  filter:alpha(opacity=100);
  -moz-opacity:1;
  opacity:1;
  }
• Lalu tambahkan kode <a name=to-bottom></a> tepat diatas kode </body>.
• Kemudian cari kode <body>, dan paste kode berikut dibawah <body> :
  <div id=floating-up>
  <div><a href=# title=back to top><img alt=back to top src=http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-top.png/></a></div>
  <div><a href=#to-bottom title=back to bottom><img alt=back to bottom src=http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-bottom.png/></a></div>
  </div>
• Terakhir klik Save / Simpan Template.
  

Go to link Download

Cara Membuat Tombol Back To Top

1. Login ke akun blogger sobat
2. Pilih Template>>Edit HTML>>Lanjutkan.Jangan lupa centang Expand Template Widget
3. Copas kode dibawah ini tepat diatas kode </body>(tekan Ctrl+F untuk mencari kode </body>)

   

Go to link Download

Cara Membuat Tombol Back To Top Menggunakan Javascript

Back To Top merupakan sebuah makna untuk kita dapat kembali ke bagian atas pada sebuah halaman yang sedang kita buka, dan itu memang sangat memudahkan bagi sebagian masyarakat yang menggunakan internet sebagai perpustakaannya apalagi bagi pengguna internet yang scroll mouseya udah rusak  haha ceilah bahasanya. Tapi kadang kala kita masuk ke sebuah blog yang mempunyai tombol Back To Top terus tombol tersebut di klik eh malah nge reload blognya terus blognya berat lagi aduh aduh....
Nah sekarang kita masuk ke pokok pembahasan, disini saya ada japa sekrip (hehe) tombol Back To Top dengan java script tombol Back To Top-nya muncul hanya ketika halaman sedang di scroll ke bawah, lalu jika sedang berada di bagian paling atas blog trik.. tombol menghilang, dan pada saat di scroll pun tidak ujug-ujug ke atas tapi kalo yang satu ini scroll nya secara halus dan menyenang kan haha (opo?). Untuk tombol yang satu ini saya sarankan menyimpannya di pojok blog dan jikalau belum tau caranya, mangga klik weh link ieu

okeh tanpa banyak bacot meningan langsung cekidot

1. Yang lain dan tidak bukan adalah masuk dulu ke Blogger dang ding dong.
2. Setelah itu masuk ke Tata Letak.
3. Maka dari itu kita harus klik Tambah Gadget > HTML/Java Script.
4. COPAS Kode Berikut.

<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/AVvXsEiPpplGeOEm_tlIX07Ep-rXrEWNI0eypABhAtwhNVyJ5J3VZLMKItW8JPYIsajNiOJkFuHOdgyZzz8jzHlOruO0IHFbYV8E5txw_TvAnRYERcTwqlUwfTF26Pwx-GZ1h25s8lWBbsuItp8/s1600/Back+To+Top.jpg" right: 20px;" width="75"/>, //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:32}, //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>

 5. Yang terakhir klik Simpan
selesai....

-Semoga Bermanfaat ^^,-

Update:
Cara Membuat Tombol Back To Top Part2

Go to link Download