Cara Membuat Tombol Kembali Ke Atas Pada Blog

"Cara Membuat Tombol Kembali Ke Atas Pada Blog"

   Hallo Sobat Blogger..?? Pada kesempatan kali ini saya akan membagikan tutorial tentang "Cara Membuat Tombol Kembali Ke Atas Pada Blog" Tombol Back To Top yang biasanya berupa gambar panah menuju keatas yang terletak dibawah blog merupakan salah satu widget yang dapat membantu pengunjung untuk lebih mudah kembali keatas halaman page.

   Dengan Membuat Tombol Back To Top (Kembali Ke Atas) sangat membantu untuk bergerak cepat kembali pada artikel yang diatas, sehingga kita tidak perlu lagi menggunakan fungsi scroll mouse untuk melihat halaman yang telah terlewat.

   Nah..!! jika saat ini anda berada pada halaman komentar dan ingin melihat atau membaca ulang artikel yang anda kunjungi, cukup KLIK Tombol Back To Top, maka anda akan diarahkan kehalaman Title Judul Blog atau Header.

   Akan tetapi kalau artikel blog cukup pendek mungkin Tombol Back To Top (Kembali Ke Atas) ini sedikit tidak berlaku, namun jika terkadang artikel blog kita cukup panjang tentu Tombol Back To Top sangat dapat membantu.

Caranya ikuti langkah-langkah Dibawah ini :

Log in to akun Blogger
Tata letak >>> tambahkan Gadget
Copy kode berikut lalu Paste pada HTML/JavaScript

Kode script I

Cara Membuat Tombol Dengan Efek Scroll Lembut

Sobat Copas kodenya DISINI

Kode script II

Cara Membuat Tombol Dengan Scroll Cepat

<br /><script type="text/javascript">
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Modified by www.MyBloggerTricks.com
* Republish by http://kreasikita32.blogspot.com
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
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://1c26810773abde3489fcbbd568d1df8bfa1ca05b.googledrive.com/host/0BxFA-B0-ztFWZm95N243TThGQjQ/TO-TOP.png" />', //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:'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>

Sobat Copas kodenya DISINI

Keterangan :

Silahkan sesuaikan gambar Tombol Back To Top dengan selera anda, ganti kode yang berwarna MERAH dengan Url gambar berikut :

Gambar Widget Tombol Back To Top

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYZQMyiOVNR_qSv6-9PjZ1jYHvww_Uj4oJU8ZfjEYglfg-och0KeEyCZz90_Uocq0pZjIcGL7_Bnx67tE4RUyaErsuMZmSZ53RCxJya9FSdzsE_lKRlZXDeXjJfrVFTINEn1W2fzCkPw/s1600/back+to+top107.gif

Gambar Widget Tombol Back To Top

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Sw3l4Jee3bWtHfvniMPfpZmD1Q50WIBRqFLhhyphenhyphentMno-Tg0dSFENxv8f-rSfYLEhqP4lvhCoIx8majmqcI7N1-4NY5QBO6wuBWtItorP0wHomjO99EgF1S_FRCJZ_LwwXX_sLonrqHw/s1600/back+to+top2.png

Gambar Widget Tombol Back To Top

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYxHRCo_4sYgWejpTouNpaeaDNgrHLcUcJ0Zs-nnXDGIU0sNGvy2ZPGKOd26tPzNn87Q-otJmd5_A8o4xWODRj1sVtk1i_jjlhdRm2Vb544_yAO6E8ZKZxTgMLEuAjIlXAYw_uvnyCHQ/s1600/back+to+top3.png

Gambar Widget Tombol Back To Top

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOY4QV4Q8BJK4yJ1iNSkgjjTOpY5iPdBLK3XixJnIo6TnJvEUJUK7resM4Cg_aXPEz219viphufK2H7ZlqffyfweOVLFncWCm6Aa2m-z_ioFotY_YkjB5j3W_wRWTlsR0ii8bfPXnPuw/s1600/back-to-top1.png

Nah, Sekian dulu artikel dari saya tentang "Cara Membuat Tombol Kembali Ke Atas Pada Blog" Semoga artikel ini bisa bermanfaat untuk kita semua...

"Terima Kasih"

KREASI KITA

Cari Blog Ini

Iklan

Cara Membuat Tombol Kembali Ke Atas Pada Blog

Komentar

Posting Komentar