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 jaringan peer to peer PC

Perlu agan 2 ketahui bahwa kabel UTP memiliki 4 pasang kabel kecil di dalamnya yang memiliki warna berbeda. 4 pasang kabel itu adalah :

Spoiler for cek:

 

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