2 Cara Memasang Tombol Back To Top Pada Template Blog

Kali ini dbloger.com akan berbagi 2 cara memasang atau membuat tombol back to top pada tampilan situs wab, fungsi dari tombol tersebut adalah untuk scroll kembali ke atas dengan cepat.

Cara memasang tombol back to top ini ada dua cara ,yang pertama menambahkan kode pada templat dan cara yang ke dua menambahkan kode pada widget .

Caranya:

Log in ke dasbord blog sobat kemudian klik templat dan klik edit templat , copy kode berikut dan letakkan di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>
<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#ScrollToTop&#39;).fadeIn()}
else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700);
return false})});
</script>

Perhatian:

Angka warna biru adalah jarak munculnya tombol back to top ,

Sedangkan tombol warna oranye adalah kecepatan scroll ,sobat bisa menyesuaikan sendiri .

Kemudian letakkan kode berikut di atas kode   ]]></b:skin>

#ScrollToTop{text-align:center;z-index:9999;position:fixed;bottom:40px; right:30px;cursor:pointer;display:none;opacity:0.7;}
#ScrollToTop:hover{opacity:1;}

Selanjutnya sobat letakkan kode di bawah ini ,dan letakkan di atas kode </body>

<div id='ScrollToTop'><img alt='Back to top' src='http://4.bp.blogspot.com/-Izmqq2QVcY8/UmMQyNKbhYI/AAAAAAAABcI/a28qtFC2uto/s1600/backtotop.png'/></div>

Perhatian:

Tulisan warna merah adalah link gambar ,sobat bisa menggantinya dengan Ling gambar sesuai ke inginan sobat.

Kemudian simpan templat.

2. Cara memasang tombol back to top yang ke dua adalah dengan cara meletakkan kode pada widget .

Letakkan kode di bawah ini di atas kode  </head> :

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

Atau seperti ini:

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

Atau jika sudah ada kode di atas dalam templat sobat, ya gak usah di kasih lagi.

Kemudian copas kode berikut pada widget

Masuk ke dasbord blog sobat pilih tata letak ,pilih java script .

<style>
.mbw-back-to-top {
   position: fixed;
   bottom: 2em;
   right: 10px;
   text-decoration: none;
   padding: 1em;
   display: none;
   cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="http://4.bp.blogspot.com/-hsRaTBL9lpY/USDb4Wzo2WI/AAAAAAAAAiU/2eSTakNmCOE/s1600/back+to+top.png" />
<script type="text/javascript">
/*****mybloggersworld.com***/
jQuery(document).ready(function() {
   var offset = 220;
   var duration = 500;
   jQuery(window).scroll(function() {
       if (jQuery(this).scrollTop() > offset) {
           jQuery('.mbw-back-to-top').fadeIn(duration);
       } else { //www.mybloggersworld.com
           jQuery('.mbw-back-to-top').fadeOut(duration);
       }
   });

   jQuery('.mbw-back-to-top').click(function(event) {
       event.preventDefault();
       jQuery('html, body').animate({scrollTop: 0}, duration);
       return false;
   })
});
</script>

Link yang berwarna merah silahkan ganti dengan link gambar kesukaan sobat kemudian. Simpan .

Jika cara ke dua di atas tidak bisa silahkan gunakan kode berikut

<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="http://3.bp.blogspot.com/-WH_FEtT_Cvs/USDjPDtErPI/AAAAAAAAAjk/0BNlHdiUu9w/s1600/back+to+top+button.gifgif" />', //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>

Semoga berhasil.

Contoh gambar back to top:

                   

Link:

http://3.bp.blogspot.com/-WH_FEtT_Cvs/USDjPDtErPI/AAAAAAAAAjk/0BNlHdiUu9w/s1600/back+to+top+button.gif

                  

http://3.bp.blogspot.com/-ggvoO88bhfM/USDi6IWVtFI/AAAAAAAAAjc/n4vpSkZgR00/s1600/back+to+top.png

Itulah 2 cara memasang tombol back to top pada situs wab.semoga Berman faat