Cara Membuat "Back To Top" di Blog

Hai Sobat Amzkomp.

Bertemu lagi dengan saya yang pastinya akan membagikan artikel-artikel menarik.

Hmmm.. Sekarang saya akan membahas tentang Cara Membuat "Back To Top" di Blog .

Udah pada tau belum? yang udah tau ikut simak juga ya biar gak lupa..

OK, langsung saja ikuti caranya berikut ini  :

1. Buka akun Blogger agan.

2. Pilih "Tata Letak"

3. Pilih "Tambahkan Gadget"

4. Pilih "HTML/JavaScript"

5. Copy Kode ini :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" > * Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * Advanced modification by acep-computer-science.blogspot.com * This notice MUST stay intact for legal use * Visit Project Page at http://www.dynamicdrive.com for full source code ***********************************************/ var scrolltotop={ setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]}, controlHTML: '<img src="Pastekan URL Gambar agan Disini" />', 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() </script>
Ganti Tulisan " Pastekan URL Gambar agan Disini " dengan url gambar back to top agan.
6. Klik Simpan.

Bagaimana? Mudahkan?

Semoga Artikel ini bermanfaat ya..

Terima kasih telah membaca artikel tentang Cara Membuat "Back To Top" di Blog di blog Blognya Ardiant jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini di web broswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Artikel terbaru :

Mas Sehat | Blog Tentang Kesehatan | Mas Sehat ~ Blog Tentang Kesehatan | www.mas-sehat.com

Suka artikel ini? Bagikan :

FacebookGoogle+