Membuat Tombol Back To Top di Blog Melalui Widget

Seringkali pada saat kita blog walking, baca-baca setiap artikel atau tulisan yang ada kita dihadapi sama yang namanya scroll on top, apalagi pas kita lagi baca sebuah artikel yang emang banyak teksnya, ketika kita selesai membaca, kita mau ke home menu kita harus menscroll manual pada mouse kita. Oke si menurut beberapa orang itu gak masalah, namun kalo semua bisa dipermudah secara otomatis kenapa enggak?
Untuk para blogger khususnya, kenyamanan seorang pengunjung harus lebih diperhatikan, postingan kali ini akan menshare tentang Membuat Tombol Back To Top di Blog Melalui Widget. Ya script yang kita gunakan disini cukup ditaruh pada widget, jadi kalian gak perlu obrak-abrik HTML dan CSS kalian, dan juga agar lebih mudah dalam pemasangan dan pengeditan nanti.
Oke kita mulai....
Langsung saja stepnya:

1. Pertama kalian udah pada tau kan untuk menambahkan widget baru di blog? Ia dengan klik tata letak, add gadget, terus pilih HTML/JavaScript.
2. Pastekan Script Back To Up dibawah ini:

<script type="text/javascript" > /*********************************************** * Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * Modified by www.depermana-share.blogspot.com.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOOgltLkLu52dyOTULqDm_dx3e0r6wKQKok0LzwNoZuGuTJkAQyjA_xC6Rh4Naug1PR6Q21952SFqxv5YKU_KujlF8z9wFOeXmsRLps8Mf0KKeMyB9TfgVjJlYF1E9l0GHTaumcALLDeaD/s1600/arrow-up.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:'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>

3. Setelah kalian mengcopy script diatas, langsung saja kalian menuju widget yang baru dibuat tadi, pastekan pada kolom scriptnya. Udah gak diberi judul juga gak papa.

4. Nah selesai, tinggal simpan, dan save perubahan.

Coba kalian cek di home blog kalian :)

Oya untuk mengganti gambar (icon) pada tombol Up diatas, kalian tinggal cari link bertuliskan http://.... dengan cara CTRL+F pada widget nya. Dibawah ini ada sedikit icon yang saya peruntukan kepada pembaca semua.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9hyrfQS1qwC_F92cDVhOX7q_a0UyeZtRXDtTJYaww3wfPWjbQRQI8qzNxuLwbJe498fHBD_RdL2Zm57jRiU7jnASW9we2mkoDbWwjE_yLAdOHIvBPA8PvzR6F6HmbkQC27Xl2WMWfbIi1/s1600/back+to+top10.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJzgHv_yQTC4gdh0Gx5GP0gaKbM8P5FoVEvwRXClRHDnD_55dUK1iOC5FsxT7q71C0JbR4OgVBlm4g_XgixfOHLU709_VcdvpBSx7yksEJcRZ54mggCnnk59z_JzRLaJ5KvvUuOaPNdBtK/s1600/back+to+top14.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpYyHPHVwqrqHHE3jV5sFJaEQoTmC7-giAM33veCo9egElu2E6q4NsU5GK3FdgKnZgSpiDlkBOAOTahnadII7MefFYCnLg4Cei3GhBA7xI-YxVH4UAkiyc56l8lc-2UI-Ensqm8LxCI-vn/s1600/back+to+top15.png


http://i1198.photobucket.com/albums/aa452/Lutfi14/back-to-top.png

Sekian postingan dari saya, semoga bermanfaat dan jangan lupa untuk tinggalkan komentar ya :)

Posted in: Tips dan Trik,Tutorial Blog